In app/javascript/blacklight/modal.js, the documentation says:

Link or forms inside the modal will ordinarily cause page loads
when they are triggered. However, if you'd like their results
to stay within the modal, just add data-blacklight-modal="preserve"
to the link or form.

This works fine for links, but it doesn't work for form submission. When a form is submitted, a page load is triggered.

This seems to be because the JS references Blacklight.modal.preserveFormSelector when trying to set the event handler for form submission:

https://github.com/projectblacklight/blacklight/blob/master/app/javascript/blacklight/modal.js#L173-L174

$('body').on('submit', Blacklight.modal.triggerFormSelector + ', ' + Blacklight.modal.preserveFormSelector,
    Blacklight.modal.modalAjaxFormSubmit);

But Blacklight.modal.preserveFormSelector is never defined in the code.

This should be an easy fix, just need to add a line like ...

Blacklight.modal.preserveFormSelector = Blacklight.modal.modalSelector + ' form[data-blacklight-modal~=preserve]';

... to the section where selectors are defined (L80-L99).

(PS. I'm unsure of whether this change would need to be replicated in app/assets/javascripts/blacklight/blacklight.js or whether there is some automated compilation?)