feat: Add setSelectionRange to PromptInput (#3294)

Author: gethinwebster

src/__tests__/snapshot-tests/__snapshots__/documenter.test.ts.snap

@@ -12604,6 +12604,29 @@ about modifiers (that is, CTRL, ALT, SHIFT, META, etc.).",
       "parameters": [],
       "returnType": "void",
     },
+    {
+      "description": "Selects a range of text in the textarea control.
+See https://developer.mozilla.org/en-US/docs/Web/API/HTMLTextAreaElement/setSelectionRange
+for more details on this method. Be aware that using this method in React has some
+common pitfalls: https://stackoverflow.com/questions/60129605/is-javascripts-setselectionrange-incompatible-with-react-hooks
+",
+      "name": "setSelectionRange",
+      "parameters": [
+        {
+          "name": "start",
+          "type": "null | number",
+        },
+        {
+          "name": "end",
+          "type": "null | number",
+        },
+        {
+          "name": "direction",
+          "type": ""backward" | "forward" | "none"",
+        },
+      ],
+      "returnType": "void",
+    },
   ],
   "name": "PromptInput",
   "properties": [

src/prompt-input/__tests__/prompt-input.test.tsx

@@ -55,6 +55,23 @@ describe('ref', () => {
     expect(textarea.selectionStart).toBe(0);
     expect(textarea.selectionEnd).toBe(4);
   });
+
+  test('can be used to select a range', () => {
+    const ref = React.createRef<HTMLTextAreaElement>();
+    const { wrapper } = renderPromptInput({ value: 'Test', ref });
+    const textarea = wrapper.findNativeTextarea().getElement();
+
+    // Make sure no text is selected
+    textarea.selectionStart = textarea.selectionEnd = 0;
+    textarea.blur();
+    expect(textarea.selectionStart).toBe(0);
+    expect(textarea.selectionEnd).toBe(0);
+
+    // Select all text
+    ref.current!.setSelectionRange(1, 3);
+    expect(textarea.selectionStart).toBe(1);
+    expect(textarea.selectionEnd).toBe(3);
+  });
 });
 
 describe('disableBrowserAutocorrect', () => {

src/prompt-input/interfaces.ts

@@ -119,5 +119,14 @@ export namespace PromptInputProps {
      * Selects all text in the textarea control.
      */
     select(): void;
+
+    /**
+     * Selects a range of text in the textarea control.
+     *
+     * See https://developer.mozilla.org/en-US/docs/Web/API/HTMLTextAreaElement/setSelectionRange
+     * for more details on this method. Be aware that using this method in React has some
+     * common pitfalls: https://stackoverflow.com/questions/60129605/is-javascripts-setselectionrange-incompatible-with-react-hooks
+     */
+    setSelectionRange(start: number | null, end: number | null, direction?: 'forward' | 'backward' | 'none'): void;
   }
 }

src/prompt-input/internal.tsx

@@ -77,6 +77,9 @@ const InternalPromptInput = React.forwardRef(
         select() {
           textareaRef.current?.select();
         },
+        setSelectionRange(...args: Parameters<HTMLTextAreaElement['setSelectionRange']>) {
+          textareaRef.current?.setSelectionRange(...args);
+        },
       }),
       [textareaRef]
     );