fix: teleport CRUD form to overlay if some buttons are not set (#8372)

Author: web-padawan

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

@@ -502,14 +502,15 @@ export const CrudMixin = (superClass) =>
 
     /** @private */
     __moveChildNodes(target) {
-      const nodes = [this._headerNode, this._form, this._saveButton, this._cancelButton, this._deleteButton];
+      const nodes = [this._headerNode, this._form];
+      const buttons = [this._saveButton, this._cancelButton, this._deleteButton].filter(Boolean);
       if (!nodes.every((node) => node instanceof HTMLElement)) {
         return;
       }
 
       // Teleport header node, form, and the buttons to corresponding slots.
       // NOTE: order in which buttons are moved matches the order of slots.
-      nodes.forEach((node) => {
+      [...nodes, ...buttons].forEach((node) => {
         target.appendChild(node);
       });
 

packages/crud/test/crud-buttons.test.js

@@ -931,6 +931,7 @@ describe('crud buttons', () => {
     beforeEach(async () => {
       crud = document.createElement('vaadin-crud');
       crud._noDefaultButtons = true;
+      crud.items = [{ foo: 'bar' }];
       document.body.appendChild(crud);
       await nextRender();
     });
@@ -954,6 +955,14 @@ describe('crud buttons', () => {
     it('should not create default delete-button', () => {
       expect(crud.querySelector('[slot="delete-button"]')).to.be.null;
     });
+
+    it('should teleport form and header when no default buttons set', async () => {
+      crud.editedItem = { foo: 'baz' };
+      await nextRender();
+      const overlay = crud.$.dialog.$.overlay;
+      expect(crud._form.parentElement).to.equal(overlay);
+      expect(crud._headerNode.parentElement).to.equal(overlay);
+    });
   });
 
   describe('dataProvider', () => {