Collapsed Details Element causes JS Error for required fields

Problem/Motivation

If you have an empty required field within a collapsed details element, when you submit the form it appears as nothing at all happens.

If you open up chrome Devtools, you will see the following error.
An invalid form control with name='name_of_field'

Steps to reproduce

1. Create or visit a form with a collapsible details element with a required text field within it
2. Leave the field empty and ensure the details element is collapsed
3. Press Submit
4. Nothing happens
5. Refer to chrome devtools for error

Proposed resolution

Open the details element for invalid fields being targeted via JS

File: core/misc/details.js

  $('details input[required="required"]').on('invalid', (e) => {
    let $element = $(e.target).parent();
    handleFragmentLinkClickOrHashChange(e, $element);
  });

API changes

NA

Data model changes

NA

Release notes snippet

NA