downshift-js / downshift-js/downshift
Feature request: allow disabling the "clicking outside" mouse handler
- 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
Assessment
This issue has not been assessed yet.