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:

autocomplete/packages/autocomplete-core/src/getPropGetters.ts

Lines 243 to 248 in 760f8e7

	onMouseDown(event) {
	// Prevents the `activeElement` from being changed to the panel so
	// that the blur event is not triggered, otherwise it closes the
	// panel.
	((event as unknown) as MouseEvent).preventDefault();
	},

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