From bcf6bdc44f7976b6b155057b6ed8091fd985c520 Mon Sep 17 00:00:00 2001 From: Liam DeBeasi Date: Wed, 30 Jun 2021 13:38:43 -0400 Subject: [PATCH 1/4] close overlay --- core/src/components/datetime/datetime.tsx | 2 +- .../src/components/datetime/test/cover/e2e.ts | 15 ++++ .../components/datetime/test/cover/index.html | 69 +++++++++++++++++++ 3 files changed, 85 insertions(+), 1 deletion(-) create mode 100644 core/src/components/datetime/test/cover/e2e.ts create mode 100644 core/src/components/datetime/test/cover/index.html diff --git a/core/src/components/datetime/datetime.tsx b/core/src/components/datetime/datetime.tsx index 727eead221a..06d30ffe8f3 100644 --- a/core/src/components/datetime/datetime.tsx +++ b/core/src/components/datetime/datetime.tsx @@ -1076,7 +1076,7 @@ export class Datetime implements ComponentInterface { this.cancel(true)}>{this.cancelText} - this.confirm()}>{this.doneText} + this.confirm(true)}>{this.doneText} diff --git a/core/src/components/datetime/test/cover/e2e.ts b/core/src/components/datetime/test/cover/e2e.ts new file mode 100644 index 00000000000..bb6fbb1978a --- /dev/null +++ b/core/src/components/datetime/test/cover/e2e.ts @@ -0,0 +1,15 @@ +import { newE2EPage } from '@stencil/core/testing'; + +test('values', async () => { + const page = await newE2EPage({ + url: '/src/components/datetime/test/values?ionic:_testing=true' + }); + + const screenshotCompares = []; + + screenshotCompares.push(await page.compareScreenshot()); + + for (const screenshotCompare of screenshotCompares) { + expect(screenshotCompare).toMatchScreenshot(); + } +}); diff --git a/core/src/components/datetime/test/cover/index.html b/core/src/components/datetime/test/cover/index.html new file mode 100644 index 00000000000..f0a00dbbc43 --- /dev/null +++ b/core/src/components/datetime/test/cover/index.html @@ -0,0 +1,69 @@ + + + + + Datetime - Cover + + + + + + + + + + + + Datetime - Cover + + + + + Birthday + Select a date + + + + + + + + + + + From 7194c5215c3a02d5630b83c1107f64430f8c6153 Mon Sep 17 00:00:00 2001 From: Liam DeBeasi Date: Wed, 30 Jun 2021 13:39:10 -0400 Subject: [PATCH 2/4] cleanup --- core/src/components/datetime/test/cover/e2e.ts | 15 --------------- 1 file changed, 15 deletions(-) delete mode 100644 core/src/components/datetime/test/cover/e2e.ts diff --git a/core/src/components/datetime/test/cover/e2e.ts b/core/src/components/datetime/test/cover/e2e.ts deleted file mode 100644 index bb6fbb1978a..00000000000 --- a/core/src/components/datetime/test/cover/e2e.ts +++ /dev/null @@ -1,15 +0,0 @@ -import { newE2EPage } from '@stencil/core/testing'; - -test('values', async () => { - const page = await newE2EPage({ - url: '/src/components/datetime/test/values?ionic:_testing=true' - }); - - const screenshotCompares = []; - - screenshotCompares.push(await page.compareScreenshot()); - - for (const screenshotCompare of screenshotCompares) { - expect(screenshotCompare).toMatchScreenshot(); - } -}); From 6ae6179a4aa9729fc10be084cef56189177c431c Mon Sep 17 00:00:00 2001 From: Liam DeBeasi Date: Wed, 30 Jun 2021 14:26:23 -0400 Subject: [PATCH 3/4] fix overlay flicker --- core/src/components/datetime/datetime.tsx | 77 ++++++++++++++++++++--- 1 file changed, 68 insertions(+), 9 deletions(-) diff --git a/core/src/components/datetime/datetime.tsx b/core/src/components/datetime/datetime.tsx index 06d30ffe8f3..89ca0f5f1f9 100644 --- a/core/src/components/datetime/datetime.tsx +++ b/core/src/components/datetime/datetime.tsx @@ -87,6 +87,11 @@ export class Datetime implements ComponentInterface { private parsedYearValues?: number[]; private parsedDayValues?: number[]; + private destroyCalendarIO?: Function; + private destroyKeyboardMO?: Function; + private destroyTimeScroll?: Function; + private destroyMonthAndYearScroll?: Function; + private minParts?: any; private maxParts?: any; @@ -441,6 +446,10 @@ export class Datetime implements ComponentInterface { const mo = new MutationObserver(checkCalendarBodyFocus); mo.observe(calendarBodyRef, { attributeFilter: ['class'], attributeOldValue: true }); + this.destroyKeyboardMO = () => { + mo?.disconnect(); + } + /** * We must use keydown not keyup as we want * to prevent scrolling when using the arrow keys. @@ -729,6 +738,11 @@ export class Datetime implements ComponentInterface { root: calendarBodyRef }); startIO.observe(startMonth); + + this.destroyCalendarIO = () => { + endIO?.disconnect(); + startIO?.disconnect(); + } }); } @@ -743,6 +757,20 @@ export class Datetime implements ComponentInterface { } } + /** + * Clean up all listeners except for the overlay + * listener. This is so that we can re-create the listeners + * if the datetime has been hidden/presented by a modal or popover. + */ + private destroyListeners = () => { + const { destroyCalendarIO, destroyKeyboardMO, destroyTimeScroll, destroyMonthAndYearScroll } = this; + + destroyCalendarIO && destroyCalendarIO(); + destroyKeyboardMO && destroyKeyboardMO(); + destroyTimeScroll && destroyTimeScroll(); + destroyMonthAndYearScroll && destroyMonthAndYearScroll(); + } + componentDidLoad() { const mode = getIonMode(this); @@ -758,11 +786,6 @@ export class Datetime implements ComponentInterface { const ev = entries[0]; if (!ev.isIntersecting) { return; } - /** - * This needs to run at most once for initial setup. - */ - visibleIO!.disconnect() - this.initializeCalendarIOListeners(); this.initializeKeyboardListeners(); this.initializeTimeScrollListener(); @@ -786,6 +809,27 @@ export class Datetime implements ComponentInterface { } visibleIO = new IntersectionObserver(visibleCallback, { threshold: 0.01 }); visibleIO.observe(this.el); + + /** + * We need to clean up listeners when the datetime is hidden + * in a popover/modal so that we can properly scroll containers + * back into view if they are re-presented. When the datetime is hidden + * the scroll areas have scroll widths/heights of 0px, so any snapping + * we did originally has been lost. + */ + let hiddenIO: IntersectionObserver | undefined; + const hiddenCallback = (entries: IntersectionObserverEntry[]) => { + const ev = entries[0]; + if (ev.isIntersecting) { return; } + + this.destroyListeners(); + + writeTask(() => { + this.el.classList.remove('datetime-ready'); + }); + } + hiddenIO = new IntersectionObserver(hiddenCallback, { threshold: 0 }); + hiddenIO.observe(this.el); } /** @@ -897,8 +941,15 @@ export class Datetime implements ComponentInterface { * does not fire when we do our initial scrollIntoView above. */ raf(() => { - monthRef.addEventListener('scroll', () => scrollCallback('month')); - yearRef.addEventListener('scroll', () => scrollCallback('year')); + const monthScroll = () => scrollCallback('month'); + const yearScroll = () => scrollCallback('year'); + monthRef.addEventListener('scroll', monthScroll); + yearRef.addEventListener('scroll', yearScroll); + + this.destroyMonthAndYearScroll = () => { + monthRef.removeEventListener('scroll', monthScroll); + yearRef.removeEventListener('scroll', yearScroll); + } }); } @@ -979,8 +1030,16 @@ export class Datetime implements ComponentInterface { * does not fire when we do our initial scrollIntoView above. */ raf(() => { - timeHourRef.addEventListener('scroll', () => scrollCallback('hour')); - timeMinuteRef.addEventListener('scroll', () => scrollCallback('minute')); + const hourScroll = () => scrollCallback('hour'); + const minuteScroll = () => scrollCallback('minute'); + + timeHourRef.addEventListener('scroll', hourScroll); + timeMinuteRef.addEventListener('scroll', minuteScroll); + + this.destroyTimeScroll = () => { + timeHourRef.removeEventListener('scroll', hourScroll); + timeMinuteRef.removeEventListener('scroll', minuteScroll); + } }); }); } From 9bb5bd1b1b298ba15f0aedc69958f4abb9f05b95 Mon Sep 17 00:00:00 2001 From: Liam DeBeasi Date: Thu, 1 Jul 2021 09:05:22 -0400 Subject: [PATCH 4/4] lint --- core/src/components/datetime/datetime.tsx | 27 ++++++++++++++++------- 1 file changed, 19 insertions(+), 8 deletions(-) diff --git a/core/src/components/datetime/datetime.tsx b/core/src/components/datetime/datetime.tsx index 89ca0f5f1f9..2e28491f3ae 100644 --- a/core/src/components/datetime/datetime.tsx +++ b/core/src/components/datetime/datetime.tsx @@ -87,10 +87,10 @@ export class Datetime implements ComponentInterface { private parsedYearValues?: number[]; private parsedDayValues?: number[]; - private destroyCalendarIO?: Function; - private destroyKeyboardMO?: Function; - private destroyTimeScroll?: Function; - private destroyMonthAndYearScroll?: Function; + private destroyCalendarIO?: () => void; + private destroyKeyboardMO?: () => void; + private destroyTimeScroll?: () => void; + private destroyMonthAndYearScroll?: () => void; private minParts?: any; private maxParts?: any; @@ -765,10 +765,21 @@ export class Datetime implements ComponentInterface { private destroyListeners = () => { const { destroyCalendarIO, destroyKeyboardMO, destroyTimeScroll, destroyMonthAndYearScroll } = this; - destroyCalendarIO && destroyCalendarIO(); - destroyKeyboardMO && destroyKeyboardMO(); - destroyTimeScroll && destroyTimeScroll(); - destroyMonthAndYearScroll && destroyMonthAndYearScroll(); + if (destroyCalendarIO !== undefined) { + destroyCalendarIO(); + } + + if (destroyKeyboardMO !== undefined) { + destroyKeyboardMO(); + } + + if (destroyTimeScroll !== undefined) { + destroyTimeScroll(); + } + + if (destroyMonthAndYearScroll !== undefined) { + destroyMonthAndYearScroll(); + } } componentDidLoad() {