ReactiveHTML event target changes in v1

CmpCtrl · September 18, 2023, 8:30pm

I had a reactiveHTML table in panel v0.13 that worked pretty well with a number of js scripts that relied on the target of various events. For instance the focus callback would rely on the target of the focus event.

I’m working on updating to Panel v1.2.1 (and Bokeh 3.2.1) and it seems like the behavior of the events has changed. Where i used to get the relevant table cell as the target of a focus event, i now get div.bk-panel-models-tabs-Tabs.tabs-left.bk-left which is the container several levels up from the table cell I’m interested in.

I assume this is due to a change in Bokeh 3, but i haven’t had any luck finding info on how or why it changed and how to get back to getting the more specific target of the focus event. Any suggestions?
Thanks for the help.

CmpCtrl · September 19, 2023, 2:57pm

I’ve convinced myself this is a bug related to the shadow DOM so I’ve started an issue on github.

github.com/holoviz/panel

ReactiveHTML js callback `event.target` issue in Panel v1

opened 02:56PM - 19 Sep 23 UTC

CmpCtrl

#### ALL software version info Bokeh 3.2.1 Panel 1.2.1 #### Description of …expected behavior and the observed behavior In an older version of Panel (v0.13 as i recall) i had developed an input table with quite a few js callbacks defined in the `_scripts` dictionary. Many of those relied on the `target` field of the `event` object that would be passed to the callbacks and would refer to whichever element triggered the event. I recently tried updating to Panel v1.2.1 and those are now broken. The `target` now refers to the top most div containing a shadow DOM above whichever element triggered the event. I presume this is related to the shadow DOM which i know very little about. #### Complete, minimal, self-contained example code that reproduces the issue Here is a mildly modified JSSlidshow example from the doc's. ```python import panel as pn from panel.reactive import ReactiveHTML import param class JSSlideshow(ReactiveHTML): index = param.Integer(default=0) _template = """<img id="slideshow" src="https://picsum.photos/800/300?image=${index}" onclick="${script('click')}"></img>""" _scripts = { "click": """ data.index += 1 console.log(event) """ } if __name__ == "__main__": pn.Row(JSSlideshow(width=800, height=300)).show() ``` #### Stack traceback and/or browser JavaScript console output The click `event.target` refers to `div.bk-Row` where i would expect it to refer to `img#slidwshow-p1005` ![image](https://github.com/holoviz/panel/assets/90776324/75e723e5-e138-4064-92ef-f26ccae59015)