Skip to content

@ariakit/react@0.4.29

Choose a tag to compare

@ariakito ariakito released this 31 May 01:12
· 348 commits to main since this release
9223aff

Fixed Combobox dropping characters when the popover resizes while typing

The Combobox component with autoSelect enabled no longer loses typed characters when the popover is resized as the user types.

This could happen with a virtualized list on mobile devices, where the keyboard's autocomplete bar repeatedly changes the available viewport height. Each resize re-rendered the list and re-applied the auto-selection, briefly moving focus away from the input and dropping keystrokes.

Composite items keep their enclosing store

Fixed CompositeItem to register on the enclosing Composite store when rendered as the same element as a component that sets its own composite context, such as a MenuButton inside a MenuProvider. This keeps the item reachable with the arrow keys in one- and two-dimensional composite widgets.

The CompositeItem can now omit the explicit store prop and still register on the enclosing composite:

const composite = Ariakit.useCompositeStore();

<Ariakit.Composite store={composite}>
  <Ariakit.MenuProvider>
    <Ariakit.CompositeItem render={<Ariakit.MenuButton />}>
      Menu
    </Ariakit.CompositeItem>
    <Ariakit.Menu>
      <Ariakit.MenuItem>Edit</Ariakit.MenuItem>
    </Ariakit.Menu>
  </Ariakit.MenuProvider>
</Ariakit.Composite>;

Components no longer throw on events with a non-element target

Several components attach global event listeners that read event.target/event.relatedTarget and call methods like contains() and hasAttribute() on them. When third-party code dispatched an event whose target was a non-element EventTarget (such as window or an XMLHttpRequest), those calls threw a TypeError.

This affected Dialog (its interact-outside and Escape-to-close listeners), HovercardDisclosure (its focusout listener), and the shared isFocusEventOutside and isPortalEvent helpers used by Focusable, Combobox, Composite, and Portal.

Other updates

  • Improved performance of components that subscribe to internal store state by upgrading the underlying @ariakit/store package.
  • Fixed Button to preserve React form pending state when submitted with the keyboard.
  • Fixed Dialog to preserve closing animations when using unmountOnHide with the controlled open and onClose props and no explicit store.
  • Documented that removeValue preserves array length by replacing removed items with null.
  • Fixed runtime process.env.NODE_ENV checks in published package output, including test-only behavior and development warnings.
  • Fixed rendering many Menu components on the same page potentially causing a "Maximum update depth exceeded" error. MenuItem elements now register only while the menu is visible, instead of registering on mount even while it's hidden.
  • Fixed Tab to move focus to the selected tab after a controlled selectedId update while a tab has DOM focus.
  • Fixed TooltipProvider to avoid a re-entrant loop when multiple tooltips are forced open at the same time.
  • Updated dependencies: @ariakit/react-components@0.1.2