GithubHelp home page GithubHelp logo

Comments (10)

just-boris avatar just-boris commented on July 23, 2024

Is this problem related to this issue theKashey/react-focus-lock#188 (already fixed, even though github displays it as open).

If not, could you provide a reproducible example so we can do a proper investigation?

from components.

AJStacy avatar AJStacy commented on July 23, 2024

This is unrelated to the focus-lock issue. This issue surrounds how Modal windows (and Table Preferences) inject classes, styles, and child nodes on the document.body tag by default.

With Modal components you can set the modalRoot (https://cloudscape.design/components/modal/?tabId=api) which changes where the underlying React Portal injects the DOM nodes for a modal, but the component still attempts to apply classes and styles to the document <body> tag.

Ideally when you change the modalRoot on a Modal component it would also change the target for the scroll locking styles and classes.

I will update the ticket with screenshots showing the behavior.

from components.

just-boris avatar just-boris commented on July 23, 2024

Could you share a reproducible demo on codesandbox (starting off this template), so we can make a deeper investigation?

from components.

AJStacy avatar AJStacy commented on July 23, 2024

Here is a link to the reproduced issue: https://codesandbox.io/s/modalrootdemo-hlz2j8

from components.

just-boris avatar just-boris commented on July 23, 2024

Checked the demo. What do you find expected and not expected in this demo? Not in terms of class placement, but in the end user experience?

from components.

AJStacy avatar AJStacy commented on July 23, 2024

If you read the backstory section above, I need to be able to restrict all style, class, and DOM changes to be within a Web Component for purposes of use with a micro-frontend architecture. Styles and dom nodes applied to the top-level body tag are unacceptable for these kinds of integrations.

In my current use case, we will have multiple wrapped react applications running side-by-side each using Cloudscape Design. If both apps try to control the body simultaneously it will not only conflict with the shell application, but the remote applications can conflict.

The desired behavior would be for the element specified as the modalRoot to also be the target for scroll locking styles.

from components.

just-boris avatar just-boris commented on July 23, 2024

We only add styles to <body> along with using position:fixed to display the modal full-screen and prevent the underlying document from scrolling.

It by design has to be attached there, can't see an alternative.

P.S. modal dialogs are by their definition are blocking all underlying content. So using a monolith or a distributed frontend does not matter for the final UX.

from components.

AJStacy avatar AJStacy commented on July 23, 2024

@just-boris , respectfully, this 100% can be accomplished. In order to help illustrate the problem and solution, I've went ahead and forked cloudscape components. I have created a branch with the small number of changes that would be required to accommodate this issue. I've also created a demo page where you can simulate the experience I am talking about.

https://github.com/cloudscape-design/components/pull/444/files

from components.

DaemonCahill avatar DaemonCahill commented on July 23, 2024

Hi @AJStacy!

We discussed this issue internally this morning. On a purely technical level we understand why you want to encapsulate all component behavior to a given shadow root. That being said, we have several features throughout Cloudscape that necessitate breaking the encapsulation between components. It is still unclear to us what specific collision you expect might happen on the body element with multiple micro-frontend applications. By design the modal component should render all other content on the page inert which should effectively prevent this from happening. Which brings us to the second proposed solution allowing for opting out of the scroll lock. At the moment we don't have any intention of implementing this as an option for our users.

from components.

just-boris avatar just-boris commented on July 23, 2024

Closing due to inactivity. Feel free to reopen with additional comments

from components.

Related Issues (20)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.