printedparts kiosk: one visible entry input for scanner and keyboard

The bin step hid entry behind a "Type the number" link, and a plugged-in
keyboard could not drive the visible fields. Replace the hidden wedge input
with one visible, always-focused input per step that a wedge scanner, a
physical keyboard/numpad, and the on-screen keypad all feed; Enter submits.
inputmode="none" keeps the OS soft keyboard from popping on a touchscreen.

plugins/printedparts/frontend/views/PartsKiosk.vue

@@ -1,10 +1,5 @@
 <template>
-  <div class="parts-kiosk" @click="focusWedge">
+  <div class="parts-kiosk" @click="focusEntry">
-    <!-- keyboard-wedge scanners type the code + Enter into this hidden,
-         always-focused input; whichever step is active consumes the scan -->
-    <input ref="wedgeInput" v-model="wedgeBuffer" class="wedge-input"
-           autocomplete="off" @keydown.enter.prevent="onWedgeEnter" />
-
     <header class="kiosk-header">
       <h1>3D Printed Parts</h1>
       <button v-if="step !== 'item'" class="btn btn-secondary" @click="reset">
@@ -14,24 +9,22 @@
 
     <div v-if="error" class="kiosk-error">{{ error }}</div>
 
-    <!-- step 1: scan the bin -->
+    <!-- step 1: the bin label -->
     <section v-if="step === 'item'" class="kiosk-step">
       <p class="kiosk-prompt">Scan the barcode on the bin</p>
-      <p class="kiosk-hint">
+      <!-- one visible field: keyboard-wedge scanners, a plugged-in keyboard or
-        No scanner?
+           numpad, and the on-screen keypad all type into it. -->
-        <a href="#" @click.prevent="manualEntry = !manualEntry">Type the number</a>
+      <div class="entry-panel">
-      </p>
+        <input ref="entryInput" v-model="manualCode" class="entry-input"
-      <div v-if="manualEntry" class="entry-panel">
+               inputmode="none" autocomplete="off" placeholder="label number"
-        <div class="entry-display" :class="{ empty: !manualCode }">
+               @keydown.enter.prevent="lookupItem(manualCode)" />
-          {{ manualCode || 'label number' }}
-        </div>
         <TouchKeypad @digit="manualCode += $event"
                      @clear="manualCode = ''"
                      @backspace="manualCode = manualCode.slice(0, -1)" />
         <button class="btn btn-primary take-button" :disabled="!manualCode"
                 @click="lookupItem(manualCode)">Look up</button>
-        <p class="kiosk-hint">Just the number from the label; letters are
+        <p class="kiosk-hint">Scan the label, type on a keyboard, or tap it in;
-          added automatically.</p>
+          letters are added automatically.</p>
       </div>
     </section>
 
@@ -46,9 +39,9 @@
       </div>
       <p class="kiosk-prompt">Scan your badge or tap in your SSO</p>
       <div class="entry-panel">
-        <div class="entry-display" :class="{ empty: !manualBadge }">
+        <input ref="entryInput" v-model="manualBadge" class="entry-input"
-          {{ manualBadge || 'SSO' }}
+               inputmode="none" autocomplete="off" placeholder="SSO"
-        </div>
+               @keydown.enter.prevent="acceptBadge(manualBadge)" />
         <TouchKeypad @digit="manualBadge += $event"
                      @clear="manualBadge = ''"
                      @backspace="manualBadge = manualBadge.slice(0, -1)" />
@@ -68,9 +61,9 @@
       </div>
       <p class="kiosk-prompt">How many are you taking?</p>
       <div class="entry-panel">
-        <div class="entry-display" :class="{ empty: !quantity }">
+        <input ref="entryInput" v-model="quantity" class="entry-input"
-          {{ quantity || '0' }}
+               inputmode="none" autocomplete="off" placeholder="0"
-        </div>
+               @keydown.enter.prevent="submitTake" />
         <TouchKeypad @digit="quantity += $event"
                      @clear="quantity = ''"
                      @backspace="quantity = quantity.slice(0, -1)" />
@@ -90,7 +83,7 @@
 </template>
 
 <script setup>
-import { ref, onMounted, onBeforeUnmount } from 'vue'
+import { ref, onMounted, onBeforeUnmount, nextTick } from 'vue'
 import { printedpartsApi } from '@/api'
 import { withBase } from '@/utils/basePath'
 import TouchKeypad from '@/components/TouchKeypad.vue'
@@ -102,47 +95,38 @@ const quantity = ref('')
 const error = ref('')
 const doneMessage = ref('')
 const submitting = ref(false)
-const manualEntry = ref(false)
 const manualCode = ref('')
 const manualBadge = ref('')
-const wedgeInput = ref(null)
+const entryInput = ref(null)
-const wedgeBuffer = ref('')
 let resetTimer = null
 
-onMounted(focusWedge)
+onMounted(focusEntry)
 onBeforeUnmount(() => clearTimeout(resetTimer))
 
-function focusWedge(event) {
+function focusEntry(event) {
-  // Tapping a visible input/button must keep it - only reclaim focus for
+  // Keep focus on the entry input so a wedge scanner or plugged-in keyboard
-  // the wedge scanner from dead space.
+  // always types into it. Only reclaim focus from dead space - never steal it
+  // mid-tap from a button or another control.
   const tag = event?.target?.tagName
   if (tag === 'INPUT' || tag === 'SELECT' || tag === 'TEXTAREA'
       || tag === 'BUTTON' || tag === 'A') return
-  wedgeInput.value?.focus()
+  nextTick(() => entryInput.value?.focus())
-}
-
-function onWedgeEnter() {
-  const scanned = wedgeBuffer.value.trim()
-  wedgeBuffer.value = ''
-  if (!scanned) return
-  if (step.value === 'item') lookupItem(scanned)
-  else if (step.value === 'badge') acceptBadge(scanned)
 }
 
 async function lookupItem(itemcode) {
   error.value = ''
-  if (!itemcode) return
+  const code = (itemcode || '').trim()
+  if (!code) return
   try {
-    const response = await printedpartsApi.kioskItem(itemcode.trim())
+    const response = await printedpartsApi.kioskItem(code)
     item.value = response.data.data
     step.value = 'badge'
-    manualEntry.value = false
     manualCode.value = ''
   } catch (lookupError) {
     error.value = lookupError.response?.data?.data?.error?.message ||
       'No part matches that barcode'
   }
-  focusWedge()
+  focusEntry()
 }
 
 function acceptBadge(value) {
@@ -152,10 +136,11 @@ function acceptBadge(value) {
   badge.value = scanned
   manualBadge.value = ''
   step.value = 'quantity'
-  focusWedge()
+  focusEntry()
 }
 
 async function submitTake() {
+  if (!quantity.value || submitting.value) return
   submitting.value = true
   error.value = ''
   try {
@@ -173,6 +158,7 @@ async function submitTake() {
     if (takeError.response?.status === 422) {
       // badge problem: go back a step so the next scan retries cleanly
       step.value = 'badge'
+      focusEntry()
     }
   } finally {
     submitting.value = false
@@ -185,9 +171,11 @@ function reset() {
   item.value = null
   badge.value = ''
   quantity.value = ''
+  manualCode.value = ''
+  manualBadge.value = ''
   error.value = ''
   doneMessage.value = ''
-  focusWedge()
+  focusEntry()
 }
 </script>
 
@@ -209,12 +197,6 @@ function reset() {
   justify-content: space-between;
   align-items: center;
 }
-.wedge-input {
-  position: absolute;
-  opacity: 0;
-  height: 1px;
-  width: 1px;
-}
 .kiosk-step {
   display: flex;
   flex-direction: column;
@@ -258,7 +240,7 @@ function reset() {
   border-radius: 1rem;
   padding: 1.5rem 2rem;
 }
-.entry-display {
+.entry-input {
   width: 16.9rem;
   box-sizing: border-box;
   font-size: 2.4rem;
@@ -269,15 +251,14 @@ function reset() {
   border: 1px solid var(--border);
   border-radius: 0.75rem;
   background: var(--bg);
-  overflow: hidden;
+  color: var(--text);
-  text-overflow: ellipsis;
+  outline: none;
-  white-space: nowrap;
 }
-.entry-display.empty {
+.entry-input:focus { border-color: var(--primary); }
+.entry-input::placeholder {
   color: var(--text-light);
   font-weight: 400;
   font-size: 1.4rem;
-  line-height: 2.4rem;
 }
 .take-button {
   font-size: 1.4rem;
@@ -285,11 +266,4 @@ function reset() {
   width: 16.9rem;
   border-radius: 0.75rem;
 }
-.manual-row { display: flex; gap: 0.6rem; }
-.manual-block {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  gap: 1rem;
-}
 </style>