Focus-with-select when focusing Search box (jupyterlab#7932)

Focus-with-select when focusing Search box (Issue jupyterlab#7932) https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement Old: `focus()` Focuses on the input element; keystrokes will subsequently go to this element. New: `select()` Selects all the text in the input element, and focuses it so the user can subsequently replace all of its content.
misterbeebee · Mar 23, 2020 · 382a71e · 382a71e
1 parent 3af9e1e
commit 382a71e
Showing 1 changed file with 5 additions and 1 deletion.
diff --git a/packages/documentsearch/src/searchoverlay.tsx b/packages/documentsearch/src/searchoverlay.tsx
@@ -81,7 +81,11 @@ class SearchEntry extends React.Component<ISearchEntryProps> {
    * Focus the input.
    */
   focusInput() {
-    (this.refs.searchInputNode as HTMLInputElement).focus();
+    // Select (and focus) any text already present.
+    // This makes typing in the box starts a new query (the common case),
+    // while arrow keys can be used to move cursor in preparation for
+    // modifying previous query.
+    (this.refs.searchInputNode as HTMLInputElement).select();
   }
 
   componentDidUpdate() {