adobe / adobe/react-spectrum

Date range picker closes when clicking dialog whitespace during selection

Open
#4,168 2 comments 1 reaction 0 assignees View on GitHub
bug
Dominant language
TypeScript
Stars
15.9k
Forks
1.6k
Avg merge
3d 9m
Merged PRs (30d)
59

Description

# 🐛 Bug Report

The [date range picker implementation](https://react-spectrum.adobe.com/react-aria/useDateRangePicker.html) closes whenever clicking whitespace inside of the dialog while making a selection.

## 🤔 Expected Behavior

Nothing should happen when clicking dialog whitespace while making a date range selection. The click should essentially be ignored.

## 😯 Current Behavior

https://user-images.githubusercontent.com/10248395/223290950-ecc4ca44-06e1-48aa-8f12-1b7179a26d19.mov

https://user-images.githubusercontent.com/10248395/223291141-a9d3f3cb-a550-4ff3-9cce-df33cebaaed4.mov

## 💁 Possible Solution

Not enough background of codebase to provide an accurate response.

## 🔦 Context

Occasional mistake in clicking (for example missing the hitbox of the previous/next button) causes dialog to disappear in the middle of making a selection. This makes the experience frustrating and potentially confusing.

## 💻 Code Sample

Present in all examples on website including Tailwind example (see video).

https://codesandbox.io/s/reverent-faraday-5nwk87

## 🌍 Your Environment

React ARIA 3.23.1
Browser: Google Chrome Version 110.0.5481.177 (Official Build) (arm64)
Operating System: MacOS 13.2.1 (22D68)

## 🧢 Your Company/Team

CarbonReach

## 🕷 Tracking Issue (optional)

N/A

Contributor guide

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.