Use HTML autofocus attr w/ React’s autoFocus prop

trying to set the “autofocus” attribute (instead of “autoFocus”) creates a console warning and doesn’t actually work consistently
acusti · Feb 12, 2024 · a10dfb3 · a10dfb3
1 parent 46e9d52
commit a10dfb3
Showing 1 changed file with 4 additions and 2 deletions.
diff --git a/packages/input-text/src/InputText.tsx b/packages/input-text/src/InputText.tsx
@@ -111,6 +111,9 @@ export default React.forwardRef<HTMLInputElement, Props>(function InputText(
     const setInputElement = useCallback((element: InputRef) => {
         inputRef.current = element;
         _setInputElement(element);
+        if (element && autoFocus) {
+            element.setAttribute('autofocus', 'autofocus');
+        }
     }, []);
 
     // If props.initialValue changes, override input value from it
@@ -226,8 +229,7 @@ export default React.forwardRef<HTMLInputElement, Props>(function InputText(
         <Element
             autoCapitalize={autoCapitalize}
             autoComplete={autoComplete}
-            // @ts-expect-error using HTML’s autofocus attribute
-            autofocus={autoFocus}
+            autoFocus={autoFocus} // eslint-disable-line jsx-a11y/no-autofocus
             className={className}
             defaultValue={initialValue ?? ''}
             disabled={disabled}