From 6cc40094a6a7d91971cb01bafae650b38791ac82 Mon Sep 17 00:00:00 2001
From: Jonnathan Charpentier
 <92122357+JonnCharpentier@users.noreply.github.com>
Date: Mon, 23 Sep 2024 11:38:17 -0600
Subject: [PATCH] feat: Add select on focus  to text field  (#1072)

Co-authored-by: JonnCh <jonnch93@gmail.com>
---
 src/components/SuperDrawer/components/SuperDrawerHeader.tsx | 4 ++--
 src/inputs/TextField.tsx                                    | 2 ++
 src/inputs/TextFieldBase.tsx                                | 5 ++++-
 3 files changed, 8 insertions(+), 3 deletions(-)

diff --git a/src/components/SuperDrawer/components/SuperDrawerHeader.tsx b/src/components/SuperDrawer/components/SuperDrawerHeader.tsx
index de38c7b69..ee03fea3e 100644
--- 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
index 159981feb..a6e51a046 100644
--- 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
index 9b66b79d5..98092e68f 100644
--- 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