feat(frontend): Improve barcode scanning text input on Platform UI. (#9655)

* feat(frontend): Add control character handling to barcode text input.

Ports part of 8059fb1 to Platform UI.

Fixes #7529.

* feat(frontend): Submit barcode scan on EOT character.

Automatically submits 2D barcode scans when end of transmission character is input.

---------

Co-authored-by: Oliver <oliver.henry.walters@gmail.com>

Author: willbicks

src/frontend/src/components/barcodes/BarcodeKeyboardInput.tsx

@@ -4,6 +4,15 @@ import { IconQrcode } from '@tabler/icons-react';
 import { useCallback, useState } from 'react';
 import type { BarcodeInputProps } from './BarcodeInput';
 
+// Control keys commonly used for ASCII control codes by barcode scanners
+// emulating keyboard input.
+// See for example: https://docs.zebra.com/us/en/scanners/general/sm72-ig/ascii-character-sets.html
+const BarcodeControlKeys: Record<string, string> = {
+  KeyD: String.fromCharCode(4), // End of transmission
+  BracketRight: String.fromCharCode(29), // Group separator
+  Digit6: String.fromCharCode(30) // Record separator
+} as const;
+
 export default function BarcodeKeyboardInput({
   onScan,
   actionText = t`Scan`
@@ -32,7 +41,23 @@ export default function BarcodeKeyboardInput({
               setText(event.currentTarget?.value);
             }}
             onKeyDown={(event) => {
-              if (event.code === 'Enter') {
+              let key = event.key;
+
+              if (event.ctrlKey) {
+                if (event.code in BarcodeControlKeys) {
+                  // Prevent most of the keyboard shortcuts.
+                  // Not all of them will be blocked, browser don't allow this:
+                  // https://stackoverflow.com/questions/59952382/using-preventdefault-to-override-opening-new-tab
+                  event.preventDefault();
+                  key = BarcodeControlKeys[event.code];
+                  setText((prev) => prev + key);
+                }
+              }
+
+              if (
+                key === 'Enter' ||
+                key === String.fromCharCode(4) // End of transmission
+              ) {
                 onTextScan(text);
               }
             }}