ui.interactive_image svg event svg:pointerenter and svg:pointerleave don't receive the element id

[sdegrace]

Description

ii = ui.interactive_image(cross=True) \
    .on('svg:pointerenter', lambda x: print(x)) \
    .on('svg:pointerleave', lambda x: print(x)) \
    .on('svg:pointerdown', lambda e: ui.notify(f'SVG clicked: {e.args}'))
ii.content += '<rect id="14868-B" x="339" y="159" width="298" height="90" fill="none" stroke="green" stroke-width="4" pointer-events="all" cursor="pointer" />'

This triggers an event for each pointerenter and pointerleave and the pointerdown events, but only pointerdown has an element_id. pointerenter and pointerleave both give the following event args:

args={'type': 'pointerenter', 'element_id': '', 'image_x': 464, 'image_y': 234}
args={'type': 'pointerleave', 'element_id': '', 'image_x': 487, 'image_y': 268}

whereas the pointerdown triggers:

args={'type': 'pointerdown', 'element_id': '14868-B', 'image_x': 520, 'image_y': 198}

[falkoschindler]

Thanks for reporting this issue, @sdegrace!

I had to give the interactive image some width in order to see it:

ui.interactive_image(content='<circle id="X" cx="50" cy="50" r="25" pointer-events="all" />', size=(100, 100)) \
    .classes('w-80 border') \
    .on('svg:pointerenter', lambda e: print(e.args['type'], e.args['element_id'])) \
    .on('svg:pointerleave', lambda e: print(e.args['type'], e.args['element_id'])) \
    .on('svg:pointerdown', lambda e: print(e.args['type'], e.args['element_id']))

The problem is that the "target" attribute of the pointerenter and pointerleave events contain the SVG, not the circle. This seems to be a JavaScript limitation and I'm not sure what to do about it.

Does anyone have an idea?