Reakit Versions Save

• Updated dependencies: @ariakit/[email protected]

Improved performance of large collections

Components like MenuItem, ComboboxItem, and SelectItem should now offer improved performance when rendering large collections.

New FormControl component

This version introduces a new FormControl component. In future versions, this will replace the FormField component.

Other updates

• Adjusted the focus behavior in Safari to occur prior to the pointerup event instead of mouseup.
• Improved JSDocs.
• Updated dependencies: @ariakit/[email protected]

Improved performance of large collections

Components like MenuItem, ComboboxItem, and SelectItem should now offer improved performance when rendering large collections.

New FormControl component

This version introduces a new FormControl component. In future versions, this will replace the FormField component.

Other updates

• Adjusted the focus behavior in Safari to occur prior to the pointerup event instead of mouseup.
• Improved JSDocs.
• Updated dependencies: @ariakit/[email protected]

Improved performance of large collections

Components like MenuItem, ComboboxItem, and SelectItem should now offer improved performance when rendering large collections.

Other updates

• Improved JSDocs.

• Added missing properties to dispatched events.
• Updated dependencies: @ariakit/[email protected]

• The auto-select feature on Combobox now resets with each keystroke.
• Fixed Combobox with the autoSelect prop calling onFocus with every input change.
• Fixed Hovercard flickering when used with shadow DOM.
• Fixed Select with Combobox scroll jumping when opening using keyboard navigation.
• Fixed CompositeItem triggering blur on focus.
• Fixed ComboboxItem not triggering the onClick event when the item is partially visible.
• Improved JSDocs.
• Updated dependencies: @ariakit/[email protected]

• The auto-select feature on Combobox now resets with each keystroke.
• Fixed Combobox with the autoSelect prop calling onFocus with every input change.
• Fixed Hovercard flickering when used with shadow DOM.
• Fixed Select with Combobox scroll jumping when opening using keyboard navigation.
• Fixed CompositeItem triggering blur on focus.
• Fixed ComboboxItem not triggering the onClick event when the item is partially visible.
• Improved JSDocs.
• Updated dependencies: @ariakit/[email protected]

• Fixed CompositeItem triggering blur on focus.
• Improved JSDocs.

Home and End keys on text fields

Pressing the Home or End keys on text fields will now move the cursor (selectionStart/selectionEnd properties) to the start or finish of the text when using the press function.

Other updates

• Updated dependencies: @ariakit/[email protected]

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/[email protected]