Drupal: Do not put buttons into modal/dialog button pane

drupal_dialog_buttonpane.md

Do not put buttons into modal/dialog button pane

See https://www.drupal.org/project/drupal/issues/3089751 & https://www.drupal.org/forum/support/theme-development/2018-12-08/prevent-form-actions-from-appearing-in-a-modal-dialog

In mytheme.libraries.yml

dialog.ajax:
  js:
    path/to/js/dialog.ajax.js: { minified: true }

In mytheme.info.yml

libraries-extend:
  core/drupal.dialog.ajax:
    - mytheme/dialog.ajax

Create a file called path/to/js/dialog.ajax.js in your theme, with the following content :

(function (Drupal) {
  // Override core/dialog.ajax prepareDialogButtons behaviors
  Drupal.behaviors.dialog.prepareDialogButtons = function prepareDialogButtons($dialog) {
    // Do nothing = do not put buttons into dialog footer
    return [];
  }
})(Drupal);

Thank you for posting this. I was pulling what remains of my hair out. 🍻

🍻 Thanks!

I've come up with a better solution, you can selectively add a class to your $form['actions']['#attributes']['class'][] = 'disable-dialog-buttons'; to disable this functionality on a per form basis...

(function ($, Drupal) {
  Drupal.behaviors.dialog.prepareDialogButtons = function prepareDialogButtons($dialog) {
    // Check for a class in the form actions container to disable this
    // functionality
    if ($dialog.find('.form-actions.disable-dialog-buttons').length) {
      return [];
    }

    var buttons = [];
    var $buttons = $dialog.find('.form-actions input[type=submit], .form-actions a.button');
    $buttons.each(function () {
      var $originalButton = $(this).css({
        display: 'none'
      });
      buttons.push({
        text: $originalButton.html() || $originalButton.attr('value'),
        class: $originalButton.attr('class'),
        click: function click(e) {
          if ($originalButton.is('a')) {
            $originalButton[0].click();
          } else {
            $originalButton.trigger('mousedown').trigger('mouseup').trigger('click');
            e.preventDefault();
          }
        }
      });
    });
    return buttons;
  }
})(jQuery, Drupal);