From be0c9d5d57018c33564f2c086e57a168395242fb Mon Sep 17 00:00:00 2001
From: Ian Tan <ian.tan@techinasia.com>
Date: Thu, 24 Aug 2017 11:54:20 +0800
Subject: [PATCH 1/2] Make keyboard and focus handlers accept HTMLInputElement
 as type parameter

---
 types/react-select/index.d.ts             |  6 ++--
 types/react-select/react-select-tests.tsx | 35 +++++++++++++++++++++--
 2 files changed, 35 insertions(+), 6 deletions(-)

diff --git a/types/react-select/index.d.ts b/types/react-select/index.d.ts
index aba6c4d68e..8254435ce2 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<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;
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<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 {

From 279a617246661da2c3d067f6b00134238cfc17aa Mon Sep 17 00:00:00 2001
From: Ian Tan <ian.tan@techinasia.com>
Date: Thu, 24 Aug 2017 13:44:17 +0800
Subject: [PATCH 2/2] Add index type to Option

---
 types/react-select/index.d.ts | 5 +++++
 1 file changed, 5 insertions(+)

diff --git a/types/react-select/index.d.ts b/types/react-select/index.d.ts
index 8254435ce2..35e5bf127d 100644
--- a/types/react-select/index.d.ts
+++ b/types/react-select/index.d.ts
@@ -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;