From 8d2a3a59c0bd208a6ecb826a709d6389b2a72aa4 Mon Sep 17 00:00:00 2001
From: Ben Elan <no-reply@benelan.dev>
Date: Wed, 19 Jul 2023 09:09:03 -0700
Subject: [PATCH] fix(color-picker): maintains correct numbering system when
entering invalid RGB value (#7327)
**Related Issue:** #5978
## Summary
Entering an RGB channel value greater than 255 or less than 0 clamps the
value so it doesn't become invalid. This caused the numbering system to
revert to the default `latn`.
It is a timing issue with `calcite-input`'s lifecycle methods and it
reproduces outside of `calcite-color-picker`. Here is a demo showing
that using a timeout or requesting an animation frame (kind of) fixes
the issue:
https://codepen.io/benesri/pen/vYQjYJK
The issue isn't reproducible in `calcite-input-number`.
---
.../color-picker-hex-input.e2e.ts | 60 ++++++------
.../color-picker-hex-input.tsx | 16 ++--
.../color-picker/color-picker.e2e.ts | 91 ++++++++++---------
.../components/color-picker/color-picker.tsx | 15 +--
.../src/components/input/input.tsx | 11 ---
5 files changed, 92 insertions(+), 101 deletions(-)
diff --git a/packages/calcite-components/src/components/color-picker-hex-input/color-picker-hex-input.e2e.ts b/packages/calcite-components/src/components/color-picker-hex-input/color-picker-hex-input.e2e.ts
index ac39fdbe630..7d8c3380c28 100644
--- a/packages/calcite-components/src/components/color-picker-hex-input/color-picker-hex-input.e2e.ts
+++ b/packages/calcite-components/src/components/color-picker-hex-input/color-picker-hex-input.e2e.ts
@@ -54,7 +54,7 @@ describe("calcite-color-picker-hex-input", () => {
await page.setContent("<calcite-color-picker-hex-input allow-empty></calcite-color-picker-hex-input>");
const input = await page.find(`calcite-color-picker-hex-input`);
- await input.setProperty("value", null);
+ input.setProperty("value", null);
await page.waitForChanges();
expect(await input.getProperty("value")).toBe(null);
@@ -69,7 +69,7 @@ describe("calcite-color-picker-hex-input", () => {
await page.setContent("<calcite-color-picker-hex-input></calcite-color-picker-hex-input>");
const input = await page.find(`calcite-color-picker-hex-input`);
- await input.setProperty("value", "#abc");
+ input.setProperty("value", "#abc");
await page.waitForChanges();
expect(await input.getProperty("value")).toBe("#aabbcc");
@@ -80,7 +80,7 @@ describe("calcite-color-picker-hex-input", () => {
await page.setContent("<calcite-color-picker-hex-input alpha-channel></calcite-color-picker-hex-input>");
const input = await page.find(`calcite-color-picker-hex-input`);
- await input.setProperty("value", "#abcd");
+ input.setProperty("value", "#abcd");
await page.waitForChanges();
expect(await input.getProperty("value")).toBe("#aabbccdd");
@@ -91,7 +91,7 @@ describe("calcite-color-picker-hex-input", () => {
await page.setContent("<calcite-color-picker-hex-input></calcite-color-picker-hex-input>");
const input = await page.find(`calcite-color-picker-hex-input`);
- await input.setProperty("value", "#fafafa");
+ input.setProperty("value", "#fafafa");
await page.waitForChanges();
expect(await input.getProperty("value")).toBe("#fafafa");
@@ -102,7 +102,7 @@ describe("calcite-color-picker-hex-input", () => {
await page.setContent("<calcite-color-picker-hex-input alpha-channel></calcite-color-picker-hex-input>");
const input = await page.find(`calcite-color-picker-hex-input`);
- await input.setProperty("value", "#fafafafa");
+ input.setProperty("value", "#fafafafa");
await page.waitForChanges();
expect(await input.getProperty("value")).toBe("#fafafafa");
@@ -132,37 +132,37 @@ describe("calcite-color-picker-hex-input", () => {
await page.setContent(`<calcite-color-picker-hex-input value='${hex}'></calcite-color-picker-hex-input>`);
const input = await page.find(`calcite-color-picker-hex-input`);
- await input.setProperty("value", null);
+ input.setProperty("value", null);
await page.waitForChanges();
expect(await input.getProperty("value")).toBe(hex);
- await input.setProperty("value", "wrong");
+ input.setProperty("value", "wrong");
await page.waitForChanges();
expect(await input.getProperty("value")).toBe(hex);
- await input.setProperty("value", "#");
+ input.setProperty("value", "#");
await page.waitForChanges();
expect(await input.getProperty("value")).toBe(hex);
- await input.setProperty("value", "#a");
+ input.setProperty("value", "#a");
await page.waitForChanges();
expect(await input.getProperty("value")).toBe(hex);
- await input.setProperty("value", "#aa");
+ input.setProperty("value", "#aa");
await page.waitForChanges();
expect(await input.getProperty("value")).toBe(hex);
- await input.setProperty("value", "#aaaa");
+ input.setProperty("value", "#aaaa");
await page.waitForChanges();
expect(await input.getProperty("value")).toBe(hex);
- await input.setProperty("value", "#aaaaa");
+ input.setProperty("value", "#aaaaa");
await page.waitForChanges();
expect(await input.getProperty("value")).toBe(hex);
@@ -176,37 +176,37 @@ describe("calcite-color-picker-hex-input", () => {
);
const input = await page.find(`calcite-color-picker-hex-input`);
- await input.setProperty("value", null);
+ input.setProperty("value", null);
await page.waitForChanges();
expect(await input.getProperty("value")).toBe(hex);
- await input.setProperty("value", "wrong");
+ input.setProperty("value", "wrong");
await page.waitForChanges();
expect(await input.getProperty("value")).toBe(hex);
- await input.setProperty("value", "#");
+ input.setProperty("value", "#");
await page.waitForChanges();
expect(await input.getProperty("value")).toBe(hex);
- await input.setProperty("value", "#a");
+ input.setProperty("value", "#a");
await page.waitForChanges();
expect(await input.getProperty("value")).toBe(hex);
- await input.setProperty("value", "#aa");
+ input.setProperty("value", "#aa");
await page.waitForChanges();
expect(await input.getProperty("value")).toBe(hex);
- await input.setProperty("value", "#aaaaa");
+ input.setProperty("value", "#aaaaa");
await page.waitForChanges();
expect(await input.getProperty("value")).toBe(hex);
- await input.setProperty("value", "#aaaaaaa");
+ input.setProperty("value", "#aaaaaaa");
await page.waitForChanges();
expect(await input.getProperty("value")).toBe(hex);
@@ -219,7 +219,7 @@ describe("calcite-color-picker-hex-input", () => {
const input = await page.find("calcite-color-picker-hex-input");
const spy = await input.spyOnEvent("calciteColorPickerHexInputChange");
- await input.setProperty("value", "#abcdef");
+ input.setProperty("value", "#abcdef");
await page.waitForChanges();
expect(spy).toHaveReceivedEventTimes(0);
@@ -360,7 +360,7 @@ describe("calcite-color-picker-hex-input", () => {
const initialHex = "#000000";
await input.callMethod("setFocus");
- await input.setProperty("value", initialHex);
+ input.setProperty("value", initialHex);
await page.waitForChanges();
await page.keyboard.press("ArrowUp");
@@ -404,7 +404,7 @@ describe("calcite-color-picker-hex-input", () => {
it("restores previous value when a nudge key is pressed and no-color is allowed and set", async () => {
const noColorValue = null;
- await input.setProperty("value", noColorValue);
+ input.setProperty("value", noColorValue);
await page.waitForChanges();
await input.callMethod("setFocus");
await page.waitForChanges();
@@ -413,14 +413,14 @@ describe("calcite-color-picker-hex-input", () => {
await page.waitForChanges();
expect(await input.getProperty("value")).toBe(startingHex);
- await input.setProperty("value", noColorValue);
+ input.setProperty("value", noColorValue);
await page.waitForChanges();
await page.keyboard.press("ArrowDown");
await page.waitForChanges();
expect(await input.getProperty("value")).toBe(startingHex);
- await input.setProperty("value", noColorValue);
+ input.setProperty("value", noColorValue);
await page.waitForChanges();
await page.keyboard.down("Shift");
@@ -428,7 +428,7 @@ describe("calcite-color-picker-hex-input", () => {
await page.keyboard.up("Shift");
expect(await input.getProperty("value")).toBe(startingHex);
- await input.setProperty("value", noColorValue);
+ input.setProperty("value", noColorValue);
await page.waitForChanges();
await page.keyboard.down("Shift");
@@ -474,7 +474,7 @@ describe("calcite-color-picker-hex-input", () => {
const initialHex = "#000000ff";
await input.callMethod("setFocus");
- await input.setProperty("value", initialHex);
+ input.setProperty("value", initialHex);
await page.waitForChanges();
await page.keyboard.press("ArrowUp");
@@ -523,7 +523,7 @@ describe("calcite-color-picker-hex-input", () => {
it("restores previous value when a nudge key is pressed and no-color is allowed and set", async () => {
const noColorValue = null;
- await input.setProperty("value", noColorValue);
+ input.setProperty("value", noColorValue);
await page.waitForChanges();
await input.callMethod("setFocus");
await page.waitForChanges();
@@ -532,14 +532,14 @@ describe("calcite-color-picker-hex-input", () => {
await page.waitForChanges();
expect(await input.getProperty("value")).toBe(startingHexa);
- await input.setProperty("value", noColorValue);
+ input.setProperty("value", noColorValue);
await page.waitForChanges();
await page.keyboard.press("ArrowDown");
await page.waitForChanges();
expect(await input.getProperty("value")).toBe(startingHexa);
- await input.setProperty("value", noColorValue);
+ input.setProperty("value", noColorValue);
await page.waitForChanges();
await page.keyboard.down("Shift");
@@ -547,7 +547,7 @@ describe("calcite-color-picker-hex-input", () => {
await page.keyboard.up("Shift");
expect(await input.getProperty("value")).toBe(startingHexa);
- await input.setProperty("value", noColorValue);
+ input.setProperty("value", noColorValue);
await page.waitForChanges();
await page.keyboard.down("Shift");
diff --git a/packages/calcite-components/src/components/color-picker-hex-input/color-picker-hex-input.tsx b/packages/calcite-components/src/components/color-picker-hex-input/color-picker-hex-input.tsx
index d4c44265871..daa2fc8382c 100644
--- a/packages/calcite-components/src/components/color-picker-hex-input/color-picker-hex-input.tsx
+++ b/packages/calcite-components/src/components/color-picker-hex-input/color-picker-hex-input.tsx
@@ -282,7 +282,6 @@ export class ColorPickerHexInput implements LoadableComponent {
if (isValidHex(hex)) {
event.preventDefault();
this.hexInputNode.value = hex.slice(1);
- this.hexInputNode.internalSyncChildElValue();
}
};
@@ -292,14 +291,14 @@ export class ColorPickerHexInput implements LoadableComponent {
//
//--------------------------------------------------------------------------
- private hexInputNode: HTMLCalciteInputElement;
+ private hexInputNode: HTMLCalciteInputTextElement;
/**
* The last valid/selected color. Used as a fallback if an invalid hex code is entered.
*/
@State() internalColor: Color | null = DEFAULT_COLOR;
- private opacityInputNode: HTMLCalciteInputElement;
+ private opacityInputNode: HTMLCalciteInputNumberElement;
private previousNonNullValue: string = this.value;
@@ -317,13 +316,12 @@ export class ColorPickerHexInput implements LoadableComponent {
return (
<div class={CSS.container}>
- <calcite-input
+ <calcite-input-text
class={CSS.hexInput}
label={messages?.hex || hexLabel}
maxLength={6}
- numberingSystem={this.numberingSystem}
- onCalciteInputChange={this.onHexInputChange}
- onCalciteInternalInputBlur={this.onHexInputBlur}
+ onCalciteInputTextChange={this.onHexInputChange}
+ onCalciteInternalInputTextBlur={this.onHexInputBlur}
onKeyDown={this.onInputKeyDown}
onPaste={this.onHexInputPaste}
prefixText="#"
@@ -414,11 +412,11 @@ export class ColorPickerHexInput implements LoadableComponent {
this.value = oldValue;
}
- private storeHexInputRef = (node: HTMLCalciteInputElement): void => {
+ private storeHexInputRef = (node: HTMLCalciteInputTextElement): void => {
this.hexInputNode = node;
};
- private storeOpacityInputRef = (node: HTMLCalciteInputElement): void => {
+ private storeOpacityInputRef = (node: HTMLCalciteInputNumberElement): void => {
this.opacityInputNode = node;
};
diff --git a/packages/calcite-components/src/components/color-picker/color-picker.e2e.ts b/packages/calcite-components/src/components/color-picker/color-picker.e2e.ts
index ee9a2571409..eb5c0df9e07 100644
--- a/packages/calcite-components/src/components/color-picker/color-picker.e2e.ts
+++ b/packages/calcite-components/src/components/color-picker/color-picker.e2e.ts
@@ -783,7 +783,7 @@ describe("calcite-color-picker", () => {
// see https://jasmine.github.io/tutorials/custom_argument_matchers for more info
function toBeInteger(): any {
return {
- asymmetricMatch(abc): boolean {
+ asymmetricMatch(abc: string): boolean {
return Number.isInteger(abc);
},
@@ -795,8 +795,8 @@ describe("calcite-color-picker", () => {
function toBeNumber(): any {
return {
- asymmetricMatch(expected): boolean {
- return !isNaN(parseFloat(expected)) && isFinite(expected);
+ asymmetricMatch(expected: string): boolean {
+ return !isNaN(parseFloat(expected)) && isFinite(Number(expected));
},
jasmineToString(): string {
@@ -805,6 +805,31 @@ describe("calcite-color-picker", () => {
};
}
+ it("numbering system does not revert to latn when clamping RGB channels", async () => {
+ const page = await newE2EPage();
+ await page.setContent(
+ html`<calcite-color-picker numbering-system="arab" value="#fff000"></calcite-color-picker>`
+ );
+
+ const calciteInputNumber = await page.find(`calcite-color-picker >>> .${CSS.channel}`);
+
+ await selectText(calciteInputNumber);
+ await calciteInputNumber.type("25555");
+ await calciteInputNumber.press("Enter");
+ await page.waitForChanges();
+
+ const nativeInputValue = await page.evaluate(
+ async (CSS) =>
+ document
+ .querySelector("calcite-color-picker")
+ .shadowRoot.querySelector(`.${CSS.channel}`)
+ .shadowRoot.querySelector("input").value,
+ CSS
+ );
+
+ expect(nativeInputValue).toBe("٢٥٥");
+ });
+
describe("default", () => {
describe("keeps value in same format when applying updates", () => {
let page: E2EPage;
@@ -828,7 +853,7 @@ describe("calcite-color-picker", () => {
const [rgbModeButton, hsvModeButton] = await page.findAll(`calcite-color-picker >>> .${CSS.colorMode}`);
const [rInput, gInput, bInput, hInput, sInput, vInput] = await page.findAll(
- `calcite-color-picker >>> calcite-input.${CSS.channel}`
+ `calcite-color-picker >>> .${CSS.channel}`
);
await rgbModeButton.click();
@@ -953,7 +978,7 @@ describe("calcite-color-picker", () => {
const [rgbModeButton, hsvModeButton] = await page.findAll(`calcite-color-picker >>> .${CSS.colorMode}`);
const [rInput, gInput, bInput, hInput, sInput, vInput] = await page.findAll(
- `calcite-color-picker >>> calcite-input.${CSS.channel}`
+ `calcite-color-picker >>> .${CSS.channel}`
);
await rgbModeButton.click();
@@ -988,9 +1013,7 @@ describe("calcite-color-picker", () => {
it("allows modifying color via RGB inputs", async () => {
const [rgbModeButton] = await page.findAll(`calcite-color-picker >>> .${CSS.colorMode}`);
- const [rInput, gInput, bInput] = await page.findAll(
- `calcite-color-picker >>> calcite-input.${CSS.channel}`
- );
+ const [rInput, gInput, bInput] = await page.findAll(`calcite-color-picker >>> .${CSS.channel}`);
await rgbModeButton.click();
await clearAndEnterHexOrChannelValue(page, rInput, "128");
@@ -1002,9 +1025,7 @@ describe("calcite-color-picker", () => {
it("allows modifying color via HSV inputs", async () => {
const [, hsvModeButton] = await page.findAll(`calcite-color-picker >>> .${CSS.colorMode}`);
- const [, , , hInput, sInput, vInput] = await page.findAll(
- `calcite-color-picker >>> calcite-input.${CSS.channel}`
- );
+ const [, , , hInput, sInput, vInput] = await page.findAll(`calcite-color-picker >>> .${CSS.channel}`);
await hsvModeButton.click();
// modifying value channel first to ensure other channel changes affect the underlying color
@@ -1027,9 +1048,7 @@ describe("calcite-color-picker", () => {
it("allows nudging RGB values", async () => {
const [rgbModeButton] = await page.findAll(`calcite-color-picker >>> .${CSS.colorMode}`);
- const [rInput, gInput, bInput] = await page.findAll(
- `calcite-color-picker >>> calcite-input.${CSS.channel}`
- );
+ const [rInput, gInput, bInput] = await page.findAll(`calcite-color-picker >>> .${CSS.channel}`);
await rgbModeButton.click();
await assertChannelValueNudge(page, rInput);
@@ -1040,9 +1059,7 @@ describe("calcite-color-picker", () => {
it("allows nudging HSV values", async () => {
const [, hsvModeButton] = await page.findAll(`calcite-color-picker >>> .${CSS.colorMode}`);
- const [, , , hInput, sInput, vInput] = await page.findAll(
- `calcite-color-picker >>> calcite-input.${CSS.channel}`
- );
+ const [, , , hInput, sInput, vInput] = await page.findAll(`calcite-color-picker >>> .${CSS.channel}`);
await hsvModeButton.click();
await assertChannelValueNudge(page, hInput);
@@ -1089,7 +1106,7 @@ describe("calcite-color-picker", () => {
const [rgbModeButton, hsvModeButton] = await page.findAll(`calcite-color-picker >>> .${CSS.colorMode}`);
const [rInput, gInput, bInput, hInput, sInput, vInput] = await page.findAll(
- `calcite-color-picker >>> calcite-input.${CSS.channel}`
+ `calcite-color-picker >>> .${CSS.channel}`
);
await rgbModeButton.click();
@@ -1119,9 +1136,7 @@ describe("calcite-color-picker", () => {
it("restores previous color to RGB inputs", async () => {
const [rgbModeButton] = await page.findAll(`calcite-color-picker >>> .${CSS.colorMode}`);
- const [rInput, gInput, bInput] = await page.findAll(
- `calcite-color-picker >>> calcite-input.${CSS.channel}`
- );
+ const [rInput, gInput, bInput] = await page.findAll(`calcite-color-picker >>> .${CSS.channel}`);
await rgbModeButton.click();
await assertChannelValueNudge(page, rInput);
@@ -1131,9 +1146,7 @@ describe("calcite-color-picker", () => {
it("restores previous color to HSV inputs", async () => {
const [, hsvModeButton] = await page.findAll(`calcite-color-picker >>> .${CSS.colorMode}`);
- const [, , , hInput, sInput, vInput] = await page.findAll(
- `calcite-color-picker >>> calcite-input.${CSS.channel}`
- );
+ const [, , , hInput, sInput, vInput] = await page.findAll(`calcite-color-picker >>> .${CSS.channel}`);
await hsvModeButton.click();
await assertChannelValueNudge(page, hInput);
@@ -1205,9 +1218,7 @@ describe("calcite-color-picker", () => {
const picker = await page.find("calcite-color-picker");
const [rgbModeButton] = await page.findAll(`calcite-color-picker >>> .${CSS.colorMode}`);
- const [rInput, gInput, bInput] = await page.findAll(
- `calcite-color-picker >>> calcite-input.${CSS.channel}`
- );
+ const [rInput, gInput, bInput] = await page.findAll(`calcite-color-picker >>> .${CSS.channel}`);
await rgbModeButton.click();
@@ -1227,9 +1238,7 @@ describe("calcite-color-picker", () => {
const [, hsvModeButton] = await page.findAll(`calcite-color-picker >>> .${CSS.colorMode}`);
- const [, , , hInput, sInput, vInput] = await page.findAll(
- `calcite-color-picker >>> calcite-input.${CSS.channel}`
- );
+ const [, , , hInput, sInput, vInput] = await page.findAll(`calcite-color-picker >>> .${CSS.channel}`);
await hsvModeButton.click();
@@ -1270,7 +1279,7 @@ describe("calcite-color-picker", () => {
const [rgbModeButton, hsvModeButton] = await page.findAll(`calcite-color-picker >>> .${CSS.colorMode}`);
const [rInput, gInput, bInput, rgbAInput, hInput, sInput, vInput, hsvAInput] = await page.findAll(
- `calcite-color-picker >>> calcite-input.${CSS.channel}`
+ `calcite-color-picker >>> .${CSS.channel}`
);
await rgbModeButton.click();
@@ -1492,7 +1501,7 @@ describe("calcite-color-picker", () => {
const [rgbModeButton, hsvModeButton] = await page.findAll(`calcite-color-picker >>> .${CSS.colorMode}`);
const [rInput, gInput, bInput, rgbAInput, hInput, sInput, vInput, hsvAInput] = await page.findAll(
- `calcite-color-picker >>> calcite-input.${CSS.channel}`
+ `calcite-color-picker >>> .${CSS.channel}`
);
await rgbModeButton.click();
@@ -1530,7 +1539,7 @@ describe("calcite-color-picker", () => {
it("allows modifying color via RGBA inputs", async () => {
const [rgbModeButton] = await page.findAll(`calcite-color-picker >>> .${CSS.colorMode}`);
const [rInput, gInput, bInput, rgbAInput] = await page.findAll(
- `calcite-color-picker >>> calcite-input.${CSS.channel}`
+ `calcite-color-picker >>> .${CSS.channel}`
);
await rgbModeButton.click();
@@ -1545,7 +1554,7 @@ describe("calcite-color-picker", () => {
it("allows modifying color via HSVA inputs", async () => {
const [, hsvModeButton] = await page.findAll(`calcite-color-picker >>> .${CSS.colorMode}`);
const [, , , , hInput, sInput, vInput, hsvAInput] = await page.findAll(
- `calcite-color-picker >>> calcite-input.${CSS.channel}`
+ `calcite-color-picker >>> .${CSS.channel}`
);
await hsvModeButton.click();
@@ -1573,7 +1582,7 @@ describe("calcite-color-picker", () => {
it("allows nudging RGBA values", async () => {
const [rgbModeButton] = await page.findAll(`calcite-color-picker >>> .${CSS.colorMode}`);
const [rInput, gInput, bInput, rgbAInput] = await page.findAll(
- `calcite-color-picker >>> calcite-input.${CSS.channel}`
+ `calcite-color-picker >>> .${CSS.channel}`
);
await rgbModeButton.click();
@@ -1586,7 +1595,7 @@ describe("calcite-color-picker", () => {
it("allows nudging HSVA values", async () => {
const [, hsvModeButton] = await page.findAll(`calcite-color-picker >>> .${CSS.colorMode}`);
const [, , , , hInput, sInput, vInput, hsvAInput] = await page.findAll(
- `calcite-color-picker >>> calcite-input.${CSS.channel}`
+ `calcite-color-picker >>> .${CSS.channel}`
);
await hsvModeButton.click();
@@ -1645,7 +1654,7 @@ describe("calcite-color-picker", () => {
const [rgbModeButton, hsvModeButton] = await page.findAll(`calcite-color-picker >>> .${CSS.colorMode}`);
const [rInput, gInput, bInput, rgbAInput, hInput, sInput, vInput, hsvAInput] = await page.findAll(
- `calcite-color-picker >>> calcite-input.${CSS.channel}`
+ `calcite-color-picker >>> .${CSS.channel}`
);
await rgbModeButton.click();
@@ -1678,7 +1687,7 @@ describe("calcite-color-picker", () => {
it("restores color to RGBA inputs", async () => {
const [rgbModeButton] = await page.findAll(`calcite-color-picker >>> .${CSS.colorMode}`);
const [rInput, gInput, bInput, rgbAInput] = await page.findAll(
- `calcite-color-picker >>> calcite-input.${CSS.channel}`
+ `calcite-color-picker >>> .${CSS.channel}`
);
await rgbModeButton.click();
@@ -1691,7 +1700,7 @@ describe("calcite-color-picker", () => {
it("restores color to HSVA inputs", async () => {
const [, hsvModeButton] = await page.findAll(`calcite-color-picker >>> .${CSS.colorMode}`);
const [, , , , hInput, sInput, vInput, hsvAInput] = await page.findAll(
- `calcite-color-picker >>> calcite-input.${CSS.channel}`
+ `calcite-color-picker >>> .${CSS.channel}`
);
await hsvModeButton.click();
@@ -1797,7 +1806,7 @@ describe("calcite-color-picker", () => {
const [rgbModeButton] = await page.findAll(`calcite-color-picker >>> .${CSS.colorMode}`);
const [rInput, gInput, bInput, rgbAInput] = await page.findAll(
- `calcite-color-picker >>> calcite-input.${CSS.channel}`
+ `calcite-color-picker >>> .${CSS.channel}`
);
await rgbModeButton.click();
@@ -1822,7 +1831,7 @@ describe("calcite-color-picker", () => {
const [, hsvModeButton] = await page.findAll(`calcite-color-picker >>> .${CSS.colorMode}`);
const [, , , , hInput, sInput, vInput, hsvAInput] = await page.findAll(
- `calcite-color-picker >>> calcite-input.${CSS.channel}`
+ `calcite-color-picker >>> .${CSS.channel}`
);
await hsvModeButton.click();
diff --git a/packages/calcite-components/src/components/color-picker/color-picker.tsx b/packages/calcite-components/src/components/color-picker/color-picker.tsx
index 01d28aaa8ba..76ab2beba24 100644
--- a/packages/calcite-components/src/components/color-picker/color-picker.tsx
+++ b/packages/calcite-components/src/components/color-picker/color-picker.tsx
@@ -439,7 +439,7 @@ export class ColorPicker
};
private handleChannelInput = (event: CustomEvent): void => {
- const input = event.currentTarget as HTMLCalciteInputElement;
+ const input = event.currentTarget as HTMLCalciteInputNumberElement;
const channelIndex = Number(input.getAttribute("data-channel-index"));
const isAlphaChannel = channelIndex === 3;
@@ -462,10 +462,6 @@ export class ColorPicker
}
input.value = inputValue;
-
- // TODO: refactor calcite-input so we don't need to sync the internals
- // https://github.com/Esri/calcite-design-system/issues/6100
- input.internalSyncChildElValue();
};
// using @Listen as a workaround for VDOM listener not firing
@@ -503,7 +499,7 @@ export class ColorPicker
}
private handleChannelChange = (event: CustomEvent): void => {
- const input = event.currentTarget as HTMLCalciteInputElement;
+ const input = event.currentTarget as HTMLCalciteInputNumberElement;
const channelIndex = Number(input.getAttribute("data-channel-index"));
const channels = [...this.channels] as this["channels"];
@@ -992,7 +988,7 @@ export class ColorPicker
suffix?: string
): VNode => {
return (
- <calcite-input
+ <calcite-input-number
class={CSS.channel}
data-channel-index={index}
dir={direction}
@@ -1001,8 +997,8 @@ export class ColorPicker
lang={this.effectiveLocale}
numberButtonType="none"
numberingSystem={this.numberingSystem}
- onCalciteInputChange={this.handleChannelChange}
- onCalciteInputInput={this.handleChannelInput}
+ onCalciteInputNumberChange={this.handleChannelChange}
+ onCalciteInputNumberInput={this.handleChannelInput}
onKeyDown={this.handleKeyDown}
scale={this.scale === "l" ? "m" : "s"}
// workaround to ensure input borders overlap as desired
@@ -1013,7 +1009,6 @@ export class ColorPicker
index > 0 && !(this.scale === "s" && this.alphaChannel && index === 3) ? "-1px" : "",
}}
suffixText={suffix}
- type="number"
value={value?.toString()}
/>
);
diff --git a/packages/calcite-components/src/components/input/input.tsx b/packages/calcite-components/src/components/input/input.tsx
index decb10698e3..b39ede4a990 100644
--- a/packages/calcite-components/src/components/input/input.tsx
+++ b/packages/calcite-components/src/components/input/input.tsx
@@ -592,17 +592,6 @@ export class Input
}
}
- // TODO: refactor so we don't need to sync the internals in color-picker
- // https://github.com/Esri/calcite-design-system/issues/6100
- /** @internal */
- @Method()
- async internalSyncChildElValue(): Promise<void> {
- if (this.type === "number") {
- this.childNumberEl.value = this.value;
- } else {
- this.childEl.value = this.value;
- }
- }
//--------------------------------------------------------------------------
//
// Private Methods