fix(input, input-text, input-number): restore handling of autofocus g…

…lobal attribute (#11118)
Esri · Dec 21, 2024 · af32894 · af32894
1 parent 350dd90
commit af32894
Show file tree

Hide file tree

Showing 4 changed files with 17 additions and 7 deletions.
diff --git 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<HTMLDivElement>();
 
   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
@@ -75,7 +75,7 @@ export class InputText
   private actionWrapperEl = createRef<HTMLDivElement>();
 
   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
@@ -128,11 +128,17 @@ export function testWorkaroundForGlobalPropRemoval(
         <${inputTag} autofocus inputmode="${testInputMode}" enterkeyhint="${testEnterKeyHint}"></${inputTag}>
     `);
 
-    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
@@ -91,7 +91,7 @@ export class Input
   private actionWrapperEl = createRef<HTMLDivElement>();
 
   attributeWatch = useWatchAttributes(
-    ["enterkeyhint", "inputmode", "spellcheck"],
+    ["autofocus", "enterkeyhint", "inputmode", "spellcheck"],
     this.handleGlobalAttributesChanged,
   );