Skip to content

Commit 8d2a3a5

Browse files
benelanbenelan
authored
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`.
1 parent f291719 commit 8d2a3a5

File tree

5 files changed

+92
-101
lines changed

5 files changed

+92
-101
lines changed

‎packages/calcite-components/src/components/color-picker-hex-input/color-picker-hex-input.e2e.ts

Lines changed: 30 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -54,7 +54,7 @@ describe("calcite-color-picker-hex-input", () => {
5454
await page.setContent("<calcite-color-picker-hex-input allow-empty></calcite-color-picker-hex-input>");
5555

5656
const input = await page.find(`calcite-color-picker-hex-input`);
57-
await input.setProperty("value", null);
57+
input.setProperty("value", null);
5858
await page.waitForChanges();
5959

6060
expect(await input.getProperty("value")).toBe(null);
@@ -69,7 +69,7 @@ describe("calcite-color-picker-hex-input", () => {
6969
await page.setContent("<calcite-color-picker-hex-input></calcite-color-picker-hex-input>");
7070

7171
const input = await page.find(`calcite-color-picker-hex-input`);
72-
await input.setProperty("value", "#abc");
72+
input.setProperty("value", "#abc");
7373
await page.waitForChanges();
7474

7575
expect(await input.getProperty("value")).toBe("#aabbcc");
@@ -80,7 +80,7 @@ describe("calcite-color-picker-hex-input", () => {
8080
await page.setContent("<calcite-color-picker-hex-input alpha-channel></calcite-color-picker-hex-input>");
8181

8282
const input = await page.find(`calcite-color-picker-hex-input`);
83-
await input.setProperty("value", "#abcd");
83+
input.setProperty("value", "#abcd");
8484
await page.waitForChanges();
8585

8686
expect(await input.getProperty("value")).toBe("#aabbccdd");
@@ -91,7 +91,7 @@ describe("calcite-color-picker-hex-input", () => {
9191
await page.setContent("<calcite-color-picker-hex-input></calcite-color-picker-hex-input>");
9292

9393
const input = await page.find(`calcite-color-picker-hex-input`);
94-
await input.setProperty("value", "#fafafa");
94+
input.setProperty("value", "#fafafa");
9595
await page.waitForChanges();
9696

9797
expect(await input.getProperty("value")).toBe("#fafafa");
@@ -102,7 +102,7 @@ describe("calcite-color-picker-hex-input", () => {
102102
await page.setContent("<calcite-color-picker-hex-input alpha-channel></calcite-color-picker-hex-input>");
103103

104104
const input = await page.find(`calcite-color-picker-hex-input`);
105-
await input.setProperty("value", "#fafafafa");
105+
input.setProperty("value", "#fafafafa");
106106
await page.waitForChanges();
107107

108108
expect(await input.getProperty("value")).toBe("#fafafafa");
@@ -132,37 +132,37 @@ describe("calcite-color-picker-hex-input", () => {
132132
await page.setContent(`<calcite-color-picker-hex-input value='${hex}'></calcite-color-picker-hex-input>`);
133133
const input = await page.find(`calcite-color-picker-hex-input`);
134134

135-
await input.setProperty("value", null);
135+
input.setProperty("value", null);
136136
await page.waitForChanges();
137137

138138
expect(await input.getProperty("value")).toBe(hex);
139139

140-
await input.setProperty("value", "wrong");
140+
input.setProperty("value", "wrong");
141141
await page.waitForChanges();
142142

143143
expect(await input.getProperty("value")).toBe(hex);
144144

145-
await input.setProperty("value", "#");
145+
input.setProperty("value", "#");
146146
await page.waitForChanges();
147147

148148
expect(await input.getProperty("value")).toBe(hex);
149149

150-
await input.setProperty("value", "#a");
150+
input.setProperty("value", "#a");
151151
await page.waitForChanges();
152152

153153
expect(await input.getProperty("value")).toBe(hex);
154154

155-
await input.setProperty("value", "#aa");
155+
input.setProperty("value", "#aa");
156156
await page.waitForChanges();
157157

158158
expect(await input.getProperty("value")).toBe(hex);
159159

160-
await input.setProperty("value", "#aaaa");
160+
input.setProperty("value", "#aaaa");
161161
await page.waitForChanges();
162162

163163
expect(await input.getProperty("value")).toBe(hex);
164164

165-
await input.setProperty("value", "#aaaaa");
165+
input.setProperty("value", "#aaaaa");
166166
await page.waitForChanges();
167167

168168
expect(await input.getProperty("value")).toBe(hex);
@@ -176,37 +176,37 @@ describe("calcite-color-picker-hex-input", () => {
176176
);
177177
const input = await page.find(`calcite-color-picker-hex-input`);
178178

179-
await input.setProperty("value", null);
179+
input.setProperty("value", null);
180180
await page.waitForChanges();
181181

182182
expect(await input.getProperty("value")).toBe(hex);
183183

184-
await input.setProperty("value", "wrong");
184+
input.setProperty("value", "wrong");
185185
await page.waitForChanges();
186186

187187
expect(await input.getProperty("value")).toBe(hex);
188188

189-
await input.setProperty("value", "#");
189+
input.setProperty("value", "#");
190190
await page.waitForChanges();
191191

192192
expect(await input.getProperty("value")).toBe(hex);
193193

194-
await input.setProperty("value", "#a");
194+
input.setProperty("value", "#a");
195195
await page.waitForChanges();
196196

197197
expect(await input.getProperty("value")).toBe(hex);
198198

199-
await input.setProperty("value", "#aa");
199+
input.setProperty("value", "#aa");
200200
await page.waitForChanges();
201201

202202
expect(await input.getProperty("value")).toBe(hex);
203203

204-
await input.setProperty("value", "#aaaaa");
204+
input.setProperty("value", "#aaaaa");
205205
await page.waitForChanges();
206206

207207
expect(await input.getProperty("value")).toBe(hex);
208208

209-
await input.setProperty("value", "#aaaaaaa");
209+
input.setProperty("value", "#aaaaaaa");
210210
await page.waitForChanges();
211211

212212
expect(await input.getProperty("value")).toBe(hex);
@@ -219,7 +219,7 @@ describe("calcite-color-picker-hex-input", () => {
219219
const input = await page.find("calcite-color-picker-hex-input");
220220
const spy = await input.spyOnEvent("calciteColorPickerHexInputChange");
221221

222-
await input.setProperty("value", "#abcdef");
222+
input.setProperty("value", "#abcdef");
223223
await page.waitForChanges();
224224

225225
expect(spy).toHaveReceivedEventTimes(0);
@@ -360,7 +360,7 @@ describe("calcite-color-picker-hex-input", () => {
360360
const initialHex = "#000000";
361361

362362
await input.callMethod("setFocus");
363-
await input.setProperty("value", initialHex);
363+
input.setProperty("value", initialHex);
364364
await page.waitForChanges();
365365

366366
await page.keyboard.press("ArrowUp");
@@ -404,7 +404,7 @@ describe("calcite-color-picker-hex-input", () => {
404404

405405
it("restores previous value when a nudge key is pressed and no-color is allowed and set", async () => {
406406
const noColorValue = null;
407-
await input.setProperty("value", noColorValue);
407+
input.setProperty("value", noColorValue);
408408
await page.waitForChanges();
409409
await input.callMethod("setFocus");
410410
await page.waitForChanges();
@@ -413,22 +413,22 @@ describe("calcite-color-picker-hex-input", () => {
413413
await page.waitForChanges();
414414
expect(await input.getProperty("value")).toBe(startingHex);
415415

416-
await input.setProperty("value", noColorValue);
416+
input.setProperty("value", noColorValue);
417417
await page.waitForChanges();
418418

419419
await page.keyboard.press("ArrowDown");
420420
await page.waitForChanges();
421421
expect(await input.getProperty("value")).toBe(startingHex);
422422

423-
await input.setProperty("value", noColorValue);
423+
input.setProperty("value", noColorValue);
424424
await page.waitForChanges();
425425

426426
await page.keyboard.down("Shift");
427427
await page.keyboard.press("ArrowUp");
428428
await page.keyboard.up("Shift");
429429
expect(await input.getProperty("value")).toBe(startingHex);
430430

431-
await input.setProperty("value", noColorValue);
431+
input.setProperty("value", noColorValue);
432432
await page.waitForChanges();
433433

434434
await page.keyboard.down("Shift");
@@ -474,7 +474,7 @@ describe("calcite-color-picker-hex-input", () => {
474474
const initialHex = "#000000ff";
475475

476476
await input.callMethod("setFocus");
477-
await input.setProperty("value", initialHex);
477+
input.setProperty("value", initialHex);
478478
await page.waitForChanges();
479479

480480
await page.keyboard.press("ArrowUp");
@@ -523,7 +523,7 @@ describe("calcite-color-picker-hex-input", () => {
523523

524524
it("restores previous value when a nudge key is pressed and no-color is allowed and set", async () => {
525525
const noColorValue = null;
526-
await input.setProperty("value", noColorValue);
526+
input.setProperty("value", noColorValue);
527527
await page.waitForChanges();
528528
await input.callMethod("setFocus");
529529
await page.waitForChanges();
@@ -532,22 +532,22 @@ describe("calcite-color-picker-hex-input", () => {
532532
await page.waitForChanges();
533533
expect(await input.getProperty("value")).toBe(startingHexa);
534534

535-
await input.setProperty("value", noColorValue);
535+
input.setProperty("value", noColorValue);
536536
await page.waitForChanges();
537537

538538
await page.keyboard.press("ArrowDown");
539539
await page.waitForChanges();
540540
expect(await input.getProperty("value")).toBe(startingHexa);
541541

542-
await input.setProperty("value", noColorValue);
542+
input.setProperty("value", noColorValue);
543543
await page.waitForChanges();
544544

545545
await page.keyboard.down("Shift");
546546
await page.keyboard.press("ArrowUp");
547547
await page.keyboard.up("Shift");
548548
expect(await input.getProperty("value")).toBe(startingHexa);
549549

550-
await input.setProperty("value", noColorValue);
550+
input.setProperty("value", noColorValue);
551551
await page.waitForChanges();
552552

553553
await page.keyboard.down("Shift");

‎packages/calcite-components/src/components/color-picker-hex-input/color-picker-hex-input.tsx

Lines changed: 7 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -282,7 +282,6 @@ export class ColorPickerHexInput implements LoadableComponent {
282282
if (isValidHex(hex)) {
283283
event.preventDefault();
284284
this.hexInputNode.value = hex.slice(1);
285-
this.hexInputNode.internalSyncChildElValue();
286285
}
287286
};
288287

@@ -292,14 +291,14 @@ export class ColorPickerHexInput implements LoadableComponent {
292291
//
293292
//--------------------------------------------------------------------------
294293

295-
private hexInputNode: HTMLCalciteInputElement;
294+
private hexInputNode: HTMLCalciteInputTextElement;
296295

297296
/**
298297
* The last valid/selected color. Used as a fallback if an invalid hex code is entered.
299298
*/
300299
@State() internalColor: Color | null = DEFAULT_COLOR;
301300

302-
private opacityInputNode: HTMLCalciteInputElement;
301+
private opacityInputNode: HTMLCalciteInputNumberElement;
303302

304303
private previousNonNullValue: string = this.value;
305304

@@ -317,13 +316,12 @@ export class ColorPickerHexInput implements LoadableComponent {
317316

318317
return (
319318
<div class={CSS.container}>
320-
<calcite-input
319+
<calcite-input-text
321320
class={CSS.hexInput}
322321
label={messages?.hex || hexLabel}
323322
maxLength={6}
324-
numberingSystem={this.numberingSystem}
325-
onCalciteInputChange={this.onHexInputChange}
326-
onCalciteInternalInputBlur={this.onHexInputBlur}
323+
onCalciteInputTextChange={this.onHexInputChange}
324+
onCalciteInternalInputTextBlur={this.onHexInputBlur}
327325
onKeyDown={this.onInputKeyDown}
328326
onPaste={this.onHexInputPaste}
329327
prefixText="#"
@@ -414,11 +412,11 @@ export class ColorPickerHexInput implements LoadableComponent {
414412
this.value = oldValue;
415413
}
416414

417-
private storeHexInputRef = (node: HTMLCalciteInputElement): void => {
415+
private storeHexInputRef = (node: HTMLCalciteInputTextElement): void => {
418416
this.hexInputNode = node;
419417
};
420418

421-
private storeOpacityInputRef = (node: HTMLCalciteInputElement): void => {
419+
private storeOpacityInputRef = (node: HTMLCalciteInputNumberElement): void => {
422420
this.opacityInputNode = node;
423421
};
424422

0 commit comments

Comments
 (0)