downshift-js
Feature request: allow disabling the "clicking outside" mouse handler
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) 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.
Hey @qbtf ! We have the useMouseAndTouchTracker to properly track and close the menu when clicking / touching outside the downshift element. By an additional property, you mean in the dispatch itself? Can't it be done externally and with the onBlur property passed to the handlers? You can also prevent the Downshift action in that handler using preventDownshiftDefault.
