Avoid normalizing QR hex input

As the user was typing a hex code, e.g., `abc`, the normalisation would automatically update the input field to `#aabbcc`, preventing you from writing a hex value from start to finish.

Author: rodrigogiraoserrao

qr.html

@@ -419,19 +419,29 @@ <h2>Preview</h2>
             });
         }
 
-        function syncForeground(hex) {
-            const normalized = toFullHex(hex);
-            fgHexInput.value = normalized;
+        function syncForeground(hex, { updateHexInput = true, displayValue } = {}) {
+            const normalized = normalizeHex(hex);
+            if (!normalized) {
+                return;
+            }
+            if (updateHexInput) {
+                fgHexInput.value = displayValue ?? normalized;
+            }
             fgPicker.value = normalized;
             updateRgbField(fgRgbInput, normalized);
             applyColorPreview(normalized, [fgPicker]);
             state.foreground = normalized;
             refreshQr();
         }
 
-        function syncBackground(hex) {
-            const normalized = toFullHex(hex);
-            bgHexInput.value = normalized;
+        function syncBackground(hex, { updateHexInput = true, displayValue } = {}) {
+            const normalized = normalizeHex(hex);
+            if (!normalized) {
+                return;
+            }
+            if (updateHexInput) {
+                bgHexInput.value = displayValue ?? normalized;
+            }
             bgPicker.value = normalized;
             updateRgbField(bgRgbInput, normalized);
             applyColorPreview(normalized, [bgPicker]);
@@ -448,7 +458,7 @@ <h2>Preview</h2>
         fgHexInput.addEventListener('input', () => {
             const value = fgHexInput.value.trim();
             if (isValidHex(value)) {
-                syncForeground(value);
+                syncForeground(value, { updateHexInput: false });
                 setError();
             }
         });
@@ -457,22 +467,22 @@ <h2>Preview</h2>
             const rgb = parseRgb(fgRgbInput.value);
             if (rgb) {
                 const hex = rgbToHex(rgb);
-                syncForeground(hex);
+                syncForeground(hex, { displayValue: hex });
                 setError();
             } else {
                 setError('Foreground RGB must be in the format "r, g, b" with values between 0 and 255.');
             }
         });
 
         fgPicker.addEventListener('change', () => {
-            syncForeground(fgPicker.value);
+            syncForeground(fgPicker.value, { displayValue: fgPicker.value });
             setError();
         });
 
         bgHexInput.addEventListener('input', () => {
             const value = bgHexInput.value.trim();
             if (isValidHex(value)) {
-                syncBackground(value);
+                syncBackground(value, { updateHexInput: false });
                 setError();
             }
         });
@@ -481,15 +491,15 @@ <h2>Preview</h2>
             const rgb = parseRgb(bgRgbInput.value);
             if (rgb) {
                 const hex = rgbToHex(rgb);
-                syncBackground(hex);
+                syncBackground(hex, { displayValue: hex });
                 setError();
             } else {
                 setError('Background RGB must be in the format "r, g, b" with values between 0 and 255.');
             }
         });
 
         bgPicker.addEventListener('change', () => {
-            syncBackground(bgPicker.value);
+            syncBackground(bgPicker.value, { displayValue: bgPicker.value });
             setError();
         });