Various fixes for ReactiveHTML children (#2092)

* Ensure children match size of container

* Fix updates of ReactiveHTML children

* Allow _dom_events declare whether to sync

* Fix model property updates

panel/models/reactive_html.ts

@@ -195,8 +195,10 @@ export class ReactiveHTMLView extends PanelHTMLBoxView {
 
   after_layout(): void {
     super.after_layout()
-    for (const child_view of this.child_views)
+    for (const child_view of this.child_views) {
+      child_view.resize_layout()
       this._align_view(child_view)
+    }
   }
 
   private _align_view(view: any): void {

panel/pane/base.py

@@ -11,6 +11,7 @@
 from ..io import init_doc, push, state, unlocked
 from ..layout import Panel, Row
 from ..links import Link
+from ..models import ReactiveHTML as _BkReactiveHTML
 from ..reactive import Reactive
 from ..viewable import Layoutable, Viewable
 from ..util import param_reprs
@@ -159,6 +160,13 @@ def _update_object(self, ref, doc, root, parent, comm):
                     else:
                         raise ValueError
                     new_model = (new_model,) + parent.children[index][1:]
+                elif isinstance(parent, _BkReactiveHTML):
+                    for node, children in parent.children.items():
+                        if old_model in children:
+                            index = children.index(old_model)
+                            new_models = list(children)
+                            new_models[index] = new_model
+                            break
                 else:
                     index = parent.children.index(old_model)
             except ValueError:
@@ -168,7 +176,10 @@ def _update_object(self, ref, doc, root, parent, comm):
                              'time the panel is being updated.' %
                              (type(self).__name__, old_model, new_model))
             else:
-                parent.children[index] = new_model
+                if isinstance(parent, _BkReactiveHTML):
+                    parent.children[node] = new_models
+                else:
+                    parent.children[index] = new_model
 
         from ..io import state
         ref = root.ref['id']

panel/reactive.py

@@ -1118,9 +1118,12 @@ def _init_params(self):
         return params
 
     def _get_events(self):
-        events = {
-            node: {e: True for e in events} for node, events in self._dom_events.items()
-        }
+        events = {}
+        for node, node_events in self._dom_events.items():
+            if isinstance(node_events, list):
+                events[node] = {e: True for e in node_events}
+            else:
+                events[node] = node_events
         for node, evs in self._event_callbacks.items():
             events[node] = node_events = events.get(node, {})
             for e in evs:
@@ -1219,15 +1222,16 @@ def _set_on_model(self, msg, root, model):
             del self._changing[root.ref['id']]
 
     def _update_model(self, events, msg, root, model, doc, comm):
+        child_params = self._parser.children.values()
         model_msg = {
             prop: msg.pop(prop) for prop, v in list(msg.items())
-            if prop in self._parser.children.values()
+            if prop in child_params or prop in Reactive.param
         }
         if model_msg:
-            old_children = {key: events[key].old for key in model_msg}
-            model_msg = {
-                'children': self._get_children(doc, root, model, comm, old_children)
-            }
+            old_children = {key: events[key].old for key in model_msg if key in child_params}
+            children = self._get_children(doc, root, model, comm, old_children)
+            model_msg = {p: model_msg.pop(p) for p in Reactive.param if p in model_msg}
+            model_msg = dict(model_msg, children=children)
             self._set_on_model(model_msg, root, model)
         if not msg:
             return