useRangeCalendar committing changes when using elements other than buttons to navigate the calendar
- Dominant language
- TypeScript
- Stars
- 15.9k
- Forks
- 1.6k
- Avg merge
- 3d 9m
- Merged PRs (30d)
- 59
Description
# 🐛 Bug Report
Or Feature Request? Or general help request?
I'm building a calendar using `useRangeCalendar` and have also built in the ability to navigate to different months / years using two select dropdowns in the calendar header. The intention is that I can select a date, click the dropdown, and navigate to another month and have my selection continue in the other month (like the prev/next buttons). However, this bit of code prevents that by committing the current selected range and calling the calendar's `onChange` handler since my `select` menu doesn't fit the criteria of being a `button` element.
https://github.com/adobe/react-spectrum/blob/e1a53910584282ee6bf0594586ea17af546ed568/packages/%40react-aria/calendar/src/useRangeCalendar.ts#L54-L61
## 🤔 Expected Behavior
I would expect my `select` dropdown to behave in the same way as the button navigation and let me nav through different months and continue my selection until I click to end it or click outside of the calendar.
## 😯 Current Behavior
The calendar treats clicking on the `select` as a blur, commits the value, and calls the on change handler (which fires off a lot of unintended side effects for me).
## 💻 Code Sample
https://codesandbox.io/s/hardcore-feistel-hx1g71?file=/src/RangeCalendar.js

Contributor guide
Research direction
Start with packages/@react-aria/calendar/src/useRangeCalendar.ts at lines 54-61 and reproduce the behavior in the linked CodeSandbox. Compare navigation through the select dropdown with navigation through the calendar buttons; done means the range remains uncommitted while navigating and the onChange handler is not called prematurely.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- react, typescript
- Domain
- frontend
- Issue type
- Bug
- Difficulty
- 3/5
- Estimated time
- 1-2 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 42/100