Skip to content

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

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 2 commits into
base: master
Choose a base branch
from
Open
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
27 changes: 26 additions & 1 deletion src/frontend/src/components/barcodes/BarcodeKeyboardInput.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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`
Expand Down Expand Up @@ -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);
}
}}
Expand Down
Loading