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

ionic-team · Aug 29, 2022 · 9cedfcd · 9cedfcd
1 parent 41e3387
commit 9cedfcd
Showing 1 changed file with 5 additions and 15 deletions.
diff --git a/core/src/components/datetime/datetime.tsx b/core/src/components/datetime/datetime.tsx
@@ -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:/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>