fix: select input text for oneof dropdown on focus (#675)

This makes it easier for users to "search" for an item as soon as they
click on the dropdown.

Author: stevenle

.changeset/shiny-cherries-guess.md

@@ -0,0 +1,5 @@
+---
+'@blinkk/root-cms': patch
+---
+
+fix: select input text for oneof dropdown on focus (#675)

packages/root-cms/ui/components/DocEditor/DocEditor.tsx

@@ -1310,6 +1310,15 @@ DocEditor.OneOfField = (props: FieldProps) => {
     return unsubscribe;
   }, [props.draft, props.deepKey]);
 
+  // When the dropdown receives focus, highlight the <input> text so that it can
+  // be easily searched.
+  function onDropdownFocus(e: FocusEvent) {
+    const target = e.target as HTMLInputElement;
+    if (target && target.select) {
+      target.select();
+    }
+  }
+
   return (
     <div className="DocEditor__OneOfField">
       <div className="DocEditor__OneOfField__select">
@@ -1319,6 +1328,7 @@ DocEditor.OneOfField = (props: FieldProps) => {
           value={type}
           placeholder={field.placeholder}
           onChange={(e: string) => onTypeChange(e || '')}
+          onFocus={onDropdownFocus}
           size="xs"
           radius={0}
           searchable