changing svg use's href on mousedown blurs custom element
Categories
(Firefox :: Untriaged, defect)
Tracking
()
People
(Reporter: jbstrater, Unassigned)
Details
User Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:133.0) Gecko/20100101 Firefox/133.0
Steps to reproduce:
- Open this page on my github pages site: https://sidewayss.github.io/scratch/wc-bugs.html
- In row 4: click anywhere on the rectangle. note :active styling turns inner rect green and the click event changes the inner shape.
- In row 5: click on the outer, gray-padded area of the rect. same active styling and change of shape, but also a change of shape on mousedown, to a smaller rect with rounded corners.
- In row 5: click on the inner, black area of the rect. Click as close as possible to the center so that the mouse pointer is always hovering on the inner shape. Click repeatedly, and the shape gets stuck on the mousedown shape every other click. When that happens, the custom element no longer has focus, and the click event doesn't fire.
Actual results:
Source for the repro page is here: https://github.com/sidewayss/sidewayss.github.io/tree/main/scratch
File names: wc-bugs.html and wc-bugs.js
Expected results:
The shape should change on every click.
The key procedure is the mousedown event handler:
#mouseDown() {
this._use.setAttribute("href", "#mousedown");
}
So setting the href to a different value blurs the element (or never lets it get the focus), but only when you hold the mouse down on the <use> element itself. When the href value is the same, as when you mousedown and the image is already stuck on #mousedown, then it works. If you don't center the mouse on the shape in the repro steps, you'll see that the behavior is more erratic. The mouse has to be over the <use> in its current state, with the current href, i.e. over the shape defined by that href id in the <defs>.
|
||
Comment 1•1 year ago
|
||
See bug 577785 comment 2, I think this is basically the same thing i.e. we reclone on the href change and that rather messes things up regarding event handling.
Setting pointer-events="none" on the <svg> element works around this. The event handler is assigned to the outer custom element and by turning off pointer-events the <use> element is no longer and event target, avoiding the issue.
In the case of a solo svg, not wrapped by a custom element, you can do this same workaround but also create a <rect fill="none" pointer-events="all"> that captures all the events so that the <use> element is neither an event target or currentTarget.
fyi - Chrome has this same issue except worse. If the href is the same value it swaps in a new entity anyway. But basically the same. I opened this issue there: https://issues.chromium.org/issues/388097688
I haven't gotten around to testing Safari. Gotta do that on Browserstack. I'll get around to it later today. I expect to find a similar behavior there.
Description
•