Bug in Element Key Identity

[rmorshea]

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:

• This might be a result of this bug: Wrong Patch Generated stefankoegl/python-json-patch#138
• Changing this line to 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.