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

refactor(datetime): use key to preserve calendar body ref node (#25838)

Browse Source
This commit is contained in:
Alice
2022-08-29 13:49:32 -04:00
committed by GitHub
parent 41e338730d
commit 9cedfcd3ef
1 changed files with 5 additions and 15 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@ -629,18 +629,8 @@ export class Datetime implements ComponentInterface {
return presentation === 'date' || presentation === 'date-time' || presentation === 'time-date'; return presentation === 'date' || presentation === 'date-time' || presentation === 'time-date';
} }
/**
* Stencil sometimes sets calendarBodyRef to null on rerender, even though
* the element is present. Query for it manually as a fallback.
*
* TODO(FW-901) Remove when issue is resolved: https://github.com/ionic-team/stencil/issues/3253
*/
private getCalendarBodyEl = () => {
return this.calendarBodyRef || this.el.shadowRoot?.querySelector('.calendar-body');
};
private initializeKeyboardListeners = () => { private initializeKeyboardListeners = () => {
const calendarBodyRef = this.getCalendarBodyEl(); const calendarBodyRef = this.calendarBodyRef;
if (!calendarBodyRef) { if (!calendarBodyRef) {
return; return;
} }
@ -818,7 +808,7 @@ export class Datetime implements ComponentInterface {
}; };
private initializeCalendarListener = () => { private initializeCalendarListener = () => {
const calendarBodyRef = this.getCalendarBodyEl(); const calendarBodyRef = this.calendarBodyRef;
if (!calendarBodyRef) { if (!calendarBodyRef) {
return; return;
} }
@ -1241,7 +1231,7 @@ export class Datetime implements ComponentInterface {
}; };
private nextMonth = () => { private nextMonth = () => {
const calendarBodyRef = this.getCalendarBodyEl(); const calendarBodyRef = this.calendarBodyRef;
if (!calendarBodyRef) { if (!calendarBodyRef) {
return; return;
} }
@ -1261,7 +1251,7 @@ export class Datetime implements ComponentInterface {
}; };
private prevMonth = () => { private prevMonth = () => {
const calendarBodyRef = this.getCalendarBodyEl(); const calendarBodyRef = this.calendarBodyRef;
if (!calendarBodyRef) { if (!calendarBodyRef) {
return; return;
} }
@ -1989,7 +1979,7 @@ export class Datetime implements ComponentInterface {
} }
private renderCalendar(mode: Mode) { private renderCalendar(mode: Mode) {
return ( return (
<div class="datetime-calendar"> <div class="datetime-calendar" key="datetime-calendar">
{this.renderCalendarHeader(mode)} {this.renderCalendarHeader(mode)}
{this.renderCalendarBody()} {this.renderCalendarBody()}
</div> </div>