Cannot use "<select>" in header

[heyuxian]

Description

I want to use <select> in Header, but it does not work.

Reproduction

Preview →

Expected behavior

Environment

• Browser: Chrome
• Autocomplete version: 1.1.0

[Shipow]

Hi, What are you trying to achieve? Can you share any design or mockup to help us understand what you are building?

[heyuxian]

Hello, I need to use <select> as the query condition of the custom search API, but I found that select cannot get the focus

getSources({ query, state, setContext, refresh, }) {
    return fetch(
      `/api/search?query=${query}&type=${state.context.type}`,
    );
},
header() {
    return (
      <Fragment>
        <select id="type" onChange={(e) => setContext({type: e.value})}>
          <option value="1">Type1</option>
          <option value="2">Type2</option>
        </select>
      </Fragment>
    );
  },

[francoischalifour]

Thanks for the report @heyuxian!

That's a tricky case because the panel is supposed to close when the input loses focus, and a select element blurs the input on click. Therefore, we prevent this kind of mouse events.

This behavior happens in the onMouseDown panel prop: https://github.com/algolia/autocomplete/blob/760f8e79d71281c7176b7cd43917a77f89204b10/packages/autocomplete-core/src/getPropGetters.ts#L243-L248

We either need to revisit this UX behavior about the input losing focus, or we cannot support elements getting focus in the panel.