getsentry / spotlight

Your Universal Debug Toolbar
https://spotlightjs.com
Other
377 stars 11 forks source link

Unexpected error on form autocompletion select #516

Closed w01fgang closed 2 months ago

w01fgang commented 2 months ago

Environment

I'm on "@spotlightjs/spotlight": "^2.3.2", and I see this error every time I select an option in an input with a native browser autocompletion.

Steps to Reproduce

  1. Click on a field with an autocompletion
  2. Select any option that the browser provides using a mouse
  3. See the error in the console and in spotlight

Expected Result

No errors

Actual Result

Image

Image

The error happens in this part of the code, at key.toLowerCase()

function uR(e, t, n = !1) {
  P.useEffect(() => {
    function r(i) {
      n || i.stopPropagation(), e.every(
        (s) => s in i ? i[s] : i.key.toLowerCase() === s.toLowerCase()
      ) && t();
    }
    return window.addEventListener("keyup", r), () => window.removeEventListener("keyup", r);
  }, [e, t, n]);
}

Actually, I found the bug here. I'm wondering why TS is silent, there's no key in e in the second part of the ternary.

keys.every((key: string) =>
  key in e ? e[key as keyof KeyboardEvent] : e.key.toLowerCase() === key.toLowerCase(),
)

It should be like this, because there's no key in the event:

keys.every((key: string) =>
  key in e && e[key as keyof KeyboardEvent],
)