[Autocomplete/TextField] dropdown closes on mouseup over textfields

[nathanielohler-wf]

Duplicates

• I have searched the existing issues

Latest version

• I have tested the latest version

Steps to reproduce 🕹

Link to live example:
https://codesandbox.io/s/infallible-mccarthy-bg665h?file=/demo.tsx
Steps:

1. Mousedown on whitespace in autocomplete (avoid whitespace within bounds of the clear option): dropdown should appear
2. Slide cursor over a textfield
3. Mouseup: dropdown disappears

Current behavior 😯

On mouseup, the dropdown closes instead of remaining open.

Expected behavior 🤔

The dropdown should remain open.

Context 🔦

In our system, on mousedown the pills change size and become larger (the pill delete icon is only shown when entering the autocomplete). The pills slide underneath the mouse frequently, making the dropdowns flash open/closed instead of remaining open.

Initially thought it may be related to: #36892, but problem occurs in the enabled state.

Your environment 🌎

npx @mui/envinfo

  Don't forget to mention which browser you used.
  Output from `npx @mui/envinfo` goes here.

[sai6855]

@nathanielohler-wf I'm not able to reproduce the issue, can you add screen recording?

Btw, #36892 is not released yet so probably it's not causing the issue

[nathanielohler-wf]

Screen.Recording.2023-04-28.at.3.56.52.PM.mov

It's not obvious, but the mouse down occurs in the blank space, slide the mouse over the pill, then mouseup.

[michaldudak]

Your use case is pretty unusual, so I'm not keen on changing the logic for everyone. You may work around this issue by using pointer capture in the text field's onPointerDown:

<Autocomplete
  multiple
  id="tags-standard"
  options={top100Films}
  getOptionLabel={(option) => option.title}
  defaultValue={[top100Films[13]]}
  renderInput={(params) => (
    <TextField
      {...params}
      variant="standard"
      label="Multiple values"
      placeholder="Favorites"
      onPointerDown={(event) => event.currentTarget.setPointerCapture(event.pointerId)}
    />
  )}
/>

Let me know if it helps.

[michaldudak]

I'm assuming it works.