feat: Add select on focus to text field (#1072)

Co-authored-by: JonnCh <[email protected]>
homebound-team · Sep 23, 2024 · 6cc4009 · 6cc4009
1 parent 66af1b7
commit 6cc4009
Show file tree

Hide file tree

Showing 3 changed files with 8 additions and 3 deletions.
diff --git a/src/components/SuperDrawer/components/SuperDrawerHeader.tsx b/src/components/SuperDrawer/components/SuperDrawerHeader.tsx
@@ -12,7 +12,7 @@ interface SuperDrawerHeaderProps {
 }
 
 interface SuperDrawerHeaderStructuredProps {
-  title: string;
+  title: string | ReactNode;
   left?: ReactNode;
   right?: ReactNode;
   hideControls?: boolean;
@@ -32,7 +32,7 @@ export function SuperDrawerHeader(props: SuperDrawerHeaderProps | SuperDrawerHea
       {isStructuredProps(props) ? (
         <div css={Css.df.jcsb.aic.gap2.fg1.$}>
           <div css={Css.fg1.df.aic.gap2.$}>
-            <h1>{props.title}</h1>
+            {typeof props.title === "string" ? <h1>{props.title}</h1> : props.title}
             {props.left}
           </div>
           {props.right && <div css={Css.fs0.$}>{props.right}</div>}

diff --git a/src/inputs/TextField.tsx b/src/inputs/TextField.tsx
@@ -25,6 +25,8 @@ export interface TextFieldProps<X> extends BeamTextFieldProps<X> {
   endAdornment?: ReactNode;
   startAdornment?: ReactNode;
   hideErrorMessage?: boolean;
+  /** Allow focusing without selecting, i.e. to let the user keep typing after we've pre-filled text + called focus, like the Add New component. */
+  selectOnFocus?: boolean;
 }
 
 export function TextField<X extends Only<TextFieldXss, X>>(props: TextFieldProps<X>) {

diff --git a/src/inputs/TextFieldBase.tsx b/src/inputs/TextFieldBase.tsx
@@ -61,6 +61,8 @@ export interface TextFieldBaseProps<X>
   // Replaces empty input field and placeholder with node
   // IE: Multiselect renders list of selected items in the input field
   unfocusedPlaceholder?: ReactNode;
+  /** Allow focusing without selecting, i.e. to let the user keep typing after we've pre-filled text + called focus, like the Add New component. */
+  selectOnFocus?: boolean;
 }
 
 // Used by both TextField and TextArea
@@ -97,6 +99,7 @@ export function TextFieldBase<X extends Only<TextFieldXss, X>>(props: TextFieldB
     alwaysShowHelperText = false,
     fullWidth = fieldProps?.fullWidth ?? false,
     unfocusedPlaceholder,
+    selectOnFocus = true,
   } = props;
 
   const typeScale = fieldProps?.typeScale ?? (inputProps.readOnly && labelStyle !== "hidden" ? "smMd" : "sm");
@@ -188,7 +191,7 @@ export function TextFieldBase<X extends Only<TextFieldXss, X>>(props: TextFieldB
   }
 
   const onFocusChained = chain((e: FocusEvent<HTMLInputElement> | FocusEvent<HTMLTextAreaElement>) => {
-    e.target.select();
+    if (selectOnFocus) e.target.select();
   }, onFocus);
 
   // Simulate clicking `ElementType` when using an unfocused placeholder