Skip to content

Commit

Permalink
refactor!: remove date focused part when input is unparsable (#8187)
Browse files Browse the repository at this point in the history
  • Loading branch information
@vursen
vursen authored Nov 25, 2024
1 parent d954c55 commit be6a81c
Show file tree
Hide file tree
Showing 7 changed files with 158 additions and 71 deletions.
56 changes: 47 additions & 9 deletions packages/date-picker/src/vaadin-date-picker-mixin.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -357,14 +357,20 @@ export const DatePickerMixin = (subclass) =>
type: Object,
sync: true,
},

/** @private */
__enteredDate: {
type: Date,
sync: true,
},
};
}

static get observers() {
return [
'_selectedDateChanged(_selectedDate, i18n)',
'_focusedDateChanged(_focusedDate, i18n)',
'__updateOverlayContent(_overlayContent, i18n, label, _minDate, _maxDate, _focusedDate, _selectedDate, showWeekNumbers, isDateDisabled)',
'__updateOverlayContent(_overlayContent, i18n, label, _minDate, _maxDate, _focusedDate, _selectedDate, showWeekNumbers, isDateDisabled, __enteredDate)',
'__updateOverlayContentTheme(_overlayContent, _theme)',
'__updateOverlayContentFullScreen(_overlayContent, _fullscreen)',
];
Expand All @@ -382,6 +388,19 @@ export const DatePickerMixin = (subclass) =>
this._boundOverlayRenderer = this._overlayRenderer.bind(this);
}

/** @override */
get _inputElementValue() {
return super._inputElementValue;
}

/** @override */
set _inputElementValue(value) {
super._inputElementValue = value;

const parsedDate = this.__parseDate(value);
this.__setEnteredDate(parsedDate);
}

/**
* Override a getter from `InputControlMixin` to make it optional
* and to prevent warning when a clear button is missing,
Expand Down Expand Up @@ -833,6 +852,7 @@ export const DatePickerMixin = (subclass) =>
selectedDate,
showWeekNumbers,
isDateDisabled,
enteredDate,
) {
if (overlayContent) {
overlayContent.i18n = i18n;
Expand All @@ -843,6 +863,7 @@ export const DatePickerMixin = (subclass) =>
overlayContent.selectedDate = selectedDate;
overlayContent.showWeekNumbers = showWeekNumbers;
overlayContent.isDateDisabled = isDateDisabled;
overlayContent.enteredDate = enteredDate;
}
}

Expand Down Expand Up @@ -1166,15 +1187,32 @@ export const DatePickerMixin = (subclass) =>
this.open();
}

if (this._inputElementValue) {
const parsedDate = this.__parseDate(this._inputElementValue);
if (parsedDate) {
this._ignoreFocusedDateChange = true;
if (!dateEquals(parsedDate, this._focusedDate)) {
this._focusedDate = parsedDate;
}
this._ignoreFocusedDateChange = false;
const parsedDate = this.__parseDate(this._inputElementValue || '');
if (parsedDate) {
this._ignoreFocusedDateChange = true;
if (!dateEquals(parsedDate, this._focusedDate)) {
this._focusedDate = parsedDate;
}
this._ignoreFocusedDateChange = false;
}

this.__setEnteredDate(parsedDate);
}

/**
* @param {Date} date
* @private
*/
__setEnteredDate(date) {
if (date) {
if (!dateEquals(this.__enteredDate, date)) {
this.__enteredDate = date;
}
} else if (this.__enteredDate != null) {
// Do not override initial undefined value with null
// to avoid triggering a Lit update that can cause
// other scheduled properties to flush too early.
this.__enteredDate = null;
}
}

Expand Down
9 changes: 8 additions & 1 deletion packages/date-picker/src/vaadin-date-picker-overlay-content-mixin.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -125,6 +125,11 @@ export const DatePickerOverlayContentMixin = (superClass) =>
type: Function,
},

enteredDate: {
type: Date,
sync: true,
},

/**
* Input label
*/
Expand Down Expand Up @@ -152,7 +157,7 @@ export const DatePickerOverlayContentMixin = (superClass) =>

static get observers() {
return [
'__updateCalendars(calendars, i18n, minDate, maxDate, selectedDate, focusedDate, showWeekNumbers, _ignoreTaps, _theme, isDateDisabled)',
'__updateCalendars(calendars, i18n, minDate, maxDate, selectedDate, focusedDate, showWeekNumbers, _ignoreTaps, _theme, isDateDisabled, enteredDate)',
'__updateCancelButton(_cancelButton, i18n)',
'__updateTodayButton(_todayButton, i18n, minDate, maxDate, isDateDisabled)',
'__updateYears(years, selectedDate, _theme)',
Expand Down Expand Up @@ -340,6 +345,7 @@ export const DatePickerOverlayContentMixin = (superClass) =>
ignoreTaps,
theme,
isDateDisabled,
enteredDate,
) {
if (calendars && calendars.length) {
calendars.forEach((calendar) => {
Expand All @@ -351,6 +357,7 @@ export const DatePickerOverlayContentMixin = (superClass) =>
calendar.selectedDate = selectedDate;
calendar.showWeekNumbers = showWeekNumbers;
calendar.ignoreTaps = ignoreTaps;
calendar.enteredDate = enteredDate;

if (theme) {
calendar.setAttribute('theme', theme);
Expand Down
6 changes: 4 additions & 2 deletions packages/date-picker/src/vaadin-lit-month-calendar.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -59,7 +59,9 @@ class MonthCalendar extends MonthCalendarMixin(ThemableMixin(PolylitMixin(LitEle
${this.__getWeekNumber(week)}
</td>
${week.map((date) => {
const isFocused = dateEquals(date, this.focusedDate);
const isFocused =
dateEquals(date, this.focusedDate) && (this.__hasFocus || dateEquals(date, this.enteredDate));
const tabIndex = dateEquals(date, this.focusedDate) ? '0' : '-1';
const isSelected = dateEquals(date, this.selectedDate);
const isDisabled = !dateAllowed(date, this.minDate, this.maxDate, this.isDateDisabled);
const greaterThanToday = date > normalizeDate(new Date());
Expand All @@ -81,7 +83,7 @@ class MonthCalendar extends MonthCalendarMixin(ThemableMixin(PolylitMixin(LitEle
part="${parts.join(' ')}"
.date="${date}"
?disabled="${isDisabled}"
tabindex="${isFocused ? '0' : '-1'}"
tabindex="${tabIndex}"
aria-selected="${isSelected ? 'true' : 'false'}"
aria-disabled="${isDisabled ? 'true' : 'false'}"
aria-label="${this.__getDayAriaLabel(date)}"
Expand Down
15 changes: 15 additions & 0 deletions packages/date-picker/src/vaadin-month-calendar-mixin.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -91,6 +91,10 @@ export const MonthCalendarMixin = (superClass) =>
value: () => false,
},

enteredDate: {
type: Date,
},

disabled: {
type: Boolean,
reflectToAttribute: true,
Expand All @@ -110,6 +114,11 @@ export const MonthCalendarMixin = (superClass) =>
_notTapping: {
type: Boolean,
},

/** @private */
__hasFocus: {
type: Boolean,
},
};
}

Expand All @@ -129,6 +138,12 @@ export const MonthCalendarMixin = (superClass) =>
addListener(this.$.monthGrid, 'tap', this._handleTap.bind(this));
}

/** @override */
_setFocused(focused) {
super._setFocused(focused);
this.__hasFocus = focused;
}

/**
* Returns true if all the dates in the month are out of the allowed range
* @protected
Expand Down
17 changes: 4 additions & 13 deletions packages/date-picker/src/vaadin-month-calendar.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -50,7 +50,7 @@ class MonthCalendar extends MonthCalendarMixin(ThemableMixin(PolymerElement)) {
<template is="dom-repeat" items="[[week]]">
<td
role="gridcell"
part$="[[__getDatePart(item, focusedDate, selectedDate, minDate, maxDate, isDateDisabled)]]"
part$="[[__getDatePart(item, focusedDate, selectedDate, minDate, maxDate, isDateDisabled, enteredDate, __hasFocus)]]"
date="[[item]]"
tabindex$="[[__getDayTabindex(item, focusedDate)]]"
disabled$="[[__isDayDisabled(item, minDate, maxDate, isDateDisabled)]]"
Expand Down Expand Up @@ -108,7 +108,7 @@ class MonthCalendar extends MonthCalendarMixin(ThemableMixin(PolymerElement)) {

/** @private */
// eslint-disable-next-line @typescript-eslint/max-params
__getDatePart(date, focusedDate, selectedDate, minDate, maxDate, isDateDisabled) {
__getDatePart(date, focusedDate, selectedDate, minDate, maxDate, isDateDisabled, enteredDate, hasFocus) {
const result = ['date'];
const greaterThanToday = date > normalizeDate(new Date());
const lessThanToday = date < normalizeDate(new Date());
Expand All @@ -117,7 +117,7 @@ class MonthCalendar extends MonthCalendarMixin(ThemableMixin(PolymerElement)) {
result.push('disabled');
}

if (this.__isDayFocused(date, focusedDate)) {
if (dateEquals(date, focusedDate) && (hasFocus || dateEquals(date, enteredDate))) {
result.push('focused');
}

Expand All @@ -140,11 +140,6 @@ class MonthCalendar extends MonthCalendarMixin(ThemableMixin(PolymerElement)) {
return result.join(' ');
}

/** @private */
__isDayFocused(date, focusedDate) {
return dateEquals(date, focusedDate);
}

/** @private */
__isDaySelected(date, selectedDate) {
return dateEquals(date, selectedDate);
Expand Down Expand Up @@ -175,11 +170,7 @@ class MonthCalendar extends MonthCalendarMixin(ThemableMixin(PolymerElement)) {

/** @private */
__getDayTabindex(date, focusedDate) {
if (this.__isDayFocused(date, focusedDate)) {
return '0';
}

return '-1';
return dateEquals(date, focusedDate) ? '0' : '-1';
}
}

Expand Down
Loading

0 comments on commit be6a81c

Please sign in to comment.