PP-1 Look at enabling resize of modal when contents update through HTMX

Problem/Motivation

I have been experimenting with updating a View Row plugin settings form. This is shown as a modal form within the Views UI. When I update the modal form fields, the modal resizes automatically. However, with HTMX, the modal contents are replaced, but the modal does not resize. In my case this is a problem, as the new fields can be completely hidden, and it's not obvious to the user that they need to scroll to find them.

Steps to reproduce

Proposed resolution

It would be great if HTMX could provide a way to resize the modal maybe something like:

    (new Htmx())
      ->post()
      ->select('#wrapper')
      ->target('#wrapper')
      ->swap('outerHTML')
      ->resize('#modal')
      ->applyTo($form['component_id']);

In my case, I was able to get the modal to resize with some JavaScript. I'm posting it here in case it's useful to anyone:

(function (Drupal, once) {
  Drupal.behaviors.htmxDialogResize = {
    attach(context) {
      once('htmx-dialog-resize-init', '#drupal-modal', context).forEach(() => {

        const handler = (event) => {
          const modal = document.querySelector('#drupal-modal');

          if (!modal) {
            return;
          }

          // Only react if swap happened inside the modal.
          if (!modal.contains(event.target)) {
            return;
          }

          Drupal.attachBehaviors(event.target);

          modal.style.height = 'auto';
          modal.style.maxHeight = '90vh';
          modal.style.overflowY = 'auto';

          window.dispatchEvent(new Event('resize'));
        };

        document.body.addEventListener('htmx:afterSwap', handler);

        // Remove listener when modal closes.
        const observer = new MutationObserver(() => {
          if (!document.body.contains(document.querySelector('#drupal-modal'))) {
            document.body.removeEventListener('htmx:afterSwap', handler);
            observer.disconnect();
          }
        });

        observer.observe(document.body, {
          childList: true,
          subtree: true
        });
      });
    }
  };
})(Drupal, once);

However, adding this to my module seems less than ideal, since HTMX is meant to reduce the amount of JavaScript, and this definitely adds more than the AJAX solution.

This may become easier when we move to native HTML modals rather than JQuery ones, as discussed in #2158943: Add a native dialog element to deprecate the jQuery UI dialog (though this issue has been open since 2013).

See also #3584529: Make props and slots update when component selected or changed, where I have both AJAX and HTMX versions of updating a Views Row plugin settings form.

This issue is waiting on #3555916: Update to htmx 4.

Remaining tasks

User interface changes

Introduced terminology

API changes

Data model changes

Release notes snippet