From c56ef82d5341cd4192f00bd18fcf9a451252bb21 Mon Sep 17 00:00:00 2001
From: Rob Dekker <rob-ajax@live.nl>
Date: Sun, 25 Aug 2024 20:38:31 +0200
Subject: [PATCH 1/3] feat: add option and interaction to set auto focus on
 input

---
 src/components/textinput.js                            | 10 ++++++++++
 src/prefabs/structures/TextInput/options/validation.ts |  1 +
 2 files changed, 11 insertions(+)

diff --git a/src/components/textinput.js b/src/components/textinput.js
index 73cf20e0e..32c3c9364 100644
--- a/src/components/textinput.js
+++ b/src/components/textinput.js
@@ -7,6 +7,7 @@
     const {
       actionVariableId: name,
       autoComplete,
+      autoFocus,
       disabled,
       error,
       label,
@@ -67,6 +68,7 @@
     const parsedLabel = useText(label);
     const labelText = parsedLabel;
     const debouncedOnChangeRef = useRef(null);
+    const inputRef = useRef();
 
     const { current: labelControlRef } = useRef(generateUUID());
 
@@ -204,10 +206,16 @@
       handleValidation(validity);
     };
 
+    const focusHandler = () =>
+      setTimeout(() => {
+        inputRef.current.focus();
+      }, 50);
+
     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);
@@ -281,11 +289,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}
diff --git a/src/prefabs/structures/TextInput/options/validation.ts b/src/prefabs/structures/TextInput/options/validation.ts
index 78955273c..568f0da97 100644
--- a/src/prefabs/structures/TextInput/options/validation.ts
+++ b/src/prefabs/structures/TextInput/options/validation.ts
@@ -35,6 +35,7 @@ export const validation = {
   }),
 
   autoComplete: toggle('Autocomplete', { value: false }),
+  autoFocus: toggle('Auto focus on input', { value: false }),
   disabled: toggle('Disabled'),
   placeholder: variable('Placeholder'),
   helperText: variable('Helper text'),

From 7a2c94195e748f43830981c58b52ce540cb73ae7 Mon Sep 17 00:00:00 2001
From: Rob Dekker <rob-ajax@live.nl>
Date: Mon, 23 Sep 2024 17:58:14 +0200
Subject: [PATCH 2/3] chore: use a late timeout within focus handler

---
 src/components/textinput.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/textinput.js b/src/components/textinput.js
index 32c3c9364..ff56bdb70 100644
--- a/src/components/textinput.js
+++ b/src/components/textinput.js
@@ -209,7 +209,7 @@
     const focusHandler = () =>
       setTimeout(() => {
         inputRef.current.focus();
-      }, 50);
+      }, 0);
 
     B.defineFunction('Clear', () => setCurrentValue(''));
     B.defineFunction('Enable', () => setIsDisabled(false));

From 0bfa6b4976c07991d6071202a8d201e8e77a4bcb Mon Sep 17 00:00:00 2001
From: Rob Dekker <rob-ajax@live.nl>
Date: Tue, 24 Sep 2024 14:51:06 +0200
Subject: [PATCH 3/3] chore: rename option label to autofocus

---
 src/prefabs/structures/TextInput/options/validation.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/prefabs/structures/TextInput/options/validation.ts b/src/prefabs/structures/TextInput/options/validation.ts
index 568f0da97..1290cb992 100644
--- a/src/prefabs/structures/TextInput/options/validation.ts
+++ b/src/prefabs/structures/TextInput/options/validation.ts
@@ -35,7 +35,7 @@ export const validation = {
   }),
 
   autoComplete: toggle('Autocomplete', { value: false }),
-  autoFocus: toggle('Auto focus on input', { value: false }),
+  autoFocus: toggle('Autofocus', { value: false }),
   disabled: toggle('Disabled'),
   placeholder: variable('Placeholder'),
   helperText: variable('Helper text'),