fix: move CRUD children back to light DOM and keep their order (#9253)

Author: web-padawan

packages/crud/src/vaadin-crud-mixin.js

@@ -384,26 +384,26 @@ export const CrudMixin = (superClass) =>
       this.$.dialog.$.overlay.addEventListener('vaadin-overlay-outside-click', this.__cancel);
       this.$.dialog.$.overlay.addEventListener('vaadin-overlay-escape-press', this.__cancel);
 
+      this._gridController = new GridSlotController(this);
+      this.addController(this._gridController);
+
+      // Init button controllers in `ready()` (not constructor) so that Flow can set `_noDefaultButtons`
+      this._newButtonController = new ButtonSlotController(this, 'new', 'primary', this._noDefaultButtons);
+      this.addController(this._newButtonController);
+
       this._headerController = new SlotController(this, 'header', 'h3', {
         initializer: (node) => {
           this._defaultHeader = node;
         },
       });
       this.addController(this._headerController);
 
-      this._gridController = new GridSlotController(this);
-      this.addController(this._gridController);
-
       this.addController(new FormSlotController(this));
 
-      // Init controllers in `ready()` (not constructor) so that Flow can set `_noDefaultButtons`
-      this._newButtonController = new ButtonSlotController(this, 'new', 'primary', this._noDefaultButtons);
       this._saveButtonController = new ButtonSlotController(this, 'save', 'primary', this._noDefaultButtons);
       this._cancelButtonController = new ButtonSlotController(this, 'cancel', 'tertiary', this._noDefaultButtons);
       this._deleteButtonController = new ButtonSlotController(this, 'delete', 'tertiary error', this._noDefaultButtons);
 
-      this.addController(this._newButtonController);
-
       // NOTE: order in which buttons are added should match the order of slots in template
       this.addController(this._saveButtonController);
       this.addController(this._cancelButtonController);
@@ -484,6 +484,9 @@ export const CrudMixin = (superClass) =>
         } else {
           this.$.editor.removeAttribute('tabindex');
         }
+      } else if (oldOpened) {
+        // Teleport form and buttons back to light DOM when closing overlay
+        this.__moveChildNodes(this);
       }
 
       this.__toggleToolbar();
@@ -522,7 +525,10 @@ export const CrudMixin = (superClass) =>
       // Teleport header node, form, and the buttons to corresponding slots.
       // NOTE: order in which buttons are moved matches the order of slots.
       [...nodes, ...buttons].forEach((node) => {
-        target.appendChild(node);
+        // Do not move nodes if the editor position has not changed
+        if (node.parentNode !== target) {
+          target.appendChild(node);
+        }
       });
 
       // Wait to set label until slotted element has been moved.

packages/crud/test/crud-editor.test.js

@@ -86,6 +86,13 @@ describe('crud editor', () => {
         expect(form.parentElement).to.equal(overlay);
       });
 
+      it(`should move ${type} form to crud after dialog closing with default editorPosition`, async () => {
+        crud._grid.activeItem = crud.items[0];
+        await nextRender();
+        btnCancel.click();
+        expect(form.parentElement).to.equal(crud);
+      });
+
       it(`should move ${type} form to crud when editorPosition set to bottom`, async () => {
         crud.editorPosition = 'bottom';
         crud._grid.activeItem = crud.items[0];

packages/crud/test/dom/__snapshots__/crud.test.snap.js

@@ -3,9 +3,6 @@ export const snapshots = {};
 
 snapshots["vaadin-crud host default"] = 
 `<vaadin-crud editor-position="">
-  <h3 slot="header">
-    Edit item
-  </h3>
   <vaadin-crud-grid
     slot="grid"
     style="touch-action: none;"
@@ -135,8 +132,6 @@ snapshots["vaadin-crud host default"] =
       </vaadin-crud-edit>
     </vaadin-grid-cell-content>
   </vaadin-crud-grid>
-  <vaadin-crud-form slot="form">
-  </vaadin-crud-form>
   <vaadin-button
     role="button"
     slot="new-button"
@@ -145,6 +140,11 @@ snapshots["vaadin-crud host default"] =
   >
     New item
   </vaadin-button>
+  <h3 slot="header">
+    Edit item
+  </h3>
+  <vaadin-crud-form slot="form">
+  </vaadin-crud-form>
   <vaadin-button
     aria-disabled="true"
     disabled=""