diff --git a/packages/calcite-components/src/components/input-number/input-number.tsx b/packages/calcite-components/src/components/input-number/input-number.tsx index d49ae5bda5b..0ca19b4e048 100644 --- a/packages/calcite-components/src/components/input-number/input-number.tsx +++ b/packages/calcite-components/src/components/input-number/input-number.tsx @@ -89,7 +89,7 @@ export class InputNumber private actionWrapperEl = createRef(); attributeWatch = useWatchAttributes( - ["enterkeyhint", "inputmode"], + ["autofocus", "enterkeyhint", "inputmode"], this.handleGlobalAttributesChanged, ); diff --git a/packages/calcite-components/src/components/input-text/input-text.tsx b/packages/calcite-components/src/components/input-text/input-text.tsx index ee520f151c2..4f36e86102b 100644 --- a/packages/calcite-components/src/components/input-text/input-text.tsx +++ b/packages/calcite-components/src/components/input-text/input-text.tsx @@ -75,7 +75,7 @@ export class InputText private actionWrapperEl = createRef(); attributeWatch = useWatchAttributes( - ["enterkeyhint", "inputmode", "spellcheck"], + ["autofocus", "enterkeyhint", "inputmode", "spellcheck"], this.handleGlobalAttributesChanged, ); diff --git a/packages/calcite-components/src/components/input/common/tests.ts b/packages/calcite-components/src/components/input/common/tests.ts index 3f16d2dff68..b0c437ebd0b 100644 --- a/packages/calcite-components/src/components/input/common/tests.ts +++ b/packages/calcite-components/src/components/input/common/tests.ts @@ -128,11 +128,17 @@ export function testWorkaroundForGlobalPropRemoval( <${inputTag} autofocus inputmode="${testInputMode}" enterkeyhint="${testEnterKeyHint}"> `); - const input = await page.find(`${inputTag} >>> input`); + const internalInput = await page.find(`${inputTag} >>> input`); + + expect(internalInput.getAttribute("autofocus")).toBe(""); + expect(internalInput.getAttribute("inputmode")).toBe(testInputMode); + expect(internalInput.getAttribute("enterkeyhint")).toBe(testEnterKeyHint); - expect(input.getAttribute("autofocus")).toBe(""); - expect(input.getAttribute("inputmode")).toBe(testInputMode); - expect(input.getAttribute("enterkeyhint")).toBe(testEnterKeyHint); + const input = await page.find(inputTag); + + await input.removeAttribute("autofocus"); + await page.waitForChanges(); + expect(internalInput.getAttribute("autofocus")).toBe(null); }); it("supports global props", async () => { @@ -150,5 +156,9 @@ export function testWorkaroundForGlobalPropRemoval( expect(internalInput.getAttribute("autofocus")).toBe(""); expect(internalInput.getAttribute("inputmode")).toBe(testInputMode); expect(internalInput.getAttribute("enterkeyhint")).toBe(testEnterKeyHint); + + input.setProperty("autofocus", false); + await page.waitForChanges(); + expect(internalInput.getAttribute("autofocus")).toBe(null); }); } diff --git a/packages/calcite-components/src/components/input/input.tsx b/packages/calcite-components/src/components/input/input.tsx index 4eae69a8850..f84fa05c91c 100644 --- a/packages/calcite-components/src/components/input/input.tsx +++ b/packages/calcite-components/src/components/input/input.tsx @@ -91,7 +91,7 @@ export class Input private actionWrapperEl = createRef(); attributeWatch = useWatchAttributes( - ["enterkeyhint", "inputmode", "spellcheck"], + ["autofocus", "enterkeyhint", "inputmode", "spellcheck"], this.handleGlobalAttributesChanged, );