fix(Modal): Modal disabled background click focus fix. - Githubissues

cengage / react-magma

https://react-magma.cengage.com

MIT License

21 stars 13 forks source link

fix(Modal): Modal disabled background click focus fix. #1418

Closed chris-cedrone-cengage closed 2 months ago

chris-cedrone-cengage commented 2 months ago

Issue: # 1417

What I did

Restructured DOM order to help with focus issue while using isBackgroundClickDisabled prop.

Screenshots:

nested clickable

Checklist

[X] changeset has been added
[X] Pull request description is descriptive
[N/A] I have made corresponding changes to the documentation
[X] New and existing unit tests pass locally with my changes
[N/A] I have added tests that prove my fix is effective or that my feature works

How to test

Storybook
Open Background Click Disabled story
Verify you can now select text on the modal and click the buttons
Open Modal In A Modal story
Go into second modal and verify overlay is beneath it properly

changeset-bot[bot] commented 2 months ago

🦋 Changeset detected

Latest commit: de434cb3418d40c034a45b8c427ef5c6b3ea2264

The changes in this PR will be included in the next version bump.

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

github-actions[bot] commented 2 months ago

🚀 Deployed on https://docs-preview-1418--upbeat-sinoussi-f675aa.netlify.app

github-actions[bot] commented 2 months ago

🚀 Deployed on https://storybook-preview-1418--upbeat-sinoussi-f675aa.netlify.app

silvalaura commented 2 months ago

The background does not work as expected when the modal has a lot of content and needs to scroll: https://storybook-preview-1418--upbeat-sinoussi-f675aa.netlify.app/?path=/story/modal--long-content-with-scrolling

github-actions[bot] commented 2 months ago

🚀 Deployed on https://docs-preview-1418--upbeat-sinoussi-f675aa.netlify.app

github-actions[bot] commented 2 months ago

🚀 Deployed on https://storybook-preview-1418--upbeat-sinoussi-f675aa.netlify.app

silvalaura commented 2 months ago

Same problem 😿

github-actions[bot] commented 2 months ago

🚀 Deployed on https://docs-preview-1418--upbeat-sinoussi-f675aa.netlify.app

github-actions[bot] commented 2 months ago

🚀 Deployed on https://storybook-preview-1418--upbeat-sinoussi-f675aa.netlify.app

github-actions[bot] commented 2 months ago

🚀 Deployed on https://docs-preview-1418--upbeat-sinoussi-f675aa.netlify.app

github-actions[bot] commented 2 months ago

🚀 Deployed on https://storybook-preview-1418--upbeat-sinoussi-f675aa.netlify.app