mirror of
https://github.com/ionic-team/ionic-framework.git
synced 2026-03-13 10:22:08 +08:00
Issue number: resolves #27200 --------- <!-- 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. --> A bug occurs when you click twice quickly to open an overlay with a small timeout. In some cases, the overlay will present, dismiss, present, then not dismiss the second time, getting stuck open. You can reproduce manually this by grabbing the test HTML included in this PR and putting it in a branch that doesn't include a fix. ## What is the new behavior? <!-- Please describe the behavior or changes that are being added by this PR. --> - When an overlay with a short timeout is triggered twice quickly, it will open-close-open-close. - The behavior is the same for all overlay components ## 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. --> Relevant links: * https://github.com/ionic-team/ionic-framework/issues/27200 * https://ionic-cloud.atlassian.net/browse/FW-4374 * https://ionic-cloud.atlassian.net/browse/FW-4053 I'm not sure how to write an automated test for this bug due to the short timeout required. You can manually test the fix in [this Stackblitz](https://stackblitz.com/edit/g1kjci?file=package.json) by changing the Ionic version between 7.3.1 and 7.3.2-dev.11693262117.17edbf6d --------- Co-authored-by: Liam DeBeasi <liamdebeasi@users.noreply.github.com>
36 lines
1013 B
TypeScript
36 lines
1013 B
TypeScript
/**
|
|
* Creates a lock controller.
|
|
*
|
|
* Claiming a lock means that nothing else can acquire the lock until it is released.
|
|
* This can momentarily prevent execution of code that needs to wait for the earlier code to finish.
|
|
* For example, this can be used to prevent multiple transitions from occurring at the same time.
|
|
*/
|
|
export const createLockController = () => {
|
|
let waitPromise: Promise<void>;
|
|
|
|
/**
|
|
* When lock() is called, the lock is claimed.
|
|
* Once a lock has been claimed, it cannot be claimed again until it is released.
|
|
* When this function gets resolved, the lock is released, allowing it to be claimed again.
|
|
*
|
|
* @example ```tsx
|
|
* const unlock = await this.lockController.lock();
|
|
* // do other stuff
|
|
* unlock();
|
|
* ```
|
|
*/
|
|
const lock = async () => {
|
|
const p = waitPromise;
|
|
let resolve!: () => void;
|
|
waitPromise = new Promise((r) => (resolve = r));
|
|
if (p !== undefined) {
|
|
await p;
|
|
}
|
|
return resolve;
|
|
};
|
|
|
|
return {
|
|
lock,
|
|
};
|
|
};
|