feat(color-picker-hex-input): auto apply new color after typing/pasting hex code

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

@@ -348,6 +348,19 @@ describe("calcite-color-picker-hex-input", () => {
           await assertTabAndEnterBehavior("", startingHex);
         });
 
+        it("commits longhand hex chars when typing", async () => {
+          await selectText(input);
+          await page.keyboard.type("abc");
+          await page.waitForChanges();
+
+          expect(await input.getProperty("value")).toBe(startingHex);
+
+          await page.keyboard.type("def");
+          await page.waitForChanges();
+
+          expect(await input.getProperty("value")).toBe("#abcdef");
+        });
+
         it("prevents committing invalid hex values", async () => {
           await assertTabAndEnterBehavior("aabbc", startingHex);
           await assertTabAndEnterBehavior("aabb", startingHex);

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

@@ -210,6 +210,18 @@ export class ColorPickerHexInput implements LoadableComponent {
     this.internalSetValue(value, this.value);
   };
 
+  private onHexInput = (): void => {
+    const hexInputValue = `#${this.hexInputNode.value}`;
+    const oldValue = this.value;
+
+    if (
+      isValidHex(hexInputValue, this.alphaChannel) &&
+      isLonghandHex(hexInputValue, this.alphaChannel)
+    ) {
+      this.internalSetValue(hexInputValue, oldValue);
+    }
+  };
+
   protected onInputKeyDown = (event: KeyboardEvent): void => {
     const { altKey, ctrlKey, metaKey, shiftKey } = event;
     const { alphaChannel, hexInputNode, internalColor, value } = this;
@@ -271,9 +283,10 @@ export class ColorPickerHexInput implements LoadableComponent {
   private onHexInputPaste = (event: ClipboardEvent): void => {
     const hex = event.clipboardData.getData("text");
 
-    if (isValidHex(hex)) {
+    if (isValidHex(hex, this.alphaChannel) && isLonghandHex(hex, this.alphaChannel)) {
       event.preventDefault();
       this.hexInputNode.value = hex.slice(1);
+      this.internalSetValue(hex, this.value);
     }
   };
 
@@ -315,6 +328,7 @@ export class ColorPickerHexInput implements LoadableComponent {
           label={messages?.hex || hexLabel}
           maxLength={6}
           onCalciteInputTextChange={this.onHexInputChange}
+          onCalciteInputTextInput={this.onHexInput}
           onCalciteInternalInputTextBlur={this.onHexInputBlur}
           onKeyDown={this.onInputKeyDown}
           onPaste={this.onHexInputPaste}