Problem/Motivation

Some elements of modal dialogs are not available to clicking under the Stark theme.

How to reproduce:

  • Install Drupal site with Minimal profile
  • Enable the Stark theme and set to default.
  • Enable the form_api_example module from Examples for Developers. (There might be a better modal in core to demo with, but it's tricky with the next step.)
  • Log out.
  • Visit the modal form example in Examples: examples/form-api-example/modal-form/nojs
  • Click on 'See this form as a modal.'
  • You'll see that the modal is greyed-out, as if it's behind the grey-out div. See image.
  • Try to click on the close box or the submit button. Focus will shift to the text input box, but the clicks won't make it to the close or submit buttons.
  • Hit escape. This will close the modal.
  • Click on 'See this form as a modal' again.
  • Now the modal is not behind the grey div and behaves normally.

Looks like this:

Proposed resolution

Determine the cause.

Fix it.

Patch it.

Remaining tasks

User interface changes

API changes

Data model changes

Members fund testing for the Drupal project. Drupal Association Learn more

Comments

Mile23 created an issue. See original summary.

Mile23’s picture

This bug prevents using functional JavaScript tests for modal dialogs without a work-around. There's a test to demonstrate this at #2831506-12: Minimal profile disallows modal AJAX tests under JavascriptTestBase

Mile23’s picture

Issue summary: View changes
droplet’s picture

The steps above can't reproduce the bug.

Above screenshot & when I did it via testbot, the modal is grey-out behind.

droplet’s picture

Issue summary: View changes
Status: Active » Needs review
Issue tags: +JavaScript
FileSize
1.53 KB

It must installed with the Minimal profile.

Yo! Found my another issue:
https://www.drupal.org/project/drupal/issues/2499035

@see my patch comment, that explained. (It can be done with CSS, add CSS dependency to core.library.)

We can also do another strict comparison and set `zIndex + 1` when those 2 elements zIndex is equal.

I will leave someone has more time to pick it up. Thanks!

(BTW, this is a JavaScript (the Dialog) issue IMO, not theme specialized)

Mile23’s picture

Status: Needs review » Reviewed & tested by the community

Thanks!

In my case it didn't need the minimal profile, but I discovered it trying to work with the minimal profile in tests: #2831506: Minimal profile disallows modal AJAX tests under JavascriptTestBase

The patch in #5 does solve the problem (repro steps in the IS don't show the greyed-out dialog).

I'm pretty sure the point of stark is to not include core.library, but maybe someone knows better.

Mile23’s picture

Status: Reviewed & tested by the community » Needs review
FileSize
4.51 KB
2.98 KB

Jumping the gun a little bit. Here's #5 with the test from #2831506: Minimal profile disallows modal AJAX tests under JavascriptTestBase

Version: 8.5.x-dev » 8.6.x-dev

Drupal 8.5.0-alpha1 will be released the week of January 17, 2018, which means new developments and disruptive changes should now be targeted against the 8.6.x-dev branch. For more information see the Drupal 8 minor version schedule and the Allowed changes during the Drupal 8 release cycle.

Mile23’s picture

Patch still applies to 8.6.x. Re-uploading #7 and also a test-only version.

Per #5 it's a JS issue and not the theme, but it only appears in stark because stark doesn't have any CSS.

Also the testing profile will introduce a regression if/when #2352949: [meta] Remove Classy testing profile dependency happens.

Status: Needs review » Needs work

The last submitted patch, 9: 2936535_7_tests_only.patch, failed testing. View results

droplet’s picture