The following example is deeply flawed even when running with IDOM_FEATURE_INDEX_AS_DEFAULT_KEY=1:
from idom import component, html, run, use_state
@component
def Test():
data, set_data = use_state(["one", "two", "three"])
def make_handle_delete_click(index):
def handle_click(event):
set_data(data[:index] + data[index + 1 :])
return handle_click
return html.ul(
[
html.li(
value,
html.button({"onClick": make_handle_delete_click(index)}, "delete"),
key=value,
)
for index, value in enumerate(data)
]
)
run(Test)Clicking the first delete button causes a client-side error:
index-6ddd8323.js:322 Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'eventHandlers')
at applyOperation (index-6ddd8323.js:322)
at Object.applyPatch (index-6ddd8323.js:343)
at applyNonMutativePatch (server-d63eddfd.js:48)
at server-d63eddfd.js:32
at server-d63eddfd.js:575
If you place the ul element inside a div even more strange behaviors occur regardless of which button is clicked.
Having investigated a bit it appears related to two different issues:
The following example is deeply flawed even when running with
IDOM_FEATURE_INDEX_AS_DEFAULT_KEY=1:Clicking the first delete button causes a client-side error:
If you place the
ulelement inside adiveven more strange behaviors occur regardless of which button is clicked.Having investigated a bit it appears related to two different issues:
self._event_handlers.pop(target, None)seems to fix things. With that said, I don't know why we're trying to delete the same event handler twice so it needs to be investigated more.