Merge pull request #32359 from efedorenko/react-mentions-2.4

react-mentions: Added support for inputRef prop in v2.4

types/react-mentions/index.d.ts

@@ -1,6 +1,7 @@
-// Type definitions for react-mentions 2.3
+// Type definitions for react-mentions 2.4
 // Project: https://github.com/signavio/react-mentions
 // Definitions by: Scott Willeke <https://github.com/activescott>
+//                 Eugene Fedorenko <https://github.com/efedorenko>
 // Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped
 // TypeScript Version: 2.8
 import * as React from "react";
@@ -41,12 +42,16 @@ export interface MentionsInputProps {
     style?: any;
     regex?: RegExp;
     suggestionsPortalHost?: Element;
+    inputRef?: React.RefObject<HTMLTextAreaElement> | React.RefObject<HTMLInputElement>;
 }
 
 /**
  * Exposes the type for use with the @see MentionsInputComponent.wrappedInstance which is added by react-mentions' use of substyle (https://github.com/jfschwarz/substyle).
  */
 export interface MentionsInputComponentUnrwapped extends React.Component<MentionsInputProps> {
+    /**
+     * @deprecated since version 2.4.0. Please use @see MentionsInputProps.inputRef
+     */
     inputRef?: HTMLInputElement | HTMLTextAreaElement;
 }
 

types/react-mentions/react-mentions-tests.tsx

@@ -11,19 +11,32 @@ interface TestProps {
 }
 
 export const TestSimple: React.SFC<TestProps> = (props) => {
+    const inputEl = React.createRef<HTMLTextAreaElement>();
+
+    function handleClick() {
+        if (inputEl.current) {
+            inputEl.current.focus();
+        }
+    }
+
     return (
-        <MentionsInput
-            value={props.value}
-            onChange={props.onChange}
-            placeholder={"Mention people using '@'"}
-            displayTransform={login => `@${login}`}
-        >
-        <Mention
-            trigger="@"
-            data={props.data}
-            onAdd={props.onAdd}
-        />
-        </MentionsInput>
+        <>
+            <MentionsInput
+                value={props.value}
+                onChange={props.onChange}
+                placeholder={"Mention people using '@'"}
+                displayTransform={login => `@${login}`}
+                inputRef={inputEl}
+            >
+                <Mention
+                    trigger="@"
+                    data={props.data}
+                    onAdd={props.onAdd}
+                />
+            </MentionsInput>
+
+            <button onClick={handleClick}>Focus</button>
+        </>
     );
 };
 

types/react-mentions/tsconfig.json

@@ -2,7 +2,7 @@
     "compilerOptions": {
         "module": "commonjs",
         "lib": [
-            "es6"
+            "es6", "dom"
         ],
         "noImplicitAny": true,
         "noImplicitThis": true,