Merge pull request #19297 from iantanwx/master

`react-select`: make event handlers accept HTMLInputElement as type parameter

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<HTMLDivElement>;
+    type OnInputKeyDownHandler = React.KeyboardEventHandler<HTMLDivElement | HTMLInputElement>;
     type OnMenuScrollToBottomHandler = () => void;
     type OnOpenHandler = () => void;
-    type OnFocusHandler = React.FocusEventHandler<HTMLDivElement>;
-    type OnBlurHandler = React.FocusEventHandler<HTMLDivElement>;
+    type OnFocusHandler = React.FocusEventHandler<HTMLDivElement | HTMLInputElement>;
+    type OnBlurHandler = React.FocusEventHandler<HTMLDivElement | HTMLInputElement>;
     type OptionRendererHandler = (option: Option) => HandlerRendererResult;
     type ValueRendererHandler = (option: Option) => HandlerRendererResult;
     type OnValueClickHandler = (value: string, event: React.MouseEvent<HTMLAnchorElement>) => 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;

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<HTMLDivElement> = event;
-        };
+        const keyDownHandler: ReactSelect.OnInputKeyDownHandler = (event => {
+            const divEvent = event as React.KeyboardEvent<HTMLDivElement>;
+            const inputEvent = event as React.KeyboardEvent<HTMLInputElement>;
+        });
     });
 
     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 (
+                    <ReactSelect onFocus={(e) => {
+                        const inputEvent = e as React.FocusEvent<HTMLInputElement>;
+                        const divEvent = e as React.FocusEvent<HTMLDivElement>;
+                    }} />
+                );
+            }
+        }
+    });
+
+    it("Passing custom onBlur", () => {
+        class Component extends React.PureComponent {
+            render() {
+                return (
+                    <ReactSelect onBlur={(e) => {
+                        const inputEvent = e as React.FocusEvent<HTMLInputElement>;
+                        const divEvent = e as React.FocusEvent<HTMLDivElement>;
+                    }} />
+                );
+            }
+        }
+    });
+});
+
 describe("Examples", () => {
     it("Simple example", () => {
         class Component extends React.Component {