When adding a media item via the modal, display form errors inline within the modal

Created on 21 September 2023, over 1 year ago

Problem/Motivation

When an editor adds a media item via the modal and encounters an error, for example skipping the required Alternative Text field, the error message displays on the page, behind the modal.

This causes usability issues since the error message is obscured by the modal, leaving the editor confused as to why the form does not save.

Steps to reproduce

  1. Add a media item via a modal, eg: edit an existing Image media item.
  2. Save the form without including alternative text.

Watch this video as an example.

Proposed resolution

Display error messages within the modal.

Remaining tasks

  1. Get core maintainer approval of the resolution
  2. Implement the resolution
  3. Test
  4. Deploy

User interface changes

Error messages from a modal form would display within the modal, rather than on the page the modal appears from.

API changes

None

Data model changes

None

Release notes snippet

TBD

Feature request
Status

Active

Version

10.1

Component
Media 

Last updated about 4 hours ago

Created by

🇺🇸United States cedewey Denver, CO

Live updates comments and jobs are added and updated live.
  • Usability

    Makes Drupal easier to use. Preferred over UX, D7UX, etc.

Sign in to follow issues

Comments & Activities

  • Issue created by @cedewey
  • Status changed to Postponed: needs info about 1 year ago
  • 🇫🇮Finland lauriii Finland

    I don't have the option to edit an existing media item from the media widget. I'm wondering if you have installed a module or applied a patch that is adding the edit link?

  • Had the same issue on Drupal 10.3 when the user did not select any items and hit the submit button on the modal. The form state error messages were rendered behind the modal, so the user would have to close the modal first to be able to read the errors.

    Even with the modal having a #media-library-messages element, that was not used when the errors were handled in the $form_state object.
    Other issue with the container mentioned above was that on smaller screens it appeared above the rendered views, not on the modal top. The autofocus on the media add form still prevented users from getting the error message in a visible area.

    In the attached solution, these are the modifications made:
    1. Relocated the render array of #media-library-messages to the media library's AddFormBase.php to display them right after the form with autofocus.
    2. Added an extra check for the modal form's Ajax callback to check if the form had any errors and update the response accordingly with a MessageCommand to display errors in the modal.
    3. Removed all the errors from the Drupal::messenger() to avoid displaying duplicated messages when the modal is closed.

    This solution might require some improvements but it could be a good starting point.

  • Status changed to Needs review 15 days ago
  • 🇺🇸United States smustgrave

    Thanks for working on this

    So fixes should be placed in MRs vs patches as tests don't run.

    Also will need some test coverage

    Thanks!

Production build 0.71.5 2024