Problem/Motivation

#3333481: Collapsed Details Element causes JS Error for required fields is a partial fix. There are elements that are form inputs that are not the input tag and can be required, eg textarea and select.

Steps to reproduce

Add a required text area to collapsed details element and get frustrated

Proposed resolution

Improve the JS to cover for this case.

Remaining tasks

User interface changes

None

Introduced terminology

N/a

API changes

None

Data model changes

None

Release notes snippet

N/a

Issue fork drupal-3595497

Command icon Show commands

Start within a Git clone of the project using the version control instructions.

Or, if you do not have SSH keys set up on git.drupalcode.org:

About issue forks

Comments

alexpott created an issue. See original summary.

alexpott’s picture

alexpott
he/they
Primary language English
Location 🇪🇺🌍
commented
Priority: Normal » Major

This is a major UX bug. It completely flummoxed a content editor on a site I maintain and for good reason they were pressing submit on a node save and nothing was happening.

alexpott opened merge request !16025

alexpott’s picture

alexpott
he/they
Primary language English
Location 🇪🇺🌍
commented
Status: Active » Needs review
alexpott’s picture

alexpott
he/they
Primary language English
Location 🇪🇺🌍
commented
Related issues: +#3333481: Collapsed Details Element causes JS Error for required fields
amitgoyal’s picture

amitgoyal commented
Status: Needs review » Reviewed & tested by the community

Reviewed MR !16025. The fix in details.js changes the CSS selector from 'details input[required]' to 'details :is(input, textarea, select)[required]', correctly extending the invalid-event handler to cover textarea and select required fields in addition to input.

The test form class is appropriately renamed to FormTestDetailsContainsRequiredFieldsForm and extended with new collapsed details elements containing required textarea and select fields. The FunctionalJavascript test is updated to cover all three field types.

PHPStan baseline entries are cleaned up.

Ran FormGroupingElementsTest locally (5 tests, 40 assertions, all pass).

LGTM.

godotislate closed merge request !16025

  • godotislate committed d725d528 on 11.x 
    fix: #3595497 Collapsed Details Element causes JS Error for required...

  • godotislate committed 0b9591fc on main 
    fix: #3595497 Collapsed Details Element causes JS Error for required...
godotislate’s picture

godotislate
he/him
commented
Version: main » 11.4.x-dev
Status: Reviewed & tested by the community » Patch (to be ported)

Committed and pushed 0b9591f to main and d725d52 to 11.x. Thanks!

Discussed with @longwave, and this is fine for backport to 11.4x. But there's a merge conflict in phpstan baseline for 11.4.x, so setting to Patch to be ported.

smustgrave made their first commit to this issue’s fork.

smustgrave opened merge request !16318

smustgrave’s picture

smustgrave commented
Status: Patch (to be ported) » Reviewed & tested by the community

pretty clean backport, little fuzziness

  • godotislate committed 04fa987a on 11.4.x 
    fix: #3595497 Collapsed Details Element causes JS Error for required...
godotislate’s picture

godotislate
he/him
commented
Status: Reviewed & tested by the community » Fixed

Committed 04fa987 and pushed to 11.4.x. Thanks!

Now that this issue is closed, review the contribution record.

As a contributor, attribute any organization that helped you, or if you volunteered your own time.

Maintainers, credit people who helped resolve this issue.