javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2025-11-08 15:51:16 +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';
}
/**
* 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 = () => {
const calendarBodyRef = this.getCalendarBodyEl();
const calendarBodyRef = this.calendarBodyRef;
if (!calendarBodyRef) {
return;
}
@ -818,7 +808,7 @@ export class Datetime implements ComponentInterface {
};
private initializeCalendarListener = () => {
const calendarBodyRef = this.getCalendarBodyEl();
const calendarBodyRef = this.calendarBodyRef;
if (!calendarBodyRef) {
return;
}
@ -1241,7 +1231,7 @@ export class Datetime implements ComponentInterface {
};
private nextMonth = () => {
const calendarBodyRef = this.getCalendarBodyEl();
const calendarBodyRef = this.calendarBodyRef;
if (!calendarBodyRef) {
return;
}
@ -1261,7 +1251,7 @@ export class Datetime implements ComponentInterface {
};
private prevMonth = () => {
const calendarBodyRef = this.getCalendarBodyEl();
const calendarBodyRef = this.calendarBodyRef;
if (!calendarBodyRef) {
return;
}
@ -1989,7 +1979,7 @@ export class Datetime implements ComponentInterface {
}
private renderCalendar(mode: Mode) {
return (
<div class="datetime-calendar">
<div class="datetime-calendar" key="datetime-calendar">
{this.renderCalendarHeader(mode)}
{this.renderCalendarBody()}
</div>