Add focus behaviour for media widget with max elements

Problem/Motivation

There is an issue with the focus and scroll behaviour for existing nodes with the maximum number of allowed items, because the 'Add media' button - which has the correct logic and behaviour - is not present on the form.

Screenshot of the media library widget when max values are selected:

By default, if the node edit form has a media library widget that has max values, the form focuses on and scrolls to the media item when loaded. I believe this is caused by the intentional adding of focus to the item when the modal is closed. So when creating a new node, this flow works correctly:

• Navigate to the 'Add media' button and click
• Choose a media item
• Click 'Insert selected'
• Focus is set to the item as expected and you can continue navigating through the form

But this breaks the form for existing nodes with the max values, where there is no button, because on loading the form, the focus is set to the media item.

Proposed resolution

The form by default should focus on the top of the page, regardless of whether the 'Add media' button is present. And it should also keep focus on the media item when the modal has been opened and then closed, rather than reverting to the top of the form.

Remaining tasks

Create a patch for to ensure that:

1. When editing an existing node with a media library widget that has the maximum allowed values, ensure focus starts at the top of the form by default
2. When the media library widget modal is opened and closed, keep focus on the media library widget or selected item

User interface changes

Focus and scroll changes as described above.

API changes

None.

Data model changes

None.

Original post:

Problem/Motivation

Node edit page immediately scrolls down to the last media library widget on page.
It is caused by focus() call in media_library.widget.es6.js:

$('.js-media-library-open-button[data-disabled-focus="true"]', context)
  .once('media-library-disable')
  .each(function() {
    $(this).focus();

Proposed resolution

Update widget JS to prevent autoscroll.
$(this).focus({preventScroll: true});

User interface changes

Node edit page will no longer immediately scroll to media library widget on page load.