diff --git a/types/react-select/index.d.ts b/types/react-select/index.d.ts index aba6c4d68e..35e5bf127d 100644 --- a/types/react-select/index.d.ts +++ b/types/react-select/index.d.ts @@ -32,11 +32,11 @@ declare namespace ReactSelectClass { type MenuRendererHandler = (props: MenuRendererProps) => HandlerRendererResult; type OnCloseHandler = () => void; type OnInputChangeHandler = (inputValue: string) => void; - type OnInputKeyDownHandler = React.KeyboardEventHandler; + type OnInputKeyDownHandler = React.KeyboardEventHandler; type OnMenuScrollToBottomHandler = () => void; type OnOpenHandler = () => void; - type OnFocusHandler = React.FocusEventHandler; - type OnBlurHandler = React.FocusEventHandler; + type OnFocusHandler = React.FocusEventHandler; + type OnBlurHandler = React.FocusEventHandler; type OptionRendererHandler = (option: Option) => HandlerRendererResult; type ValueRendererHandler = (option: Option) => HandlerRendererResult; type OnValueClickHandler = (value: string, event: React.MouseEvent) => void; @@ -82,6 +82,11 @@ declare namespace ReactSelectClass { * @default false */ disabled?: boolean; + /** + * In the event that a custom menuRenderer is provided, Option should be able + * to accept arbitrary key-value pairs. See react-virtualized-select. + */ + [property: string]: any; } type OptionValues = string | number | boolean; diff --git a/types/react-select/react-select-tests.tsx b/types/react-select/react-select-tests.tsx index 8b834d1bb6..b19656ec5d 100644 --- a/types/react-select/react-select-tests.tsx +++ b/types/react-select/react-select-tests.tsx @@ -77,9 +77,10 @@ describe("react-select", () => { }); it("Overriding default key-down behavior with onInputKeyDown", () => { - const keyDownHandler: ReactSelect.OnInputKeyDownHandler = event => { - const e: React.KeyboardEvent = event; - }; + const keyDownHandler: ReactSelect.OnInputKeyDownHandler = (event => { + const divEvent = event as React.KeyboardEvent; + const inputEvent = event as React.KeyboardEvent; + }); }); it("Updating input values with onInputChange", () => { @@ -89,6 +90,34 @@ describe("react-select", () => { }); }); +describe("Focus events", () => { + it("Passing custom onFocus", () => { + class Component extends React.PureComponent { + render() { + return ( + { + const inputEvent = e as React.FocusEvent; + const divEvent = e as React.FocusEvent; + }} /> + ); + } + } + }); + + it("Passing custom onBlur", () => { + class Component extends React.PureComponent { + render() { + return ( + { + const inputEvent = e as React.FocusEvent; + const divEvent = e as React.FocusEvent; + }} /> + ); + } + } + }); +}); + describe("Examples", () => { it("Simple example", () => { class Component extends React.Component {