fix #652

In short, because components do not have a node in the model state tree
managed by the layout, keys for elements in the components were being
registered to the parent of the component rather than to a node for
the component which contained the elements.

The short-term solution was to make it so components wrap their
contents in a div without a key. The long-term solution is to
refactor the Layout() and give components a dedicated node in the
model state tree

Author: rmorshea

src/idom/core/component.py

@@ -57,9 +57,7 @@ def definition_id(self) -> int:
 
     def render(self) -> VdomDict:
         model = self._func(*self._args, **self._kwargs)
-        if isinstance(model, ComponentType):
-            model = {"tagName": "div", "children": [model]}
-        return model
+        return {"tagName": "div", "children": [model]}
 
     def __repr__(self) -> str:
         sig = inspect.signature(self._func)

tests/test_core/test_layout.py

@@ -10,6 +10,7 @@
 import idom
 from idom import html
 from idom.config import IDOM_DEBUG_MODE
+from idom.core.component import component
 from idom.core.dispatcher import render_json_patch
 from idom.core.hooks import use_effect, use_state
 from idom.core.layout import LayoutEvent
@@ -923,3 +924,56 @@ def SecondComponent():
 
         assert first_used_state.current == "first"
         assert second_used_state.current is None
+
+
+async def test_element_keys_inside_components_do_not_reset_state_of_component():
+    """This is a regression test for a bug.
+
+    You would not expect that calling `set_child_key_num` would trigger state to be
+    reset in any `Child()` components but there was a bug where that happened.
+    """
+
+    effect_calls_without_state = []
+    set_child_key_num = StaticEventHandler()
+    did_call_effect = asyncio.Event()
+
+    @component
+    def Parent():
+        state, set_state = use_state(0)
+        return html.div(
+            html.button(
+                {"onClick": set_child_key_num.use(lambda: set_state(state + 1))},
+                "click me",
+            ),
+            Child("some-key"),
+            Child(f"key-{state}"),
+        )
+
+    @component
+    def Child(child_key):
+        state, set_state = use_state(0)
+
+        @use_effect
+        async def record_if_state_is_reset():
+            if state:
+                return
+            effect_calls_without_state.append(child_key)
+            set_state(1)
+            did_call_effect.set()
+
+        return html.div(
+            child_key,
+            key=child_key,
+        )
+
+    with idom.Layout(Parent()) as layout:
+        await layout.render()
+        await did_call_effect.wait()
+        assert effect_calls_without_state == ["some-key", "key-0"]
+        did_call_effect.clear()
+
+        for i in range(1, 5):
+            await layout.deliver(LayoutEvent(set_child_key_num.target, []))
+            await layout.render()
+            assert effect_calls_without_state == ["some-key", "key-0"]
+            did_call_effect.clear()