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
Esri · Oct 1, 2024 · c967333 · c967333
1 parent f2eb65a
commit c967333
Show file tree

Hide file tree

Showing 6 changed files with 1 addition and 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
@@ -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(
-      `<calcite-input-number><calcite-button slot="action" disabled>Action</calcite-button></calcite-input-number>`,
-    );
-
-    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(`<calcite-input-number integer value="1.2" step="0.01"></calcite-input-number>`);

diff --git 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
@@ -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(
-      `<calcite-input-text><calcite-button slot="action" disabled>Action</calcite-button></calcite-input-text>`,
-    );
-
-    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
@@ -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
@@ -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(
-      `<calcite-input><calcite-button slot="action" disabled>Action</calcite-button></calcite-input>`,
-    );
-
-    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 = [
       {