From 5ed73cdf4d63eeee25ef28d9676fcaa4f8e07b47 Mon Sep 17 00:00:00 2001 From: Liam DeBeasi Date: Thu, 3 Dec 2020 14:58:12 -0500 Subject: [PATCH] fix(refresher): refresher correctly detects native refresher when shown asynchronously (#22623) resolves #22616 --- core/src/components/refresher/refresher.tsx | 6 +++--- core/src/components/refresher/refresher.utils.ts | 11 ++++++++--- 2 files changed, 11 insertions(+), 6 deletions(-) diff --git a/core/src/components/refresher/refresher.tsx b/core/src/components/refresher/refresher.tsx index 9989909253..dc9e049b0a 100644 --- a/core/src/components/refresher/refresher.tsx +++ b/core/src/components/refresher/refresher.tsx @@ -124,8 +124,8 @@ export class Refresher implements ComponentInterface { */ @Event() ionStart!: EventEmitter; - private checkNativeRefresher() { - const useNativeRefresher = shouldUseNativeRefresher(this.el, getIonMode(this)); + private async checkNativeRefresher() { + const useNativeRefresher = await shouldUseNativeRefresher(this.el, getIonMode(this)); if (useNativeRefresher && !this.nativeRefresher) { const contentEl = this.el.closest('ion-content'); this.setupNativeRefresher(contentEl); @@ -411,7 +411,7 @@ export class Refresher implements ComponentInterface { this.scrollEl = await contentEl.getScrollElement(); this.backgroundContentEl = getElementRoot(contentEl).querySelector('#background-content') as HTMLElement; - if (shouldUseNativeRefresher(this.el, getIonMode(this))) { + if (await shouldUseNativeRefresher(this.el, getIonMode(this))) { this.setupNativeRefresher(contentEl); } else { this.gesture = (await import('../../utils/gesture')).createGesture({ diff --git a/core/src/components/refresher/refresher.utils.ts b/core/src/components/refresher/refresher.utils.ts index 9c7b3154b7..44b277803a 100644 --- a/core/src/components/refresher/refresher.utils.ts +++ b/core/src/components/refresher/refresher.utils.ts @@ -166,9 +166,14 @@ export const translateElement = (el?: HTMLElement, value?: string) => { // Utils // ----------------------------- -export const shouldUseNativeRefresher = (referenceEl: HTMLIonRefresherElement, mode: string) => { - const pullingSpinner = referenceEl.querySelector('ion-refresher-content .refresher-pulling ion-spinner'); - const refreshingSpinner = referenceEl.querySelector('ion-refresher-content .refresher-refreshing ion-spinner'); +export const shouldUseNativeRefresher = async (referenceEl: HTMLIonRefresherElement, mode: string) => { + const refresherContent = referenceEl.querySelector('ion-refresher-content'); + if (!refresherContent) { return Promise.resolve(false); } + + await refresherContent.componentOnReady(); + + const pullingSpinner = refresherContent.querySelector('.refresher-pulling ion-spinner'); + const refreshingSpinner = refresherContent.querySelector('.refresher-refreshing ion-spinner'); return ( pullingSpinner !== null &&