search

ariakit / ariakit

Toolkit for building accessible web apps with React
https://ariakit.org
MIT License
7.8k stars 367 forks source link

`includesBaseElement` of `ComboboxProvider` overrides `SelectProvider`’s same prop #3816

Open kripod opened 3 months ago

kripod commented 3 months ago

Current behavior

When nesting a SelectProvider within a ComboboxProvider, the latter’s default includesBaseElement={true} appears to take precedence over the former component’s implicit false value.

Steps to reproduce the bug

  1. Open https://ariakit.org/examples/select-combobox
  2. Within the example, open the popover
  3. Try navigating up and down across items using arrow keys
  4. Notice that the Combobox search input is a stop, preventing immediate keyboard navigation from the top item to the bottom one and vice versa

Expected behavior

The Combobox within a SelectPopover shouldn’t be an arrow key stop by default.

Workaround

Pass includesBaseElement={false} to either <ComboboxProvider> or <SelectProvider> explicitly when using a Select with Combobox.

Possible solutions

I’m not familiar with the internals of Ariakit, but perhaps when a provider’s prop isn’t specified, its value shouldn’t be inherited after resolving to the default, but just passed along as undefined.

diegohaz commented 3 months ago

I believe this is working as expected. We need to choose a default value for this option, and we're doing so for the topmost provider. Soon, you will be able to render ComboboxProvider within SelectProvider, allowing the Select default options to take precedence.