mirror of https://github.com/ionic-team/ionic-framework.git synced 2025-08-23 22:17:40 +08:00

Files

Liam DeBeasi 7b551fd54b fix(react): overlay content is shown with hook (#28109 )

Issue number: resolves #28102

---------

<!-- Please do not submit updates to dependencies unless it fixes an
issue. -->

<!-- Please try to limit your pull request to one type (bugfix, feature,
etc). Submit multiple pull requests if needed. -->

## What is the current behavior?
<!-- Please describe the current behavior that you are modifying. -->

When one modal is added and another modal is removed, the modal that is
removed does not account for the newly added modal when updating the
overlay context in React. As a result, the inner contents of the newly
added modal is not mounted.

We originally tried to fix this in
https://github.com/ionic-team/ionic-framework/pull/24553, but the fix
was not complete. While storing the latest information in a React ref
was correct, the way we updated the ref was done in a way such that data
was still stale.

In particular, the `overlaysRef` is updated whenever `IonOverlayManager`
is re-rendered. State updates are batched, so updating the state twice
in quick succession does not necessarily result in 2 separate renders.

## What is the new behavior?
<!-- Please describe the behavior or changes that are being added by
this PR. -->

- We need to make sure the ref is updated synchronously before any
render so that `addOverlay` and `removeOverlay` always have access to
the latest data.
- Added a test

## Does this introduce a breaking change?

- [ ] Yes
- [x] No

<!-- If this introduces a breaking change, please describe the impact
and migration path for existing applications below. -->


## Other information

<!-- Any other information that is important to this PR such as
screenshots of how the component looks before and after the change. -->

Dev build: `7.3.3-dev.11693592339.18e000af`

---------

Co-authored-by: Maria Hutt <thetaPC@users.noreply.github.com>
Co-authored-by: Amanda Johnston <90629384+amandaejohnston@users.noreply.github.com>

2023-09-05 21:04:27 +00:00

public

test(react): migrate to builder architecture (#26959 )

2023-03-17 16:21:21 -04:00

scripts

chore: sync script deletes existing tgz packages (#27045 )

2023-04-05 20:13:43 +00:00

src

fix(react): overlay content is shown with hook (#28109 )

2023-09-05 21:04:27 +00:00

tests/e2e

fix(react): overlay content is shown with hook (#28109 )

2023-09-05 21:04:27 +00:00

.gitignore

test(react): migrate to builder architecture (#26959 )

2023-03-17 16:21:21 -04:00

cypress.config.ts

test(react): migrate to builder architecture (#26959 )

2023-03-17 16:21:21 -04:00

ionic.config.json

test(react): migrate to builder architecture (#26959 )

2023-03-17 16:21:21 -04:00

README.md

test(react): migrate to builder architecture (#26959 )

2023-03-17 16:21:21 -04:00

tsconfig.json

test(react): migrate to builder architecture (#26959 )

2023-03-17 16:21:21 -04:00

README.md

React Test App

Getting Started

Setup

Make sure you are using the latest versions of node and npm. If you do not have these, download the installer for the LTS version of Node.js. This is the best way to also install npm.

Building Dependencies

Navigate to the core, packages/react and packages/react-router directories and build each of them:

npm i
npm run build

Then, install dependencies from this directory for this test app:

npm i

Syncing Changes

When making changes to the React package, run the following from this directory to sync the changes:

npm run sync

Previewing App

To preview this app locally, run the following from this directory:

npm start

Running Tests

To run the e2e tests, run the following from this directory:

npm run build
npm run e2e