0

I have an application which works with a barcode scanner. The barcode scanner communicates with the computer in a way an external keyboard would, so I've put a keydown event listener on the DOM to capture input from the barcode scanner and mark a corresponding item in the dom. Now my problem is, anytime a barcode is read in, the dom seems to refresh and clear all selection. Can someone help? This is my code. All of this is been done in electron by the way

document.addEventListener("keydown", (e) => {
  if (e.key === "" || e.key === "Control") {
    return
  }

  buffer.push(e.key);

  setTimeout(() => {

    if (buffer.length > 0) {
      buffer.forEach((char) => {
        string = string + char
      })

      if (buffer.length >= 12) {

        const tableRows = document.querySelector("tbody").querySelectorAll("tr");
        tableRows.forEach((row) => {

          const barcode = row.querySelector(".td_Barcode--hidden").innerText;

          if (barcode === string) {
            toggleRowCB(row)
          }

        })
      } else {
        console.log(buffer.length);
      }
    }

    buffer = [];
    string = "";

  }, 500)

})
Mighty
  • 53
  • 6

1 Answers1

0

Code seems alright, but can you try adding

e.preventDefault();

for submitting. I think when you scan barcode with barcode scanner it mimics with reading + "Enter" which bypass your e.key conditions.

Package suggestion for electron keyboard event handling;

Kemal Tarhan
  • 16
  • 2
  • Hi. I think i just figured the problem. The toggleRowCB() function is supposed to loop through the dom and activate the checkboxes of rows with such barcode. I think the dom refreshes after that check is done, causing previously made checks to be cleared. Is there a way around this please? – Mighty Jan 09 '21 at 03:21