diff --git a/types/react-select/index.d.ts b/types/react-select/index.d.ts
index 837af1df07..ff29e1992f 100644
--- a/types/react-select/index.d.ts
+++ b/types/react-select/index.d.ts
@@ -41,7 +41,7 @@ declare namespace ReactSelectClass {
     type OnBlurHandler = React.FocusEventHandler<HTMLDivElement | HTMLInputElement>;
     type OptionRendererHandler<TValue = OptionValues> = (option: Option<TValue>) => HandlerRendererResult;
     type ValueRendererHandler<TValue = OptionValues> = (option: Option<TValue>) => HandlerRendererResult;
-    type OnValueClickHandler = (value: string, event: React.MouseEvent<HTMLAnchorElement>) => void;
+    type OnValueClickHandler<TValue = OptionValues> = (option: Option<TValue>, event: React.MouseEvent<HTMLAnchorElement>) => void;
     type IsOptionUniqueHandler<TValue = OptionValues> = (arg: { option: Option<TValue>, options: Options<TValue>, labelKey: string, valueKey: string }) => boolean;
     type IsValidNewOptionHandler = (arg: { label: string }) => boolean;
     type NewOptionCreatorHandler<TValue = OptionValues> = (arg: { label: string, labelKey: string, valueKey: string }) => Option<TValue>;
@@ -427,7 +427,7 @@ declare namespace ReactSelectClass {
         /**
          * onClick handler for value labels: function (value, event) {}
          */
-        onValueClick?: OnValueClickHandler;
+        onValueClick?: OnValueClickHandler<TValue>;
 
         /**
          *  pass the value to onChange as a simple value (legacy pre 1.0 mode), defaults to false
diff --git a/types/react-select/react-select-tests.tsx b/types/react-select/react-select-tests.tsx
index 7ac189f231..15527339b1 100644
--- a/types/react-select/react-select-tests.tsx
+++ b/types/react-select/react-select-tests.tsx
@@ -186,6 +186,43 @@ describe("Examples", () => {
         }
     });
 
+    it("onValueClick", () => {
+        class Component extends React.Component {
+            private onValueClick: ReactSelect.OnValueClickHandler<number> = (option) => {
+                const optionValue: number = option.value;
+            }
+
+            render() {
+                const options = [
+                    { value: 3, label: "Option 3" },
+                    { value: 9, label: "Option 9" }
+                ];
+
+                return <ReactSelect
+                    name="select"
+                    value={123}
+                    options={options}
+                />;
+            }
+        }
+    });
+
+    it("Custom value onValueClick", () => {
+        class Component extends React.Component {
+            private onValueClick: ReactSelect.OnValueClickHandler<CustomValueType> = (option) => {
+                const optionValue: CustomValueType = option.value;
+            }
+
+            render() {
+                return <CustomValueReactSelect
+                    name="select"
+                    value={EXAMPLE_CUSTOM_VALUE}
+                    options={EXAMPLE_CUSTOM_OPTIONS}
+                />;
+            }
+        }
+    });
+
     it("Custom value onChange", () => {
         class Component extends React.Component {
             private onSelectChange: ReactSelect.OnChangeSingleHandler<CustomValueType> = (option) => {