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

fix(datetime): update active calendar display when value changes (#24244)

Browse Source
This commit is contained in:
Sean Perkins
2021-11-24 11:23:13 -05:00
committed by GitHub
parent 36a096c9b6
commit ec3bc52ff1
4 changed files with 138 additions and 19 deletions
Download Patch File Download Diff File Expand all files Collapse all files

19
core/src/components/picker-column-internal/picker-column-internal.tsx
View File

@ -24,6 +24,7 @@ import { PickerColumnItem } from './picker-column-internal-interfaces';
export class PickerColumnInternal implements ComponentInterface {
private destroyScrollListener?: () => void;
private hapticsStarted = false;
private isColumnVisible = false;
@State() isActive = false;
@ -64,12 +65,18 @@ export class PickerColumnInternal implements ComponentInterface {
@Watch('value')
valueChange() {
const { items, value } = this;
this.scrollActiveItemIntoView();
if (this.isColumnVisible) {
/**
* Only scroll the active item into view and emit the value
* change, when the picker column is actively visible to the user.
*/
const { items, value } = this;
this.scrollActiveItemIntoView();
const findItem = items.find(item => item.value === value);
if (findItem) {
this.ionChange.emit(findItem);
const findItem = items.find(item => item.value === value);
if (findItem) {
this.ionChange.emit(findItem);
}
}
}
@ -86,11 +93,13 @@ export class PickerColumnInternal implements ComponentInterface {
if (ev.isIntersecting) {
this.scrollActiveItemIntoView();
this.initializeScrollListener();
this.isColumnVisible = true;
} else {
if (this.destroyScrollListener) {
this.destroyScrollListener();
this.destroyScrollListener = undefined;
}
this.isColumnVisible = false;
}
}
new IntersectionObserver(visibleCallback, { threshold: 0.01 }).observe(this.el);