fix(refresher): refresher correctly detects native refresher when shown asynchronously (#22623)

resolves #22616
This commit is contained in:
Liam DeBeasi
2020-12-03 14:58:12 -05:00
committed by GitHub
parent 0be79fe82b
commit 5ed73cdf4d
2 changed files with 11 additions and 6 deletions

View File

@ -124,8 +124,8 @@ export class Refresher implements ComponentInterface {
*/ */
@Event() ionStart!: EventEmitter<void>; @Event() ionStart!: EventEmitter<void>;
private checkNativeRefresher() { private async checkNativeRefresher() {
const useNativeRefresher = shouldUseNativeRefresher(this.el, getIonMode(this)); const useNativeRefresher = await shouldUseNativeRefresher(this.el, getIonMode(this));
if (useNativeRefresher && !this.nativeRefresher) { if (useNativeRefresher && !this.nativeRefresher) {
const contentEl = this.el.closest('ion-content'); const contentEl = this.el.closest('ion-content');
this.setupNativeRefresher(contentEl); this.setupNativeRefresher(contentEl);
@ -411,7 +411,7 @@ export class Refresher implements ComponentInterface {
this.scrollEl = await contentEl.getScrollElement(); this.scrollEl = await contentEl.getScrollElement();
this.backgroundContentEl = getElementRoot(contentEl).querySelector('#background-content') as HTMLElement; 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); this.setupNativeRefresher(contentEl);
} else { } else {
this.gesture = (await import('../../utils/gesture')).createGesture({ this.gesture = (await import('../../utils/gesture')).createGesture({

View File

@ -166,9 +166,14 @@ export const translateElement = (el?: HTMLElement, value?: string) => {
// Utils // Utils
// ----------------------------- // -----------------------------
export const shouldUseNativeRefresher = (referenceEl: HTMLIonRefresherElement, mode: string) => { export const shouldUseNativeRefresher = async (referenceEl: HTMLIonRefresherElement, mode: string) => {
const pullingSpinner = referenceEl.querySelector('ion-refresher-content .refresher-pulling ion-spinner'); const refresherContent = referenceEl.querySelector('ion-refresher-content');
const refreshingSpinner = referenceEl.querySelector('ion-refresher-content .refresher-refreshing ion-spinner'); 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 ( return (
pullingSpinner !== null && pullingSpinner !== null &&