Skip to content

Commit

Permalink
fix(input, input-text, input-number): restore handling of autofocus g…
Browse files Browse the repository at this point in the history
…lobal attribute
  • Loading branch information
jcfranco committed Dec 20, 2024
1 parent baad7d3 commit 9398bbb
Show file tree
Hide file tree
Showing 4 changed files with 35 additions and 7 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -89,7 +89,7 @@ export class InputNumber
private actionWrapperEl = createRef<HTMLDivElement>();

attributeWatch = useWatchAttributes(
["enterkeyhint", "inputmode"],
["autofocus", "enterkeyhint", "inputmode"],
this.handleGlobalAttributesChanged,
);

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -75,7 +75,7 @@ export class InputText
private actionWrapperEl = createRef<HTMLDivElement>();

attributeWatch = useWatchAttributes(
["enterkeyhint", "inputmode", "spellcheck"],
["autofocus", "enterkeyhint", "inputmode", "spellcheck"],
this.handleGlobalAttributesChanged,
);

Expand Down
36 changes: 32 additions & 4 deletions packages/calcite-components/src/components/input/common/tests.ts
Original file line number Diff line number Diff line change
Expand Up @@ -128,11 +128,26 @@ 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);

const input = await page.find(inputTag);

// we intentionally teast each one to avoid renders caused by unrelated props affecting result
await input.removeAttribute("autofocus");
await page.waitForChanges();
expect(internalInput.getAttribute("autofocus")).toBe(null);

expect(input.getAttribute("autofocus")).toBe("");
expect(input.getAttribute("inputmode")).toBe(testInputMode);
expect(input.getAttribute("enterkeyhint")).toBe(testEnterKeyHint);
await input.removeAttribute("inputmode");
await page.waitForChanges();
expect(internalInput.getAttribute("inputmode")).toBe("");

await input.removeAttribute("enterkeyhint");
await page.waitForChanges();
expect(internalInput.getAttribute("enterkeyhint")).toBe("");
});

it("supports global props", async () => {
Expand All @@ -150,5 +165,18 @@ export function testWorkaroundForGlobalPropRemoval(
expect(internalInput.getAttribute("autofocus")).toBe("");
expect(internalInput.getAttribute("inputmode")).toBe(testInputMode);
expect(internalInput.getAttribute("enterkeyhint")).toBe(testEnterKeyHint);

// we intentionally teast each one to avoid renders caused by unrelated props affecting result
input.setProperty("autofocus", false);
await page.waitForChanges();
expect(internalInput.getAttribute("autofocus")).toBe(null);

input.setProperty("inputMode", null);
await page.waitForChanges();
expect(internalInput.getAttribute("inputmode")).toBe("");

input.setProperty("enterKeyHint", null);
await page.waitForChanges();
expect(internalInput.getAttribute("enterkeyhint")).toBe("");
});
}
2 changes: 1 addition & 1 deletion packages/calcite-components/src/components/input/input.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -91,7 +91,7 @@ export class Input
private actionWrapperEl = createRef<HTMLDivElement>();

attributeWatch = useWatchAttributes(
["enterkeyhint", "inputmode", "spellcheck"],
["autofocus", "enterkeyhint", "inputmode", "spellcheck"],
this.handleGlobalAttributesChanged,
);

Expand Down

0 comments on commit 9398bbb

Please sign in to comment.