downshift-js / downshift-js/downshift

Feature request: allow disabling the "clicking outside" mouse handler

Open
#1,632 2 comments 0 reactions 0 assignees View on GitHub
needs discussion
Dominant language
JavaScript
Stars
12.3k
Forks
936
PR merge metrics
No merged PRs in 30d

Description

First of all, thanks for the impressive component library! The headless architecture of Downshift make it easy and comfortable to make a combobox out from existing UI library with deep customization. I and our team made a reusable combobox component with Chakra UI v3 and Downshift as PoC, and the prototype[^1] is very concise.

However, there is a little problem that is hard to workaround: Chakra UI has an `onInteractOutside` mechanism (see its [popover component](https://www.chakra-ui.com/docs/components/popover)) to manage popovers by maintaining a stack of layers. Downshift's `useMouseAndTouchTracker` handler, however, dispatches additional blur events alongside Chakra UI. We tried to block it in the reducer, but it is impossible to distinguish if a blur event is from the blur callback or from a regular `InputBlur` state change.

I can think of two approaches. One is to add an additional property to the blur callback, so that we can ignore the action coming from the blur callback. The other is to add an option to mask the blur callback completely. Either way makes Downshift's combobox more composable with UI libraries that implement that kind of mechanism themselves.

[^1]: My prototype: https://stackblitz.com/edit/chakra-downshift?file=src%2FApp.tsx.

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.