fix: attach onScan only inside the ScanInput component

beam/src/components/ScanInput.vue

@@ -6,23 +6,18 @@
 /* eslint-disable @typescript-eslint/no-unsafe-call */
 /* eslint-disable @typescript-eslint/no-unsafe-member-access */
 
-import { inject, onMounted, onUnmounted } from 'vue'
+import onScan from 'onscan.js'
+import { onMounted, onUnmounted } from 'vue'
 
 const props = defineProps<{
-	handler: (barcode: string, qty: number) => void
+	scanHandler: (barcode: string, qty: number) => void
 }>()
 
-const onScan = inject<any>('onScan')
-
 onMounted(() => {
-	onScan?.setOptions(window, {
-		onScan: (barcode: string, qty: number) => {
-			props.handler(barcode, qty)
-		},
-	})
+	onScan.attachTo(window, { onScan: props.scanHandler })
 })
 
 onUnmounted(() => {
-	onScan?.detachFrom(window)
+	onScan.detachFrom(window)
 })
 </script>

beam/src/index.ts

@@ -1,7 +1,6 @@
 /* eslint-disable @typescript-eslint/no-unsafe-call */
 /* eslint-disable @typescript-eslint/no-unsafe-member-access */
 
-import onScan from 'onscan.js'
 import { App } from 'vue'
 
 import ActionFooter from '@/components/ActionFooter.vue'
@@ -23,14 +22,6 @@ import 'themes/beam.css'
  * @public
  */
 function install(app: App /* options */) {
-	if (onScan.isAttachedTo(window)) {
-		// there isn't an easy way to fetch the existing attached instance, so re-attach
-		onScan.detachFrom(window)
-	}
-
-	const scanHandler = onScan.attachTo(window)
-	app.provide('onScan', scanHandler)
-
 	app.component('ActionFooter', ActionFooter)
 	app.component('BeamModal', BeamModal)
 	app.component('BeamModalOutlet', BeamModalOutlet)

examples/beam/default.story.vue

@@ -14,7 +14,7 @@
 
 			<ListView :items="items" @scrollbottom="loadMoreItems" />
 			<ActionFooter @click="handlePrimaryAction">Done</ActionFooter>
-			<ScanInput :handler="incrementItemCount" />
+			<ScanInput :scanHandler="incrementItemCount" />
 			<BeamModalOutlet @confirmmodal="confirmModal" @closemodal="closeModal"></BeamModalOutlet>
 		</Variant>
 	</Story>