search

sidewayss / html-elements

custom html elements
0 stars 0 forks source link

input-num - Chrome text selection in neighboring element glitch #1

Open sidewayss opened 1 week ago

sidewayss commented 1 week ago

Using the in-number.html app page as an example: When document.activeElement === this && this._dom.activeElement === null in Chrome and you click repeatedly on the spinner buttons, the browser starts selecting text in the next element on the page, the "Font:" label. 1) A bug should be filed for Chrome. 2) A workaround should be found until it's fixed or if the bug is rejected. It's going to be messy, but another element will probably need to take the focus inside the shadow DOM. Right now the only focusable element is the input.

sidewayss commented 1 week ago

This stackoverflow answer might be the solution: https://stackoverflow.com/a/28654521/4941356

EDIT: tried it and failed. Neither the anchor element wrapper nor tabindex worked.

AGAIN: added an anchor to the template, outside of SVG, succeeded at giving it focus, and the text-selection glitch does not go away.

So it looks like the null activeElement may be irrelevant.

sidewayss commented 3 days ago

I have worked around this by calling event.preventDefault() in the mousedown handler when the target is a spin button. It will be in the next commit.

I am leaving this issue open and labeling it as "browser" so that I am reminded to submit an issue for Chrome.