No UXP click event from inner child SVG elements

Hi, I am trying to detect mouse clicks from multiple rects inside an svg parent container, but only the outer parent svg ‘container’ is being detected as the source of the click event. Previously I was able to place an event listener on the entire document using…

document.addEventListener('click', handleClickEvent)

and then I could filter through the various objects (including the child svg rects) in the handleClickEvent function…

function handleClickEvent(event)
    var target =;
    //test if I have the target I want and respond appropriately

To demo, in the code below, the target for the click event identified by the UXP debugger is always
svg#myhueselector.colorselectorclass (the outer parent svg, and never the individual squares I have actually clicked on)

<div class="horizContainer0" id="horizontalSelectionDiv">
            <svg class="colorselectorclass" id="myhueselector" viewBox="0 0 300 50"  width="300px" height="50px" preserveAspectRatio="xMinYMin meet" > 
                <rect id="colorsquare1" x="2" y="4"  fill="rgb(252, 54, 254)" width="30" height="30"></rect>
                <rect id='colorsquare2' x="40" y="4"  fill="rgb(25, 109, 254)" width="30" height="30"></rect>
                <rect id="colorsquare3" x="80" y="4"  fill="rgb(25, 133, 254)" width="30" height="30"></rect>

However with UXP I can no longer gain access to the inner svg elements as the only target that is registered as having been clicked is the outer parent svg container.

As a workaround I have begrudgingly begun looping through the child elements and checking if the click location is in the child bounding box, but this solution slowly begins to drift and becomes gradually more erratic and buggy when you apply repeated resizing and scaling to the outer svg container even after applying the appropriate scaling offset requirements from the parent viewBox to the child dimensions. So in the previous CEP version of my code the inner-child-embedded svg elements (‘rects’ in my case) could all be directly identified as click event targets without further and unreliable click location hacking of the parent container.

As another work-around I have also tried adding multiple svg container elements to a div, (each having a single rect as a child), but then the individual svg elements do not neatly scale anymore or keep their position in relation to each other when the div changes sizes the way that happens natively in a container svg - this is the layout hack that I am currently pursuing after a resize() event - but was never needed previously.

As yet another work-around I have also tried to add an individual eventListener to each of the child rects after they have been added to the parent container svg (in code) but click events (and I assume other events) are not being detected when the rect (circle etc) is a child of a parent svg.

I have also tried adding the document eventListener with both true and false in the third parameter
location in the hope of drilling to the child rects from top down to inside the parent svg container - document.addEventListener(‘click’, handleClickEvent, true) - but with no success, it process stops at the parent container.

Has anyone else had these issues with nested SVG events? I am hoping this issue will be fixed as the SVG code base develops for UXP as I am hoping to use SVGs more functionally and not just as button decorations. Thank you for your help :slight_smile:

Sounds related to hover issue as well, where it won’t trigger on child elements - only on <svg> itself

1 Like

Yes that would be consistent with an event propagation bug of some sort - in this case I can’t imagine it related to a rendering issue as a rectangle is as basic geometry as it gets. Disappointing that the original hover bug has been sitting there over a year from May 2021.

I hate to repeat myself on this topic and some might probably be really annoyed already, but it looks like UXP UI issues are at the lowest priority - some seemingly very simple bugs aren’t fixed since the very introduction of UXP

1 Like