From c96733358775d480fd1b1c287b8528473aedc543 Mon Sep 17 00:00:00 2001 From: Matt Driscoll Date: Tue, 1 Oct 2024 10:01:33 -0700 Subject: [PATCH] fix(input, input-number, input-text): should not set slotted actions to be disabled (#10458) **Related Issue:** #6059 #10055 ## Summary - removes getSlotted util usage - removes setting slotted buttons to be disabled - removed applicable tests --- .../input-number/input-number.e2e.ts | 63 ------------------- .../components/input-number/input-number.tsx | 32 ---------- .../components/input-text/input-text.e2e.ts | 63 ------------------- .../src/components/input-text/input-text.tsx | 32 +--------- .../src/components/input/input.e2e.ts | 63 ------------------- .../src/components/input/input.tsx | 33 ---------- 6 files changed, 1 insertion(+), 285 deletions(-) diff --git a/packages/calcite-components/src/components/input-number/input-number.e2e.ts b/packages/calcite-components/src/components/input-number/input-number.e2e.ts index 6ebe8ecb683..4dd0d914358 100644 --- a/packages/calcite-components/src/components/input-number/input-number.e2e.ts +++ b/packages/calcite-components/src/components/input-number/input-number.e2e.ts @@ -1529,12 +1529,6 @@ describe("calcite-input-number", () => { for (const input of inputs) { expect(await input.getProperty("readOnly")).toBe(true); } - - const buttons = await page.findAll("calcite-input-number button"); - - for (const button of buttons) { - expect(await button.getProperty("disabled")).toBe(true); - } }); it("sets internals to autocomplete when the attribute is used", async () => { @@ -1690,63 +1684,6 @@ describe("calcite-input-number", () => { expect(await isElementFocused(page, componentTag)).toBe(true); }); - it("allows disabling slotted action", async () => { - const page = await newE2EPage(); - await page.setContent( - `Action`, - ); - - const input = await page.find("calcite-input-number"); - const button = await page.find("calcite-button"); - - await input.callMethod("setFocus"); - await page.waitForChanges(); - await typeNumberValue(page, "1"); - await page.waitForChanges(); - expect(await input.getProperty("value")).toBe("1"); - expect(await button.getProperty("disabled")).toBe(true); - expect(await input.getProperty("disabled")).toBe(false); - - input.setProperty("disabled", true); - await input.callMethod("setFocus"); - await page.waitForChanges(); - await typeNumberValue(page, "2"); - await page.waitForChanges(); - expect(await input.getProperty("value")).toBe("1"); - expect(await button.getProperty("disabled")).toBe(true); - expect(await input.getProperty("disabled")).toBe(true); - - input.setProperty("disabled", false); - await page.waitForChanges(); - await input.callMethod("setFocus"); - await page.waitForChanges(); - await typeNumberValue(page, "3"); - await page.waitForChanges(); - expect(await input.getProperty("value")).toBe("13"); - expect(await button.getProperty("disabled")).toBe(true); - expect(await input.getProperty("disabled")).toBe(false); - - button.setProperty("disabled", false); - await page.waitForChanges(); - await input.callMethod("setFocus"); - await page.waitForChanges(); - await typeNumberValue(page, "4"); - await page.waitForChanges(); - expect(await input.getProperty("value")).toBe("134"); - expect(await button.getProperty("disabled")).toBe(false); - expect(await input.getProperty("disabled")).toBe(false); - - input.setProperty("disabled", true); - await page.waitForChanges(); - await input.callMethod("setFocus"); - await page.waitForChanges(); - await page.keyboard.type("5"); - await page.waitForChanges(); - expect(await input.getProperty("value")).toBe("134"); - expect(await button.getProperty("disabled")).toBe(true); - expect(await input.getProperty("disabled")).toBe(true); - }); - it("integer property prevents decimals and exponential notation", async () => { const page = await newE2EPage(); await page.setContent(``); 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 ac3a9d14042..0ba912d0db0 100644 --- a/packages/calcite-components/src/components/input-number/input-number.tsx +++ b/packages/calcite-components/src/components/input-number/input-number.tsx @@ -14,7 +14,6 @@ import { } from "@stencil/core"; import { getElementDir, - getSlotted, isPrimaryPointerButton, setRequestedIcon, toAriaBoolean, @@ -56,7 +55,6 @@ import { parseNumberString, sanitizeNumberString, } from "../../utils/number"; -import { createObserver } from "../../utils/observers"; import { CSS_UTILITY } from "../../utils/resources"; import { connectMessages, @@ -139,11 +137,6 @@ export class InputNumber */ @Prop({ reflect: true }) disabled = false; - @Watch("disabled") - disabledWatcher(): void { - this.setDisabledAction(); - } - /** * Adds support for kebab-cased attribute, removed in https://github.com/Esri/calcite-design-system/pull/9123 * @@ -430,8 +423,6 @@ export class InputNumber private nudgeNumberValueIntervalId: number; - mutationObserver = createObserver("mutation", () => this.setDisabledAction()); - private userChangedValue = false; //-------------------------------------------------------------------------- @@ -473,9 +464,6 @@ export class InputNumber } connectLabel(this); connectForm(this); - - this.mutationObserver?.observe(this.el, { childList: true }); - this.setDisabledAction(); this.el.addEventListener(internalHiddenInputInputEvent, this.onHiddenFormInputInput); } @@ -488,8 +476,6 @@ export class InputNumber disconnectForm(this); disconnectLocalized(this); disconnectMessages(this); - - this.mutationObserver?.disconnect(); this.el.removeEventListener(internalHiddenInputInputEvent, this.onHiddenFormInputInput); } @@ -875,24 +861,6 @@ export class InputNumber this.childNumberEl = el; }; - private setDisabledAction(): void { - const slottedActionEl = getSlotted(this.el, "action"); - - if (!slottedActionEl) { - return; - } - - if (this.disabled) { - if (slottedActionEl.getAttribute("disabled") == null) { - this.slottedActionElDisabledInternally = true; - } - slottedActionEl.setAttribute("disabled", ""); - } else if (this.slottedActionElDisabledInternally) { - slottedActionEl.removeAttribute("disabled"); - this.slottedActionElDisabledInternally = false; - } - } - private setInputNumberValue = (newInputValue: string): void => { if (!this.childNumberEl) { return; diff --git a/packages/calcite-components/src/components/input-text/input-text.e2e.ts b/packages/calcite-components/src/components/input-text/input-text.e2e.ts index d0b3fa416b8..648b2824022 100644 --- a/packages/calcite-components/src/components/input-text/input-text.e2e.ts +++ b/packages/calcite-components/src/components/input-text/input-text.e2e.ts @@ -367,12 +367,6 @@ describe("calcite-input-text", () => { for (const input of inputs) { expect(await input.getProperty("readOnly")).toBe(true); } - - const buttons = await page.findAll("calcite-input-text button"); - - for (const button of buttons) { - expect(await button.getProperty("disabled")).toBe(true); - } }); it("sets internals to pattern when the attribute is used", async () => { @@ -433,63 +427,6 @@ describe("calcite-input-text", () => { expect(await isElementFocused(page, componentTag)).toBe(true); }); - it("allows disabling slotted action", async () => { - const page = await newE2EPage(); - await page.setContent( - `Action`, - ); - - const input = await page.find("calcite-input-text"); - const button = await page.find("calcite-button"); - - await input.callMethod("setFocus"); - await page.waitForChanges(); - await page.keyboard.type("1"); - await page.waitForChanges(); - expect(await input.getProperty("value")).toBe("1"); - expect(await button.getProperty("disabled")).toBe(true); - expect(await input.getProperty("disabled")).toBe(false); - - await input.setProperty("disabled", true); - await input.callMethod("setFocus"); - await page.waitForChanges(); - await page.keyboard.type("2"); - await page.waitForChanges(); - expect(await input.getProperty("value")).toBe("1"); - expect(await button.getProperty("disabled")).toBe(true); - expect(await input.getProperty("disabled")).toBe(true); - - await input.setProperty("disabled", false); - await page.waitForChanges(); - await input.callMethod("setFocus"); - await page.waitForChanges(); - await page.keyboard.type("3"); - await page.waitForChanges(); - expect(await input.getProperty("value")).toBe("13"); - expect(await button.getProperty("disabled")).toBe(true); - expect(await input.getProperty("disabled")).toBe(false); - - await button.setProperty("disabled", false); - await page.waitForChanges(); - await input.callMethod("setFocus"); - await page.waitForChanges(); - await page.keyboard.type("4"); - await page.waitForChanges(); - expect(await input.getProperty("value")).toBe("134"); - expect(await button.getProperty("disabled")).toBe(false); - expect(await input.getProperty("disabled")).toBe(false); - - await input.setProperty("disabled", true); - await page.waitForChanges(); - await input.callMethod("setFocus"); - await page.waitForChanges(); - await page.keyboard.type("5"); - await page.waitForChanges(); - expect(await input.getProperty("value")).toBe("134"); - expect(await button.getProperty("disabled")).toBe(true); - expect(await input.getProperty("disabled")).toBe(true); - }); - describe("is form-associated", () => { formAssociated("calcite-input-text", { testValue: "test", submitsOnEnter: true, validation: true }); 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 746d854f78a..ab93bb06151 100644 --- a/packages/calcite-components/src/components/input-text/input-text.tsx +++ b/packages/calcite-components/src/components/input-text/input-text.tsx @@ -12,7 +12,7 @@ import { VNode, Watch, } from "@stencil/core"; -import { getElementDir, getSlotted, setRequestedIcon, toAriaBoolean } from "../../utils/dom"; +import { getElementDir, setRequestedIcon, toAriaBoolean } from "../../utils/dom"; import { connectForm, disconnectForm, @@ -35,7 +35,6 @@ import { setUpLoadableComponent, } from "../../utils/loadable"; import { connectLocalized, disconnectLocalized, LocalizedComponent } from "../../utils/locale"; -import { createObserver } from "../../utils/observers"; import { CSS_UTILITY } from "../../utils/resources"; import { connectMessages, @@ -114,11 +113,6 @@ export class InputText */ @Prop({ reflect: true }) disabled = false; - @Watch("disabled") - disabledWatcher(): void { - this.setDisabledAction(); - } - /** * Adds support for kebab-cased attribute, removed in https://github.com/Esri/calcite-design-system/pull/9123 * @@ -336,8 +330,6 @@ export class InputText /** the computed icon to render */ private requestedIcon?: IconNameOrString; - mutationObserver = createObserver("mutation", () => this.setDisabledAction()); - private userChangedValue = false; @State() effectiveLocale: string; @@ -368,8 +360,6 @@ export class InputText connectLabel(this); connectForm(this); - this.mutationObserver?.observe(this.el, { childList: true }); - this.setDisabledAction(); this.el.addEventListener(internalHiddenInputInputEvent, this.onHiddenFormInputInput); } @@ -378,8 +368,6 @@ export class InputText disconnectForm(this); disconnectLocalized(this); disconnectMessages(this); - - this.mutationObserver?.disconnect(); this.el.removeEventListener(internalHiddenInputInputEvent, this.onHiddenFormInputInput); } @@ -563,24 +551,6 @@ export class InputText this.childEl = el; }; - private setDisabledAction(): void { - const slottedActionEl = getSlotted(this.el, "action"); - - if (!slottedActionEl) { - return; - } - - if (this.disabled) { - if (slottedActionEl.getAttribute("disabled") == null) { - this.slottedActionElDisabledInternally = true; - } - slottedActionEl.setAttribute("disabled", ""); - } else if (this.slottedActionElDisabledInternally) { - slottedActionEl.removeAttribute("disabled"); - this.slottedActionElDisabledInternally = false; - } - } - private setInputValue = (newInputValue: string): void => { if (!this.childEl) { return; diff --git a/packages/calcite-components/src/components/input/input.e2e.ts b/packages/calcite-components/src/components/input/input.e2e.ts index 287f21c4922..c770d15e59d 100644 --- a/packages/calcite-components/src/components/input/input.e2e.ts +++ b/packages/calcite-components/src/components/input/input.e2e.ts @@ -1766,12 +1766,6 @@ describe("calcite-input", () => { for (const input of inputs) { expect(await input.getProperty("readOnly")).toBe(true); } - - const buttons = await page.findAll("calcite-input button"); - - for (const button of buttons) { - expect(await button.getProperty("disabled")).toBe(true); - } }); it("sets internals to multiple when the attribute is used", async () => { @@ -1983,63 +1977,6 @@ describe("calcite-input", () => { expect(await isElementFocused(page, componentTag)).toBe(true); }); - it("allows disabling slotted action", async () => { - const page = await newE2EPage(); - await page.setContent( - `Action`, - ); - - const input = await page.find("calcite-input"); - const button = await page.find("calcite-button"); - - await input.callMethod("setFocus"); - await page.waitForChanges(); - await page.keyboard.type("1"); - await page.waitForChanges(); - expect(await input.getProperty("value")).toBe("1"); - expect(await button.getProperty("disabled")).toBe(true); - expect(await input.getProperty("disabled")).toBe(false); - - input.setProperty("disabled", true); - await input.callMethod("setFocus"); - await page.waitForChanges(); - await page.keyboard.type("2"); - await page.waitForChanges(); - expect(await input.getProperty("value")).toBe("1"); - expect(await button.getProperty("disabled")).toBe(true); - expect(await input.getProperty("disabled")).toBe(true); - - input.setProperty("disabled", false); - await page.waitForChanges(); - await input.callMethod("setFocus"); - await page.waitForChanges(); - await page.keyboard.type("3"); - await page.waitForChanges(); - expect(await input.getProperty("value")).toBe("13"); - expect(await button.getProperty("disabled")).toBe(true); - expect(await input.getProperty("disabled")).toBe(false); - - button.setProperty("disabled", false); - await page.waitForChanges(); - await input.callMethod("setFocus"); - await page.waitForChanges(); - await page.keyboard.type("4"); - await page.waitForChanges(); - expect(await input.getProperty("value")).toBe("134"); - expect(await button.getProperty("disabled")).toBe(false); - expect(await input.getProperty("disabled")).toBe(false); - - input.setProperty("disabled", true); - await page.waitForChanges(); - await input.callMethod("setFocus"); - await page.waitForChanges(); - await page.keyboard.type("5"); - await page.waitForChanges(); - expect(await input.getProperty("value")).toBe("134"); - expect(await button.getProperty("disabled")).toBe(true); - expect(await input.getProperty("disabled")).toBe(true); - }); - describe("is form-associated", () => { const supportedSubmissionTypes = [ { diff --git a/packages/calcite-components/src/components/input/input.tsx b/packages/calcite-components/src/components/input/input.tsx index 82bb21206ce..b5bb2e91cc3 100644 --- a/packages/calcite-components/src/components/input/input.tsx +++ b/packages/calcite-components/src/components/input/input.tsx @@ -14,7 +14,6 @@ import { } from "@stencil/core"; import { getElementDir, - getSlotted, isPrimaryPointerButton, setRequestedIcon, toAriaBoolean, @@ -56,7 +55,6 @@ import { parseNumberString, sanitizeNumberString, } from "../../utils/number"; -import { createObserver } from "../../utils/observers"; import { CSS_UTILITY } from "../../utils/resources"; import { connectMessages, @@ -135,11 +133,6 @@ export class Input */ @Prop({ reflect: true }) disabled = false; - @Watch("disabled") - disabledWatcher(): void { - this.setDisabledAction(); - } - /** * Adds support for kebab-cased attribute, removed in https://github.com/Esri/calcite-design-system/pull/9123 * @@ -487,8 +480,6 @@ export class Input private nudgeNumberValueIntervalId: number; - mutationObserver = createObserver("mutation", () => this.setDisabledAction()); - private userChangedValue = false; //-------------------------------------------------------------------------- @@ -526,10 +517,6 @@ export class Input } connectLabel(this); connectForm(this); - - this.mutationObserver?.observe(this.el, { childList: true }); - - this.setDisabledAction(); this.el.addEventListener(internalHiddenInputInputEvent, this.onHiddenFormInputInput); } @@ -538,8 +525,6 @@ export class Input disconnectForm(this); disconnectLocalized(this); disconnectMessages(this); - - this.mutationObserver?.disconnect(); this.el.removeEventListener(internalHiddenInputInputEvent, this.onHiddenFormInputInput); } @@ -955,24 +940,6 @@ export class Input this.childNumberEl = el; }; - private setDisabledAction(): void { - const slottedActionEl = getSlotted(this.el, "action"); - - if (!slottedActionEl) { - return; - } - - if (this.disabled) { - if (slottedActionEl.getAttribute("disabled") == null) { - this.slottedActionElDisabledInternally = true; - } - slottedActionEl.setAttribute("disabled", ""); - } else if (this.slottedActionElDisabledInternally) { - slottedActionEl.removeAttribute("disabled"); - this.slottedActionElDisabledInternally = false; - } - } - private setInputValue = (newInputValue: string): void => { if (this.type === "text" && !this.childEl) { return;