1960 ic text field autofocus prop not working unless text field label is hidden

packages/docs/docs.json

@@ -15696,28 +15696,6 @@
       ],
       "usage": {},
       "props": [
-        {
-          "name": "autoFocus",
-          "type": "boolean",
-          "complexType": {
-            "original": "boolean",
-            "resolved": "boolean",
-            "references": {}
-          },
-          "mutable": false,
-          "attr": "auto-focus",
-          "reflectToAttr": false,
-          "docs": "If `true`, the form control will have input focus when the page loads.",
-          "docsTags": [],
-          "default": "false",
-          "values": [
-            {
-              "type": "boolean"
-            }
-          ],
-          "optional": false,
-          "required": false
-        },
         {
           "name": "autocapitalize",
           "type": "string",
@@ -16014,6 +15992,28 @@
           "optional": false,
           "required": false
         },
+        {
+          "name": "autofocus",
+          "type": "boolean",
+          "complexType": {
+            "original": "boolean",
+            "resolved": "boolean",
+            "references": {}
+          },
+          "mutable": false,
+          "attr": "autofocus",
+          "reflectToAttr": false,
+          "docs": "If `true`, the form control will have input focus when the page loads.",
+          "docsTags": [],
+          "default": "false",
+          "values": [
+            {
+              "type": "boolean"
+            }
+          ],
+          "optional": false,
+          "required": false
+        },
         {
           "name": "debounce",
           "type": "number",

packages/react/src/component-tests/IcTextField/IcTextField.cy.tsx

@@ -21,6 +21,7 @@ import {
 } from "../utils/constants";
 import {
   CustomSizeTextField,
+  AutofocusTextField,
   DisabledTextField,
   FullWidthTextField,
   HiddenLabelTextField,
@@ -333,6 +334,14 @@ describe("IcTextField end-to-end tests", () => {
 
     input.should(HAVE_ATTR, "title", "new-input-title");
   });
+
+  it("should autofocus when autofocus attribute is set", () => {
+    mount(<AutofocusTextField />);
+
+    const input = cy.findShadowEl(IC_TEXTFIELD, TEXTFIELD_INPUT);
+
+    input.should(HAVE_FOCUS);
+  });
 });
 
 describe("IcTextField visual regression tests", () => {

packages/react/src/component-tests/IcTextField/IcTextFieldTestData.tsx

@@ -113,6 +113,20 @@ export const HiddenLabelTextField = (): ReactElement => (
   </div>
 );
 
+export const AutofocusTextField = (): ReactElement => (
+  <div style={style}>
+    <IcTextField
+      maxCharacters={25}
+      label="What is your favourite coffee?"
+      placeholder="Please enter…"
+      helperText="Such as Arabica, Robusta or Liberica"
+      autofocus
+    >
+      <ReusableSlottedIcon />
+    </IcTextField>
+  </div>
+);
+
 export const TextFieldWithMinMaxCharacters = (): ReactElement => (
   <>
     <div style={style}>

packages/react/src/stories/ic-text-field.stories.mdx

@@ -53,6 +53,14 @@ export const ControlledExample = () => {
   </Story>
 </Canvas>
 
+### Autofocus
+
+<Canvas>
+  <Story name="Autofocus">
+    <IcTextField label="What is your favourite coffee?" autofocus/>
+  </Story>
+</Canvas>
+
 ### Placeholder and required
 
 <Canvas>

packages/web-components/src/components.d.ts

@@ -1050,7 +1050,7 @@ export namespace Components {
           * The reference to an anchor element the menu will position itself from when rendered.
          */
         "anchorEl": HTMLElement;
-        "autoFocusOnSelected": boolean;
+        "autofocusOnSelected": boolean;
         /**
           * If `true`, the menu will close when an option is selected.
          */
@@ -2031,10 +2031,6 @@ export namespace Components {
         "ariaAutocomplete": IcAriaAutocompleteTypes;
         "ariaExpanded": string;
         "ariaOwns": string;
-        /**
-          * If `true`, the form control will have input focus when the page loads.
-         */
-        "autoFocus": boolean;
         /**
           * The automatic capitalisation of the text value as it is entered/edited by the user. Available options: "off", "none", "on", "sentences", "words", "characters".
          */
@@ -2047,6 +2043,10 @@ export namespace Components {
           * The state of autocorrection the browser can apply when the user is entering/editing the text value.
          */
         "autocorrect": IcAutocorrectStates;
+        /**
+          * If `true`, the form control will have input focus when the page loads.
+         */
+        "autofocus": boolean;
         /**
           * The amount of time, in milliseconds, to wait to trigger the `icChange` event after each keystroke.
          */
@@ -4390,7 +4390,7 @@ declare namespace LocalJSX {
           * The reference to an anchor element the menu will position itself from when rendered.
          */
         "anchorEl": HTMLElement;
-        "autoFocusOnSelected"?: boolean;
+        "autofocusOnSelected"?: boolean;
         /**
           * If `true`, the menu will close when an option is selected.
          */
@@ -5464,10 +5464,6 @@ declare namespace LocalJSX {
         "ariaAutocomplete"?: IcAriaAutocompleteTypes;
         "ariaExpanded"?: string;
         "ariaOwns"?: string;
-        /**
-          * If `true`, the form control will have input focus when the page loads.
-         */
-        "autoFocus"?: boolean;
         /**
           * The automatic capitalisation of the text value as it is entered/edited by the user. Available options: "off", "none", "on", "sentences", "words", "characters".
          */
@@ -5480,6 +5476,10 @@ declare namespace LocalJSX {
           * The state of autocorrection the browser can apply when the user is entering/editing the text value.
          */
         "autocorrect"?: IcAutocorrectStates;
+        /**
+          * If `true`, the form control will have input focus when the page loads.
+         */
+        "autofocus"?: boolean;
         /**
           * The amount of time, in milliseconds, to wait to trigger the `icChange` event after each keystroke.
          */

packages/web-components/src/components/ic-menu/ic-menu.tsx

@@ -81,7 +81,7 @@ export class Menu {
   /**
    * @internal If `true`, autofocus will be applied on selected item when menu is open.
    */
-  @Prop() autoFocusOnSelected: boolean = true;
+  @Prop() autofocusOnSelected: boolean = true;
 
   /**
    *  If `true`, the menu will close when an option is selected.
@@ -267,7 +267,7 @@ export class Menu {
         this.value &&
         this.keyboardNav &&
         inputValueInOptions &&
-        this.autoFocusOnSelected &&
+        this.autofocusOnSelected &&
         !this.isSearchableSelect
       ) {
         this.scrollToSelected(this.menu);

packages/web-components/src/components/ic-search-bar/ic-search-bar.tsx

@@ -861,7 +861,7 @@ export class SearchBar {
           role={options.length > 0 ? "combobox" : undefined}
           autocomplete={autocomplete}
           autocapitalize={autocapitalize}
-          autoFocus={autofocus}
+          autofocus={autofocus}
           spellcheck={spellcheck}
           inputmode="search"
           debounce={this.debounce}
@@ -944,7 +944,7 @@ export class SearchBar {
                 }}
                 activationType="manual"
                 anchorEl={this.anchorEl}
-                autoFocusOnSelected={false}
+                autofocusOnSelected={false}
                 searchMode={this.searchMode}
                 inputEl={this.inputEl}
                 inputLabel={label}

packages/web-components/src/components/ic-search-bar/test/basic/ic-search-bar.spec.ts

@@ -233,7 +233,7 @@ describe("ic-search-bar search", () => {
     page.win.addEventListener("menuOptionId", eventSpy);
 
     const menu = page.root.shadowRoot.querySelector("ic-menu");
-    menu.autoFocusOnSelected = true;
+    menu.autofocusOnSelected = true;
     await page.waitForChanges();
 
     await page.rootInstance.handleKeyDown({

packages/web-components/src/components/ic-text-field/ic-text-field.stories.mdx

@@ -20,7 +20,18 @@ import readme from "./readme.md";
       html`<ic-text-field label="What is your favourite coffee?">
         </ic-text-field>
         <ic-text-field rows="6" label="What is your favourite coffee?">
-        </ic-text-field> `
+        </ic-text-field>`
+    }
+  </Story>
+</Canvas>
+
+### Autofocus
+
+<Canvas>
+  <Story name="Autofocus" parameters={{ loki: { skip: true } }}>
+    {(args) =>
+      html`<ic-text-field autofocus label="What is your favourite coffee?">
+      </ic-text-field>`
     }
   </Story>
 </Canvas>

packages/web-components/src/components/ic-text-field/ic-text-field.tsx

@@ -56,6 +56,7 @@ export class TextField {
   private inheritedAttributes: { [k: string]: string } = {};
   private inputEl: HTMLInputElement | HTMLTextAreaElement;
   private hostMutationObserver: MutationObserver = null;
+  private interval: ReturnType<typeof setInterval>;
 
   @Element() el: HTMLIcTextFieldElement;
 
@@ -111,7 +112,7 @@ export class TextField {
   /**
    * If `true`, the form control will have input focus when the page loads.
    */
-  @Prop() autoFocus = false;
+  @Prop() autofocus = false;
 
   /**
    * If `true`, the disabled state will be set.
@@ -374,8 +375,20 @@ export class TextField {
       attributes: true,
       childList: true,
     });
+
+    if (this.autofocus && !this.disabled && !this.readonly) {
+      this.interval = setInterval(this.checkChildHydration, 50);
+    }
   }
 
+  private checkChildHydration = () => {
+    const el = this.el.shadowRoot?.querySelector("ic-typography");
+    if (el && el.classList.contains("hydrated")) {
+      this.setFocus();
+      clearInterval(this.interval);
+    }
+  };
+
   @Listen("keydown", {})
   handleKeyDown(ev: KeyboardEvent): void {
     this.icKeydown.emit({ event: ev });
@@ -387,7 +400,7 @@ export class TextField {
    */
 
   @Method()
-  async setFocus(): Promise<void> {
+  setFocus() {
     this.inputEl?.focus();
   }
 
@@ -622,7 +635,6 @@ export class TextField {
                 aria-owns={this.ariaOwns}
                 autocomplete={this.autocomplete}
                 autocapitalize={this.autocapitalize}
-                autoFocus={this.autoFocus}
                 spellcheck={spellcheck}
                 inputmode={inputmode}
                 role={this.role}
@@ -653,7 +665,6 @@ export class TextField {
                 aria-describedby={describedBy}
                 aria-invalid={invalid}
                 autocapitalize={this.autocapitalize}
-                autoFocus={this.autoFocus}
                 spellcheck={spellcheck}
                 inputmode={inputmode}
                 maxlength={maxCharactersReached ? maxCharacters : null}