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.tsx

@@ -210,6 +210,19 @@ export class ColorPickerHexInput implements LoadableComponent {
     this.internalSetValue(value, this.value);
   };
 
+  private onInputFocus = (): void => {
+    this.hexInputNode.selectText();
+  };
+
+  private onInputChange = (): void => {
+    const hexInputValue = `#${this.hexInputNode.value}`;
+    const oldValue = this.value;
+
+    if (isValidHex(hexInputValue) && isLonghandHex(hexInputValue)) {
+      this.internalSetValue(hexInputValue, oldValue);
+    }
+  };
+
   protected onInputKeyDown = (event: KeyboardEvent): void => {
     const { altKey, ctrlKey, metaKey, shiftKey } = event;
     const { alphaChannel, hexInputNode, internalColor, value } = this;
@@ -274,6 +287,7 @@ export class ColorPickerHexInput implements LoadableComponent {
     if (isValidHex(hex)) {
       event.preventDefault();
       this.hexInputNode.value = hex.slice(1);
+      this.internalSetValue(hex, this.value);
     }
   };
 
@@ -316,6 +330,8 @@ export class ColorPickerHexInput implements LoadableComponent {
           maxLength={6}
           onCalciteInputTextChange={this.onHexInputChange}
           onCalciteInternalInputTextBlur={this.onHexInputBlur}
+          onFocus={this.onInputFocus}
+          onInput={this.onInputChange}
           onKeyDown={this.onInputKeyDown}
           onPaste={this.onHexInputPaste}
           prefixText="#"

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

@@ -1034,6 +1034,8 @@ export class ColorPicker
         numberingSystem={this.numberingSystem}
         onCalciteInputNumberChange={this.handleChannelChange}
         onCalciteInputNumberInput={this.handleChannelInput}
+        onFocus={this.handleInputFocus}
+        onInput={this.handleChannelInputChange}
         onKeyDown={this.handleKeyDown}
         scale={this.scale === "l" ? "m" : "s"}
         // workaround to ensure input borders overlap as desired
@@ -1055,12 +1057,22 @@ export class ColorPicker
   //
   //--------------------------------------------------------------------------
 
+  handleChannelInputChange = (event: Event): void => {
+    const customEvent = event as CustomEvent;
+    this.handleChannelChange(customEvent);
+  };
+
   handleKeyDown(event: KeyboardEvent): void {
     if (event.key === "Enter") {
       event.preventDefault();
     }
   }
 
+  handleInputFocus = (event: Event): void => {
+    const input = event.currentTarget as HTMLCalciteInputNumberElement;
+    input.selectText();
+  };
+
   private showIncompatibleColorWarning(value: ColorValue, format: Format): void {
     console.warn(
       `ignoring color value (${value}) as it is not compatible with the current format (${format})`,