Option to close multi combobox on select?

[mattoni]

Is there a way to have the menu close when 'multiple' is set for a combobox when the user picks an option? Use case is creating all new options from scratch (none provided by default), where the user clicks the new option, but the dropdown doesn't close leaving just a 'create option X' option.

Thanks!

[mattoni]

PS. I don't have displayValue set, which the docs make it sound like the menu only stays open if it is.

[TeddyBurnsides]

Did you ever figure this out? I'd like to get similar behavior working for my own project.

[camya]

I'm also trying to figure it out, with no luck.

My use case: I have a filter dropdown (multiple). 98% of the time, a user just selects one filter option. (An author for example) But it should be possible to select multiple options nonetheless. So the dropdown should close automatically, every time a single option is selected.

In VueMultiselect, there is a :close-on-select="true" property for this.

I already tried @update:modelValue on the Listbox element in combination with a template ref.

Pseudo code

handleSelectionChange(event) {
  // Close the listbox
}

<Listbox
  as="div"
  v-model="selectedOption.authors"
  multiple
  @update:modelValue="handleSelectionChange"
></Listbox>

I search for something like this.$refs.listbox.???.close();

Is there any way to programmatically close the dropdown, maybe using ref?

[ivan-kleshnin]

@camya I have had a similar task, plus the rule to "allow at most 3 values to be selected".

Single

For non-multiple Combobox it's enough to remove a focus:

  const inputRef = useRef<HTMLInputElement>(null)

  function handleChange(value: Place | null): void {
    onChange(value)
    setTimeout(() => {
      if (inputRef.current) {
        inputRef.current.blur()
      }
    }) // setTimeout is necessary to blur AFTER `Combobox` does its own focus handling (race condition basically)
  }

  ...

  <Combobox onChange={handleChange} ...>
    ...
    <Combobox.Input ref={inputRef} .../>
    ...
  </Combobox>

Multiple

For multiple mode Combobox blurring is not enough as the popup stays open. Here's my solution for multiple:

export const SkillsCombobox = memo(forwardRef(function SkillCombobox(props: SkillComboboxProps, ref: any) {
  ...
  const [disabled, setDisabled] = useState(false)
  const previousValue = usePrevious(value) || value // from any hook library, not shown for brevity
  const buttonRef = useRef<HTMLButtonElement>(null)

  useEffect(() => {
    const wasAdded = value.length > previousValue.length
    const wasRemoved = value.length < previousValue.length

    if (wasAdded) {
      if (buttonRef.current) {
        buttonRef.current.click() // manually closing the popup
      }
      if (value.length >= 3 && !disabled) {
        setDisabled(true)
      }
    } else if (wasRemoved) {
      if (value.length < 3 && disabled) {
        setDisabled(false)
      }
    }
  }, [value])

  // ...

  return (
    <Combobox disabled={disabled} ...>
      ...
      <Combobox.Button ref={buttonRef} .../>
      ...
      == rendering errors here ==
      ...
      == selected options with mini-badges ==
      {value && Boolean(value.length) && (
        <div className="mt-2 flex items-center gap-2">
          {value.map((option, i) =>
            <Badge key={i} white closeable onClose={() => onRemove(option)}>
              {option}
            </Badge>
          )}
        </div>
      )}
    </Combobox>
  )
}))

There might be a better approach but that's where I'm at for now. If you don't have length limits – it's 1/2 of the above hook.

[knoefel]

@RobinMalfait Are there any plans to add an option to close the combobox without having to use the static prop and redoing all the open/close logic? Maybe something like a closeOnSelect prop when multiple is true?

For us this is really a deal breaker to use the combobox, otherwise it's a great component and we would really like to use it. The current workarounds are quite hacky.

[thewh1teagle]

The only thing which worked for me to close & open the combobox manually:

for closing:

export function simulateMouseClick(element: HTMLElement) {
  const events = ["mousedown", "click", "mouseup"];
  events.forEach((mouseEventType) =>
    element.dispatchEvent(
      new MouseEvent(mouseEventType, {
        view: window,
        bubbles: true,
        cancelable: true,
        buttons: 1,
      })
    )
  );
}

simulateMouseClick(document.body)

for opening:

const inputRef = useRef<HTMLInputElement>(null)
<Combobox.Input ref={inputRef} ... />

inputRef.current?.click()

[ivan-kleshnin]

@thewh1teagle blurring an input at onChange seems like an easier approach (for closing):

  const onChange = useCallback((value: Place | null) => {
    if (!error) {
      setTimeout(() => {
        if (inputRef.current) {
          inputRef.current.blur()
        }
      })
      _onChange(value)
    }
  }, [_onChange, error])

[meotimdihia]

We need this feature.
And please add an example of how to build an async combobox.