javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2025-11-09 08:09:32 +08:00
Code Issues Packages Projects Releases Wiki Activity

fix(datetime): fix datetime-ready class sometimes not being added due to race condition (#24385)

Browse Source
This commit is contained in:
Amanda Smith
2021-12-14 10:44:50 -06:00
committed by GitHub
parent a5d56b3d5a
commit e7d06743ae
1 changed files with 10 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

13
core/src/components/datetime/datetime.tsx
View File

@ -10,7 +10,7 @@ import {
import { getIonMode } from '../../global/ionic-global'; import { getIonMode } from '../../global/ionic-global';
import { Color, DatetimeChangeEventDetail, DatetimeParts, Mode, StyleEventDetail } from '../../interface'; import { Color, DatetimeChangeEventDetail, DatetimeParts, Mode, StyleEventDetail } from '../../interface';
import { startFocusVisible } from '../../utils/focus-visible'; import { startFocusVisible } from '../../utils/focus-visible';
import { getElementRoot, renderHiddenInput } from '../../utils/helpers'; import { getElementRoot, raf, renderHiddenInput } from '../../utils/helpers';
import { createColorClasses } from '../../utils/theme'; import { createColorClasses } from '../../utils/theme';
import { PickerColumnItem } from '../picker-column-internal/picker-column-internal-interfaces'; import { PickerColumnItem } from '../picker-column-internal/picker-column-internal-interfaces';
@ -870,7 +870,14 @@ export class Datetime implements ComponentInterface {
}); });
} }
visibleIO = new IntersectionObserver(visibleCallback, { threshold: 0.01 }); visibleIO = new IntersectionObserver(visibleCallback, { threshold: 0.01 });
visibleIO.observe(this.el);
/**
* Use raf to avoid a race condition between the component loading and
* its display animation starting (such as when shown in a modal). This
* could cause the datetime to start at a visibility of 0, erroneously
* triggering the `hiddenIO` observer below.
*/
raf(() => visibleIO?.observe(this.el));
/** /**
* We need to clean up listeners when the datetime is hidden * We need to clean up listeners when the datetime is hidden
@ -891,7 +898,7 @@ export class Datetime implements ComponentInterface {
}); });
} }
hiddenIO = new IntersectionObserver(hiddenCallback, { threshold: 0 }); hiddenIO = new IntersectionObserver(hiddenCallback, { threshold: 0 });
hiddenIO.observe(this.el); raf(() => hiddenIO?.observe(this.el));
/** /**
* Datetime uses Ionic components that emit * Datetime uses Ionic components that emit