I did some experiment on why this happened, it has to do with onAnimatedEvent being propagated to the lowest modal (depth 1) when closing depth 2 or more because it is a descendant of ModalAnimation. Please check the console on this sandbox to demonstrate my point https://codesandbox.io/s/modest-rain-z47nl

Because of the propagation, modal 1 is told to be closed.

I think we can stop the event to only target the caller div. What do you think?

It doesn't close all modals - it closes the lowest modal (with depth 1) - and the rest get closed because they're mounted within the modal you're displaying. The event gets stopped in that modal.

In the non-animated case, the same thing happens - except it goes with the last created (depth 2 or more) and then stops the propagation so it works as we'd like.

I'm not sure how to best approach this without adding a global state of the "stack" of visible modals somewhere. I had that implementation before but removed it to attempt a simplification.

cc: @imnotjames

• Always ensure you check if the full image is what you need or an alpine version of the image, this will save you a lot space.

• Always use multistage build for your images and deployments. https://docs.docker.com/develop/develop-images/multistage-build/

• Use standard secret management https://www.docker.com/blog/docker-secrets-management/

Is your feature request related to a problem? Please describe. WCGA spec is recommending that after closing modal focus should be brought back to the element that triggered it.

Describe a solution you'd like I've created a PR resolving that problem: #1821

In a project which I'm part of right now we're working towards compatibility with WCAG spec. When using current implementation of <Modal /> component I've seen that you've handled focus trap problem in very clean manner but there's one more thing that I believe that should be implemented to be even more compliant with the spec.

A Web page implements modal dialogs via scripting. When the trigger button is activated, a dialog opens and focus is set to the first interactive element in the dialog. As long as the dialog is open, focus is limited to the elements of the dialog. When the dialog is dismissed, focus returns to the button or the element following the button.

source: https://www.w3.org/WAI/WCAG21/Understanding/focus-order Examples point 3

This PR is implementing such refocus element that triggered modal after closing it mechanism.

there is a guy that already done it in his project check out : https://github.com/cesar3030/Sileau-IoT/blob/master/express-server/Dockerfile

I am interested in having the method in the project if it's possible

I'm using rn-css on a full cross-platform project (iOS, Android, web, MacOS, Linux, Windows). I had no issue with it so far.

I don't see what you mean by a runtime overhead. Do you have a concrete example?

Following up in #1820

<!-- Thank you for reporting an issue. Please note that an issue must include the information that is marked as REQUIRED below, or it may be closed. -->

The problem <!-- REQUIRED: A clear and concise description of the bug or problem. -->

When a Modal is shown, z-index priority is lost

How to reproduce <!-- REQUIRED: Create a test case by forking this template https://codesandbox.io/s/6lx6ql1w5r

Failing to include a reduced test case may result in the issue being closed, and will delay any potential fix. Your application or GitHub project is NOT considered a reduced test case. If the issue only affects certain browsers, providing screenshots is also helpful. --> Simplified test case: https://codesandbox.io/s/elated-tereshkova-xihgc

Steps to reproduce:

1. Tap "Show Modal"

Expected behavior <!-- REQUIRED: A clear and concise description of what you expected to happen.

Please check that the behaviour is not expected React Native behaviour by running your test case on iOS or Android using https://snack.expo.io. -->

Modal should show above the Top and Bottom buttons

Environment (include versions). Did this work in previous versions?

• React Native for Web (version): 0.14.8
• React (version): 16.13.1
• Browser: Chrome, Safari, Firefox

<!-- OPTIONAL:

Additional context Add any other context about the problem here. -->

z-index seems to be applied on the aria-modal, but might need to be applied to the animated div (reference)

@woodpav This with multiline works great to increase the size of the text input, but it, unfortunately, doesn't shrink it when you remove text.

Hi Guys This issue shouldn't be closed. I fully understand the logic behind what you wrote but in the end of the day my web app doesn't look good as expected and it prevent from a RNW to be perfect as it should. Do you know any way to bypass that? (global CSS doesn't work)

@necolas Running into same issue

My setup is also same:

react-native-web: 0.12.3
react-native: 0.62

I'm using create-react-app's default react-scripts, i.e not the react-native-web babel plugin. Any ideas on how to fix this?

@Sharcoux The main issue with them is that they add a one more level of runtime overhead and potential compatibility issues for web. In the end of the day we have only StyleSheet.create().

Well, wouldn't a solution such as styled-components or rn-css be the best fit for that?

This is indeed the goal

Can Linking open an External Browser when running react-native-web inside a Mobile App in its WebView? For eg: A react-native-web PWA running inside a React Native App's webview

Code

  const openLink = async url => {
    const supported = await Linking.canOpenURL(url)
    if (supported) {
      await Linking.openURL(url)
    }
  }

The above code however redirects to a page within the WebView and not from an external Browser (eg, open with Chrome, etc) Any workarounds for this issue?

How can I open an External Browser when running react-native-web inside a Mobile App in its WebView?

Code

  const openLink = async url => {
    const supported = await Linking.canOpenURL(url)
    if (supported) {
      await Linking.openURL(url)
    }
  }

The above code however redirects to a page within the WebView and not from an external Browser (eg, open with Chrome, etc)

Duplicates #1544

Is your feature request related to a problem? Please describe. <!-- A clear and concise description of what the problem is, e.g., I have an issue when [...] --> I need to make it so Modal has an higher z-index

Describe a solution you'd like <!-- A clear and concise description of what you want to happen. Add any considered drawbacks. --> getAnimationStyle in ModalAnimation might parse the style property and append styles.

Describe alternatives you've considered <!-- A clear and concise description of any alternative solutions or features you've considered. --> I might patch it with patch-package

Additional context <!-- Add any other context or screenshots about the feature request here. -->

Modals are appended to the document with a zindex. Please provide a test case for the problem, then I'll reopen https://github.com/necolas/react-native-web/blob/master/packages/react-native-web/src/exports/Modal/ModalContent.js#L59

It is common for mobile apps to have absolute positioned elements, be the top header, search bar, or buttons on the bottom

when a Modal is being shown we want to make sure all elements are covered "full screen"

using portals with no z-index we give all elements the same "stacking context", meaning we loose control of what is prioritized

How can I open an External Browser when running react-native-web inside a Mobile App in its WebView?

Code

  const openLink = async url => {
    const supported = await Linking.canOpenURL(url)
    if (supported) {
      await Linking.openURL(url)
    }
  }

The above code however redirects to a page within the WebView and not from an external Browser (eg, open with Chrome, etc)

Please describe the actual problem that leads you to believe you need to control the zindex

Refer to OpenAPI instead of the earlier name of Swagger