Skip to content

fix(input, input-number, input-text): should not set slotted actions to be disabled #10458

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
driskull merged 1 commit into from
Oct 1, 2024
Merged

fix(input, input-number, input-text): should not set slotted actions to be disabled #10458

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 4 additions & 0 deletions packages/calcite-components/src/components.d.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -982,6 +982,7 @@ export namespace Components {
"form": string;
/**
* The `id` attribute of the component. When omitted, a globally unique identifier is used.
* @deprecated No longer necessary.
*/
"guid": string;
/**
Expand Down Expand Up @@ -4199,6 +4200,7 @@ export namespace Components {
"form": string;
/**
* The `id` of the component. When omitted, a globally unique identifier is used.
* @deprecated No longer necessary.
*/
"guid": string;
/**
Expand Down Expand Up @@ -8967,6 +8969,7 @@ declare namespace LocalJSX {
"form"?: string;
/**
* The `id` attribute of the component. When omitted, a globally unique identifier is used.
* @deprecated No longer necessary.
*/
"guid"?: string;
/**
Expand Down Expand Up @@ -12368,6 +12371,7 @@ declare namespace LocalJSX {
"form"?: string;
/**
* The `id` of the component. When omitted, a globally unique identifier is used.
* @deprecated No longer necessary.
*/
"guid"?: string;
/**
Expand Down
63 changes: 0 additions & 63 deletions packages/calcite-components/src/components/input-number/input-number.e2e.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 () => {
Expand Down Expand Up @@ -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>`);
Expand Down
32 changes: 0 additions & 32 deletions packages/calcite-components/src/components/input-number/input-number.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,6 @@ import {
} from "@stencil/core";
import {
getElementDir,
getSlotted,
isPrimaryPointerButton,
setRequestedIcon,
toAriaBoolean,
Expand Down Expand Up @@ -56,7 +55,6 @@ import {
parseNumberString,
sanitizeNumberString,
} from "../../utils/number";
import { createObserver } from "../../utils/observers";
import { CSS_UTILITY } from "../../utils/resources";
import {
connectMessages,
Expand Down Expand Up @@ -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
*
Expand Down Expand Up @@ -430,8 +423,6 @@ export class InputNumber

private nudgeNumberValueIntervalId: number;

mutationObserver = createObserver("mutation", () => this.setDisabledAction());

private userChangedValue = false;

//--------------------------------------------------------------------------
Expand Down Expand Up @@ -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);
}

Expand All @@ -488,8 +476,6 @@ export class InputNumber
disconnectForm(this);
disconnectLocalized(this);
disconnectMessages(this);

this.mutationObserver?.disconnect();
this.el.removeEventListener(internalHiddenInputInputEvent, this.onHiddenFormInputInput);
}

Expand Down Expand Up @@ -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;
Expand Down
63 changes: 0 additions & 63 deletions packages/calcite-components/src/components/input-text/input-text.e2e.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 () => {
Expand Down Expand Up @@ -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 });

Expand Down
32 changes: 1 addition & 31 deletions packages/calcite-components/src/components/input-text/input-text.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand All @@ -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,
Expand Down Expand Up @@ -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
*
Expand Down Expand Up @@ -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;
Expand Down Expand Up @@ -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);
}

Expand All @@ -378,8 +368,6 @@ export class InputText
disconnectForm(this);
disconnectLocalized(this);
disconnectMessages(this);

this.mutationObserver?.disconnect();
this.el.removeEventListener(internalHiddenInputInputEvent, this.onHiddenFormInputInput);
}

Expand Down Expand Up @@ -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;
Expand Down
Loading