adobe / adobe/react-spectrum

useRangeCalendar committing changes when using elements other than buttons to navigate the calendar

Open
#3,738 8 comments 1 reaction 0 assignees View on GitHub
enhancement
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

![rangeCal](https://user-images.githubusercontent.com/6880644/201280212-0039aaea-5116-4a95-879c-c5b77283b768.gif)

Contributor guide

Open the contributing 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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.