Merge pull request #3486 from bettyblocks/feat/set-focus-to-text-inpu…

…t-component-PFR-899

feat: set focus to text input component PFR-899

src/components/textinput.js

@@ -7,6 +7,7 @@
     const {
       actionVariableId: name,
       autoComplete,
+      autoFocus,
       disabled,
       error,
       label,
@@ -68,6 +69,7 @@
     const parsedLabel = useText(label);
     const labelText = parsedLabel;
     const debouncedOnChangeRef = useRef(null);
+    const inputRef = useRef();
 
     const { current: labelControlRef } = useRef(generateUUID());
 
@@ -209,10 +211,16 @@
       handleValidation(validity);
     };
 
+    const focusHandler = () =>
+      setTimeout(() => {
+        inputRef.current.focus();
+      }, 0);
+
     B.defineFunction('Clear', () => setCurrentValue(''));
     B.defineFunction('Enable', () => setIsDisabled(false));
     B.defineFunction('Disable', () => setIsDisabled(true));
     B.defineFunction('Reset', () => setCurrentValue(useText(value)));
+    B.defineFunction('Focus', () => focusHandler());
 
     const handleClickShowPassword = () => {
       togglePassword(!showPassword);
@@ -286,11 +294,13 @@
         )}
         <InputCmp
           id={labelControlRef}
+          inputRef={inputRef}
           name={name}
           value={currentValue}
           type={showPassword ? 'text' : inputType}
           multiline={multiline}
           autoComplete={autoComplete ? 'on' : 'off'}
+          autoFocus={!isDev && autoFocus}
           rows={rows}
           label={labelText}
           placeholder={placeholderText}

src/prefabs/structures/TextInput/options/validation.ts

@@ -35,6 +35,7 @@ export const validation = {
   }),
 
   autoComplete: toggle('Autocomplete', { value: false }),
+  autoFocus: toggle('Autofocus', { value: false }),
   disabled: toggle('Disabled'),
   placeholder: variable('Placeholder'),
   helperText: variable('Helper text'),