add auto-select to TextField component (#1034)

decentraland · Nov 12, 2024 · 5502b7c · 5502b7c
1 parent a19ffba
commit 5502b7c
Show file tree

Hide file tree

Showing 42 changed files with 98 additions and 45 deletions.
diff --git a/packages/@dcl/inspector/src/components/EntityInspector/ActionInspector/ActionInspector.tsx b/packages/@dcl/inspector/src/components/EntityInspector/ActionInspector/ActionInspector.tsx
@@ -673,6 +673,7 @@ export default withSdk<Props>(({ sdk, entity: entityId }) => {
                 type="number"
                 value={getPartialPayload<ActionType.SET_COUNTER>(action)?.counter}
                 onChange={(e: React.ChangeEvent<HTMLInputElement>) => handleChangeCounter(e, idx)}
+                autoSelect
               />
             </div>
           </div>
@@ -687,6 +688,7 @@ export default withSdk<Props>(({ sdk, entity: entityId }) => {
                 type="number"
                 value={getPartialPayload<ActionType.INCREMENT_COUNTER>(action)?.amount}
                 onChange={(e: React.ChangeEvent<HTMLInputElement>) => handleChangeAmount(e, idx)}
+                autoSelect
               />
             </div>
           </div>
@@ -701,6 +703,7 @@ export default withSdk<Props>(({ sdk, entity: entityId }) => {
                 type="number"
                 value={getPartialPayload<ActionType.DECREASE_COUNTER>(action)?.amount}
                 onChange={(e: React.ChangeEvent<HTMLInputElement>) => handleChangeAmount(e, idx)}
+                autoSelect
               />
             </div>
           </div>
@@ -958,6 +961,7 @@ export default withSdk<Props>(({ sdk, entity: entityId }) => {
                 onChange={(e) => handleChangeName(e, idx)}
                 onFocus={handleFocusInput}
                 onBlur={handleFocusInput}
+                autoSelect
               />
               <Dropdown
                 label="Select an Action"

diff --git a/...or/src/components/EntityInspector/ActionInspector/CloneEntityAction/CloneEntityAction.tsx b/...or/src/components/EntityInspector/ActionInspector/CloneEntityAction/CloneEntityAction.tsx
@@ -91,18 +91,21 @@ const CloneEntityAction: React.FC<Props> = ({ value, onUpdate }: Props) => {
           type="number"
           value={payload.position?.x}
           onChange={(e: React.ChangeEvent<HTMLInputElement>) => handleChangePositionX(e)}
+          autoSelect
         />
         <TextField
           leftLabel="Y"
           type="number"
           value={payload.position?.y}
           onChange={(e: React.ChangeEvent<HTMLInputElement>) => handleChangePositionY(e)}
+          autoSelect
         />
         <TextField
           leftLabel="Z"
           type="number"
           value={payload.position?.z}
           onChange={(e: React.ChangeEvent<HTMLInputElement>) => handleChangePositionZ(e)}
+          autoSelect
         />
       </div>
     </div>

diff --git a/.../src/components/EntityInspector/ActionInspector/FollowPlayerAction/FollowPlayerAction.tsx b/.../src/components/EntityInspector/ActionInspector/FollowPlayerAction/FollowPlayerAction.tsx
@@ -83,12 +83,14 @@ const FollowPlayerAction: React.FC<Props> = ({ value, onUpdate }: Props) => {
           type="text"
           value={payload.speed}
           onChange={(e: React.ChangeEvent<HTMLInputElement>) => handleChangeSpeed(e)}
+          autoSelect
         />
         <TextField
           label="Min. Distance"
           type="text"
           value={payload.minDistance}
           onChange={(e: React.ChangeEvent<HTMLInputElement>) => handleChangeMinDistance(e)}
+          autoSelect
         />
       </Block>
       <Block label="Axes">

diff --git a/...ctor/src/components/EntityInspector/ActionInspector/MovePlayerAction/MovePlayerAction.tsx b/...ctor/src/components/EntityInspector/ActionInspector/MovePlayerAction/MovePlayerAction.tsx
@@ -91,18 +91,21 @@ const MovePlayerAction: React.FC<Props> = ({ value, onUpdate }: Props) => {
           type="number"
           value={payload.position?.x}
           onChange={(e: React.ChangeEvent<HTMLInputElement>) => handleChangePositionX(e)}
+          autoSelect
         />
         <TextField
           label="Y"
           type="number"
           value={payload.position?.y}
           onChange={(e: React.ChangeEvent<HTMLInputElement>) => handleChangePositionY(e)}
+          autoSelect
         />
         <TextField
           label="Z"
           type="number"
           value={payload.position?.z}
           onChange={(e: React.ChangeEvent<HTMLInputElement>) => handleChangePositionZ(e)}
+          autoSelect
         />
       </div>
     </div>

diff --git a/...nspector/src/components/EntityInspector/ActionInspector/OpenLinkAction/OpenLinkAction.tsx b/...nspector/src/components/EntityInspector/ActionInspector/OpenLinkAction/OpenLinkAction.tsx
@@ -39,6 +39,7 @@ const OpenLinkAction: React.FC<Props> = ({ value, onUpdate }: Props) => {
           label="URL"
           value={payload.url}
           onChange={(e: React.ChangeEvent<HTMLInputElement>) => handleChangeEmote(e)}
+          autoSelect
         />
       </div>
     </div>

diff --git a/...omponents/EntityInspector/ActionInspector/PlayAudioStreamAction/PlayAudioStreamAction.tsx b/...omponents/EntityInspector/ActionInspector/PlayAudioStreamAction/PlayAudioStreamAction.tsx
@@ -41,7 +41,7 @@ const PlayAudioStreamAction: React.FC<Props> = ({ value, onUpdate }: Props) => {
   return (
     <div className="PlayAudioStreamActionContainer">
       <Block>
-        <TextField label="URL" value={payload.url} onChange={handleChangeUrl} />
+        <TextField label="URL" value={payload.url} onChange={handleChangeUrl} autoSelect />
       </Block>
       <Block>
         <RangeField

diff --git a/...omponents/EntityInspector/ActionInspector/PlayVideoStreamAction/PlayVideoStreamAction.tsx b/...omponents/EntityInspector/ActionInspector/PlayVideoStreamAction/PlayVideoStreamAction.tsx
@@ -120,7 +120,7 @@ const PlayVideoStreamAction: React.FC<Props> = ({ value, onUpdate }: Props) => {
       {!payload.dclCast ? (
         <>
           <Block>
-            <TextField label={<>URL {renderUrlInfo()}</>} value={payload.src} onChange={handleChangeSrc} />
+            <TextField label={<>URL {renderUrlInfo()}</>} value={payload.src} onChange={handleChangeSrc} autoSelect />
           </Block>
           <Block>
             <Dropdown

diff --git a/...or/src/components/EntityInspector/ActionInspector/SetPositionAction/SetPositionAction.tsx b/...or/src/components/EntityInspector/ActionInspector/SetPositionAction/SetPositionAction.tsx
@@ -73,18 +73,21 @@ const SetPositionAction: React.FC<Props> = ({ value, onUpdate }: Props) => {
             type="number"
             value={payload.x}
             onChange={(e: React.ChangeEvent<HTMLInputElement>) => handleChangeX(e)}
+            autoSelect
           />
           <TextField
             leftLabel="Y"
             type="number"
             value={payload.y}
             onChange={(e: React.ChangeEvent<HTMLInputElement>) => handleChangeY(e)}
+            autoSelect
           />
           <TextField
             leftLabel="Z"
             type="number"
             value={payload.z}
             onChange={(e: React.ChangeEvent<HTMLInputElement>) => handleChangeZ(e)}
+            autoSelect
           />
         </Block>
       </div>

diff --git a/...or/src/components/EntityInspector/ActionInspector/SetRotationAction/SetRotationAction.tsx b/...or/src/components/EntityInspector/ActionInspector/SetRotationAction/SetRotationAction.tsx
@@ -73,18 +73,21 @@ const SetRotationAction: React.FC<Props> = ({ value, onUpdate }: Props) => {
             type="number"
             value={payload.x}
             onChange={(e: React.ChangeEvent<HTMLInputElement>) => handleChangeX(e)}
+            autoSelect
           />
           <TextField
             leftLabel="Y"
             type="number"
             value={payload.y}
             onChange={(e: React.ChangeEvent<HTMLInputElement>) => handleChangeY(e)}
+            autoSelect
           />
           <TextField
             leftLabel="Z"
             type="number"
             value={payload.z}
             onChange={(e: React.ChangeEvent<HTMLInputElement>) => handleChangeZ(e)}
+            autoSelect
           />
         </Block>
       </div>

diff --git a/...nspector/src/components/EntityInspector/ActionInspector/SetScaleAction/SetScaleAction.tsx b/...nspector/src/components/EntityInspector/ActionInspector/SetScaleAction/SetScaleAction.tsx
@@ -73,18 +73,21 @@ const SetScaleAction: React.FC<Props> = ({ value, onUpdate }: Props) => {
             type="number"
             value={payload.x}
             onChange={(e: React.ChangeEvent<HTMLInputElement>) => handleChangeX(e)}
+            autoSelect
           />
           <TextField
             leftLabel="Y"
             type="number"
             value={payload.y}
             onChange={(e: React.ChangeEvent<HTMLInputElement>) => handleChangeY(e)}
+            autoSelect
           />
           <TextField
             leftLabel="Z"
             type="number"
             value={payload.z}
             onChange={(e: React.ChangeEvent<HTMLInputElement>) => handleChangeZ(e)}
+            autoSelect
           />
         </Block>
       </div>

diff --git a/...pector/src/components/EntityInspector/ActionInspector/ShowImageAction/ShowImageAction.tsx b/...pector/src/components/EntityInspector/ActionInspector/ShowImageAction/ShowImageAction.tsx
@@ -101,8 +101,8 @@ const ShowImageAction: React.FC<Props> = ({ value, onUpdate }: Props) => {
         />
       </Block>
       <Block label="Size">
-        <TextField leftLabel="Height" type="number" value={payload.height} onChange={handleChangeHeight} />
-        <TextField leftLabel="Width" type="number" value={payload.width} onChange={handleChangeWidth} />
+        <TextField autoSelect leftLabel="Height" type="number" value={payload.height} onChange={handleChangeHeight} />
+        <TextField autoSelect leftLabel="Width" type="number" value={payload.width} onChange={handleChangeWidth} />
       </Block>
       <Block label="Align Image">
         <Dropdown
@@ -132,7 +132,7 @@ const ShowImageAction: React.FC<Props> = ({ value, onUpdate }: Props) => {
         <TextArea label="Text" value={payload.text} onChange={handleChangeText} />
       </Block>
       <Block label="Font Size">
-        <TextField type="number" value={payload.fontSize} onChange={handleChangeFontSize} />
+        <TextField autoSelect type="number" value={payload.fontSize} onChange={handleChangeFontSize} />
       </Block>
     </div>
   )

diff --git a/...nspector/src/components/EntityInspector/ActionInspector/ShowTextAction/ShowTextAction.tsx b/...nspector/src/components/EntityInspector/ActionInspector/ShowTextAction/ShowTextAction.tsx
@@ -64,7 +64,7 @@ const ShowTextAction: React.FC<Props> = ({ value, onUpdate }: Props) => {
   return (
     <div className="ShowTextActionContainer">
       <Block>
-        <TextField label="Text" type="text" value={payload.text} onChange={handleChangeText} />
+        <TextField autoSelect label="Text" type="text" value={payload.text} onChange={handleChangeText} />
       </Block>
       <Block>
         <RangeField
@@ -78,7 +78,7 @@ const ShowTextAction: React.FC<Props> = ({ value, onUpdate }: Props) => {
         <Dropdown placeholder="Select a Font" options={FONTS} value={payload.font} onChange={handleChangeFont} />
       </Block>
       <Block label="Font Size">
-        <TextField type="number" value={payload.fontSize} onChange={handleChangeFontSize} />
+        <TextField autoSelect type="number" value={payload.fontSize} onChange={handleChangeFontSize} />
       </Block>
       <Block label="Text Align">
         <Dropdown

diff --git a/.../components/EntityInspector/ActionInspector/TeleportPlayerAction/TeleportPlayerAction.tsx b/.../components/EntityInspector/ActionInspector/TeleportPlayerAction/TeleportPlayerAction.tsx
@@ -45,12 +45,14 @@ const TeleportPlayerAction: React.FC<Props> = ({ value, onUpdate }: Props) => {
           type="number"
           value={payload.x}
           onChange={(e: React.ChangeEvent<HTMLInputElement>) => handleChangeX(e)}
+          autoSelect
         />
         <TextField
           leftLabel="Y"
           type="number"
           value={payload.y}
           onChange={(e: React.ChangeEvent<HTMLInputElement>) => handleChangeY(e)}
+          autoSelect
         />
       </Block>
     </div>

diff --git a/...ponents/EntityInspector/ActionInspector/TriggerProximityAction/TriggerProximityAction.tsx b/...ponents/EntityInspector/ActionInspector/TriggerProximityAction/TriggerProximityAction.tsx
@@ -49,12 +49,14 @@ const TriggerProximityAction: React.FC<Props> = ({ value, onUpdate }: Props) =>
           type="number"
           value={payload.radius}
           onChange={(e: React.ChangeEvent<HTMLInputElement>) => handleChangeRadius(e)}
+          autoSelect
         />
         <TextField
           label="Hits"
           type="number"
           value={payload.hits || 1}
           onChange={(e: React.ChangeEvent<HTMLInputElement>) => handleChangeHits(e)}
+          autoSelect
         />
         <Dropdown
           label="Layer"

diff --git a/...@dcl/inspector/src/components/EntityInspector/ActionInspector/TweenAction/TweenAction.tsx b/...@dcl/inspector/src/components/EntityInspector/ActionInspector/TweenAction/TweenAction.tsx
@@ -156,6 +156,7 @@ const TweenAction: React.FC<Props> = ({ tween: tweenProp, onUpdateTween }: Props
           error={isNaN(parseFloat(endPosition.x))}
           onChange={(e) => handleChangeEndPosition(e, 'x')}
           onBlur={(e) => handleBlurEndPosition(e, 'x')}
+          autoSelect
         />
         <TextField
           leftLabel="Y"
@@ -164,6 +165,7 @@ const TweenAction: React.FC<Props> = ({ tween: tweenProp, onUpdateTween }: Props
           error={isNaN(parseFloat(endPosition.y))}
           onChange={(e) => handleChangeEndPosition(e, 'y')}
           onBlur={(e) => handleBlurEndPosition(e, 'y')}
+          autoSelect
         />
         <TextField
           leftLabel="Z"
@@ -172,6 +174,7 @@ const TweenAction: React.FC<Props> = ({ tween: tweenProp, onUpdateTween }: Props
           error={isNaN(parseFloat(endPosition.z))}
           onChange={(e) => handleChangeEndPosition(e, 'z')}
           onBlur={(e) => handleBlurEndPosition(e, 'z')}
+          autoSelect
         />
       </Block>
       <div className="row">

diff --git a/...ges/@dcl/inspector/src/components/EntityInspector/AnimatorInspector/AnimatorInspector.tsx b/...ges/@dcl/inspector/src/components/EntityInspector/AnimatorInspector/AnimatorInspector.tsx
@@ -84,7 +84,7 @@ export default withSdk<Props>(({ sdk, entity: entityId }) => {
       {states.map(($, idx) => (
         <React.Fragment key={idx}>
           <Block label="Clip">
-            <TextField type="text" disabled value={$.clip} />
+            <TextField autoSelect type="text" disabled value={$.clip} />
           </Block>
           <Block label="Playing">
             <CheckboxField

diff --git a/...cl/inspector/src/components/EntityInspector/AudioStreamInspector/AudioStreamInspector.tsx b/...cl/inspector/src/components/EntityInspector/AudioStreamInspector/AudioStreamInspector.tsx
@@ -59,7 +59,7 @@ export default withSdk<Props>(({ sdk, entity }) => {
       onRemoveContainer={handleRemove}
     >
       <Block label="Url">
-        <TextField type="text" {...url} error={!isValid} />
+        <TextField autoSelect type="text" {...url} error={!isValid} />
       </Block>
       <Block label="Playback">
         <CheckboxField label="Start playing" checked={!!playing.value} {...playing} />

diff --git a/...@dcl/inspector/src/components/EntityInspector/CounterBarInspector/CounterBarInspector.tsx b/...@dcl/inspector/src/components/EntityInspector/CounterBarInspector/CounterBarInspector.tsx
@@ -41,7 +41,7 @@ export default withSdk<Props>(({ sdk, entity }) => {
       }
       onRemoveContainer={handleRemove}
     >
-      <TextField label="Max Value" type="number" {...getInputProps('maxValue')} />
+      <TextField autoSelect label="Max Value" type="number" {...getInputProps('maxValue')} />
       <Block>
         <ColorField label="Primary Color" {...getInputProps('primaryColor')} />
       </Block>

diff --git a/packages/@dcl/inspector/src/components/EntityInspector/CounterInspector/CounterInspector.tsx b/packages/@dcl/inspector/src/components/EntityInspector/CounterInspector/CounterInspector.tsx
@@ -50,7 +50,7 @@ export default withSdk<Props>(({ sdk, entity }) => {
       }
       onRemoveContainer={handleRemove}
     >
-      <TextField leftLabel="Value" type="number" {...getInputProps('value')} />
+      <TextField autoSelect leftLabel="Value" type="number" {...getInputProps('value')} />
     </Container>
   )
 })
diff --git a/.../inspector/src/components/EntityInspector/MeshColliderInspector/MeshColliderInspector.tsx b/.../inspector/src/components/EntityInspector/MeshColliderInspector/MeshColliderInspector.tsx
@@ -35,8 +35,8 @@ export default withSdk<Props>(({ sdk, entity }) => {
       </Block>
       {mesh.value === MeshType.MT_CYLINDER && (
         <Block label="Radius">
-          <TextField leftLabel="Top" type="number" {...getInputProps('radiusTop')} />
-          <TextField leftLabel="Bottom" type="number" {...getInputProps('radiusBottom')} />
+          <TextField autoSelect leftLabel="Top" type="number" {...getInputProps('radiusTop')} />
+          <TextField autoSelect leftLabel="Bottom" type="number" {...getInputProps('radiusBottom')} />
         </Block>
       )}
     </Container>

diff --git a/.../inspector/src/components/EntityInspector/MeshRendererInspector/MeshRendererInspector.tsx b/.../inspector/src/components/EntityInspector/MeshRendererInspector/MeshRendererInspector.tsx
@@ -28,8 +28,8 @@ export default withSdk<Props>(({ sdk, entity }) => {
       case MeshType.MT_CYLINDER: {
         return (
           <Block label="Radius">
-            <TextField leftLabel="Top" type="number" {...getInputProps('radiusTop')} />
-            <TextField leftLabel="Bottom" type="number" {...getInputProps('radiusBottom')} />
+            <TextField autoSelect leftLabel="Top" type="number" {...getInputProps('radiusTop')} />
+            <TextField autoSelect leftLabel="Bottom" type="number" {...getInputProps('radiusBottom')} />
           </Block>
         )
       }

diff --git a/...ges/@dcl/inspector/src/components/EntityInspector/NftShapeInspector/NftShapeInspector.tsx b/...ges/@dcl/inspector/src/components/EntityInspector/NftShapeInspector/NftShapeInspector.tsx
@@ -92,12 +92,14 @@ export default withSdk<Props>(({ sdk, entity }) => {
           label="Contract"
           value={urnTokens.contract || ''}
           onChange={(e) => handleUrnTokenChange({ contract: e.target.value })}
+          autoSelect
         />
         <TextField
           type="text"
           label="Token"
           value={urnTokens.token || ''}
           onChange={(e) => handleUrnTokenChange({ token: e.target.value })}
+          autoSelect
         />
       </Block>
       <Block label="Color">

diff --git a/...nspector/src/components/EntityInspector/PointerEventsInspector/PointerEventsInspector.tsx b/...nspector/src/components/EntityInspector/PointerEventsInspector/PointerEventsInspector.tsx
@@ -101,6 +101,7 @@ export default withSdk<Props>(({ sdk, entity: entityId }) => {
               type="text"
               value={$.eventInfo?.hoverText ?? DEFAULTS.eventInfo.hoverText}
               onChange={(e) => handleEventInfoChange({ hoverText: e.target.value }, idx)}
+              autoSelect
             />
           </Block>
           <Block label="Max distance">

diff --git a/...pector/src/components/EntityInspector/SceneInspector/Layout/ModeAdvanced/ModeAdvanced.tsx b/...pector/src/components/EntityInspector/SceneInspector/Layout/ModeAdvanced/ModeAdvanced.tsx
@@ -37,8 +37,8 @@ export function ModeAdvanced({ value, onSubmit, onGoBack }: Props) {
 
   return (
     <Block className="advanced">
-      <TextField label="Custom Coordinates" value={coords} onChange={handleCoordsChange} />
-      <TextField label="Origin Point" value={base} onChange={handleBaseParcelChange} />
+      <TextField autoSelect label="Custom Coordinates" value={coords} onChange={handleCoordsChange} />
+      <TextField autoSelect label="Origin Point" value={base} onChange={handleBaseParcelChange} />
       <Block>
         <Button type="dark" onClick={onGoBack}>
           Back