DatePicker: Date selection/highlighting fixes #44
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This is now redundant, since arrow keys immediately emit the selected date. The effect is that in other contexts (ex: when navigating using the prev/next links), when enter is pressed it selects the highlighted date in addition to any other action that it would normally do.
…"current" class logic
mattheyan
commented
Sep 11, 2020
| @@ -267,7 +267,7 @@ | |||
| classes.push('default'); | |||
| } | |||
|
|
|||
| if (selectionMode === 'day' && (cell.type === 'normal' || cell.type === 'today') && this.cellMatchesDate(cell, this.date || this.value)) { | |||
| if (selectionMode === 'day' && (cell.type === 'normal' || cell.type === 'today') && this.cellMatchesDate(cell, this.value)) { | |||
There was a problem hiding this comment.
Remove this.date so that the "is-selected" class is only determined by the persisted value of the component.
mattheyan
commented
Sep 11, 2020
| @@ -462,9 +462,6 @@ | |||
| event.stopPropagation(); | |||
| event.preventDefault(); | |||
| } | |||
| if (keyCode === 13 && this.userInputDate === null && this.userInputTime === null) { // Enter | |||
There was a problem hiding this comment.
Remove this old, obsolete Enter key behavior.
tylertrotter
approved these changes
Sep 11, 2020
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
This PR addresses inconsistencies in the way that "selected" dates are highlighted in the date picker calendar. The component's internal
dateproperty is used to drive a lot of behavior, but it doesn't always correspond to the component's "persisted" value (i.e. thevalueprop), and this can lead to some misleading styling. For example, when the picker is opened with no value, the default (ex: current date) is flagged as "selected", even though it isn't actually the current value, and if the picker is closed it won't be persisted. Also, in that case, when navigating to previous/next months and years, another date is marked as "selected", which is also not the persisted value. To address this, don't take into account thedatedata property when adding the class for the selected date.Related: Don't select a date and emit the event when Enter key is pressed. This behavior was added when arrow key controls were implemented, however, since then it has been changed such that arrow keys immediately emit the new value. So, the enter key behavior only has the effect of choosing the non-persisted date in other, unexpected scenarios, ex: after navigating to prev/next months or years.