ariakit/ariakit @ariakit/react-core@0.3.11

on GitHub

Modal Combobox

The Combobox components now support the modal prop on ComboboxPopover.

When a modal combobox is expanded, users can interact with and tab through all the combobox controls, including Combobox, ComboboxDisclosure, and ComboboxCancel, even if they're rendered outside the popover. The rest of the page will be inert.

Controlling the auto-select functionality of Combobox

The Combobox component now includes a new getAutoSelectId prop. This allows you to specify the ComboboxItem that should be auto-selected if the autoSelect prop is true.

By default, the first enabled item is auto-selected. Now you can customize this behavior by returning the id of another item from getAutoSelectId:

<Combobox
  autoSelect
  getAutoSelectId={(items) => {
    // Auto select the first enabled item with a value
    const item = items.find((item) => {
      if (item.disabled) return false;
      if (!item.value) return false;
      return true;
    });
    return item?.id;
  }}
/>

Styling Combobox without an active descendant

The Combobox component now includes a data-active-item attribute when it's the only active item in the composite widget. In other words, when no ComboboxItem is active and the focus is solely on the combobox input.

You can use this as a CSS selector to style the combobox differently, providing additional affordance to users who pressed ↑ on the first item or ↓ on the last item. This action would place both virtual and actual DOM focus on the combobox input.

.combobox[data-active-item] {
  outline-width: 2px;
}

Other updates

• Fixed useTabStore return value not updating its own reference.
• Fixed keyboard navigation on Combobox when the content element is a grid.
• Fixed ComboboxDisclosure to update its aria-expanded attribute when the combobox expands.
• Fixed Maximum update depth exceeded warning when rendering multiple collection items on the page.
• Improved JSDocs.
• Updated dependencies: @ariakit/core@0.3.9