[Combobox] Auto highlight on last item in list that is selected in multiple select

[michaelhazan]

Bug report

Current behavior

Currently when having a multiple selection Combobox, selecting multiple items and closing the Combobox menu, upon reopen the Combobox will automatically highlight the last item which is selected, without any way of disabling it (at least from what i found)

Expected behavior

A way to disable it or,
When reopening the Combobox it wont auto highlight any item unless specified otherwise.

Reproducible example

This behavior can be seen in the official example for multi select Combobox.

Base UI version

1.0.0-beta.4

Which browser are you using?

Chrome / Firefox

Which OS are you using?

Mac OS / Linux

[atomiks]

Select has the same behavior: https://base-ui.com/react/components/select#multiple-selection

The auto highlight on the last selected item (with multiple items) matches Ariakit here: https://ariakit.org/examples/select-multiple

I see that it might look a bit confusing with a multiple select compared to a single select. Maybe setting focus on the listbox/popup initially would be better. There doesn't seem to be a multiple select pattern on the APG website to compare with

[michaelhazan]

Select has the same behavior: https://base-ui.com/react/components/select#multiple-selection

The auto highlight on the last selected item (with multiple items) matches Ariakit here: https://ariakit.org/examples/select-multiple

I see that it might look a bit confusing with a multiple select compared to a single select. Maybe setting focus on the listbox/popup initially would be better. There doesn't seem to be a multiple select pattern on the APG website to compare with

Hey!
appreciate the swift response.

from what i found the lack of a Combobox multi select example is an existing issue, and seems to be like so for quite a while.
i suggest to follow what was mention in the comment of that issue as its the closest thing that is available right now.

on another note, do you think there is a workaround for this?
right now it is causing long combo boxes to scroll all the way down and ruin the user experience.

would appreciate any feedback!

[atomiks]

right now it is causing long combo boxes to scroll all the way down and ruin the user experience.

I haven't really thought about this much, but how does it ruin the experience if it's scrolling to the item linked to the most recently selected chip in the input? Or is this more of a problem when the selections are present before interaction via e.g. defaultValue?

on another note, do you think there is a workaround for this?

It's not pretty but you can dig into the DOM and force internal events to fire to reset the state

onOpenChange={(open) => {
  if (!open) {
    return;
  }

  requestAnimationFrame(() => {
    if (popupRef.current) {
      const items = popupRef.current.querySelectorAll('[role="option"][data-selected]');
      const lastItem = items[items.length - 1];
      if (!lastItem) {
        return;
      }
      lastItem.parentElement?.dispatchEvent(new Event('pointermove', { bubbles: true }));
      lastItem.dispatchEvent(new PointerEvent('pointerout', { bubbles: true }));
      requestAnimationFrame(() => {
        if (popupRef.current) {
          // or listRef.current, if that's the scrollable element
          popupRef.current.scrollTop = 0;
        }
      });
    }
  });
}}

[michaelhazan]

It's not pretty but you can dig into the DOM and force internal events to fire to reset the state

Appreciate it greatly!

I haven't really thought about this much, but how does it ruin the experience if it's scrolling to the item linked to the most recently selected chip in the input? Or is this more of a problem when the selections are present before interaction via e.g. defaultValue?

yes exactly! for example in our use case, we start off with all of the options selected, then when the user attempts to change those options, it opens the popup and scrolls all the way down.
when the amount of options is above 50 it can start to be a bit problematic...

[atomiks]

It sounds like one solution is to only highlight (and scroll to) the last selected option if it was interacted with by the user, but programmatic default values should ignore the highlight (unless there's only 1 item selected? similar to single-select use case)

[michaelhazan]

It sounds like one solution is to only highlight (and scroll to) the last selected option if it was interacted with by the user, but programmatic default values should ignore the highlight (unless there's only 1 item selected? similar to single-select use case)

Personally i think that it should probably completely ignore defaults.

in our case the combobox value is passed from search params (as in a possible shared link of sorts), in that case, it feels weird that it will move into something that i haven't selected myself.