[data grid] isAnyOf type filter operator makes filter panel blink and close when extended on two rows

[chrishawn]

Duplicates

• I have searched the existing issues

Latest version

• I have tested the latest version

Current behavior 😯

filterbug.mov

see attached screen recording.

when you have more than one item in the any of and then go to click on the add filter button, the autocomplete box collapses shifting the button up and causing the filter window to close. this occurs on both chrome and safari, weirdly firefox keeps the filter window open.

Expected behavior 🤔

i should be able to add a filter without the ui shifting the button.
or at a minimum it should not close the filter window

Steps to reproduce 🕹

see attached screen recording

Context 🔦

No response

Your environment 🌎

`npx @mui/envinfo`

  System:
    OS: macOS 12.2.1
  Binaries:
    Node: 14.18.3 - ~/.nvm/versions/node/v14.18.3/bin/node
    Yarn: 1.22.17 - /usr/local/bin/yarn
    npm: 6.14.15 - ~/.nvm/versions/node/v14.18.3/bin/npm
  Browsers:
    Chrome: Not Found
    Edge: Not Found
    Firefox: 97.0.1
    Safari: 15.3
  npmPackages:
    @emotion/react: ^11.5.0 => 11.6.0 
    @emotion/styled: ^11.3.0 => 11.6.0 
    @mui/base:  5.0.0-alpha.70 
    @mui/icons-material: ^5.4.4 => 5.4.4 
    @mui/lab: ^5.0.0-alpha.71 => 5.0.0-alpha.71 
    @mui/material: ^5.4.4 => 5.4.4 
    @mui/private-theming:  5.4.4 
    @mui/styled-engine:  5.4.4 
    @mui/styles: ^5.4.4 => 5.4.4 
    @mui/system: ^5.4.4 => 5.4.4 
    @mui/types:  7.1.2 
    @mui/utils:  5.4.4 
    @mui/x-data-grid: ^5.5.1 => 5.5.1 
    @mui/x-data-grid-pro: ^5.5.1 => 5.5.1 
    @mui/x-license-pro:  5.5.1 
    @types/react: ^17.0.33 => 17.0.35 
    react: ^17.0.2 => 17.0.2 
    react-dom: ^17.0.2 => 17.0.2 
    styled-components: 5.2.1 => 5.2.1 
    typescript: ^4.4.4 => 4.5.2 

Order ID 💳 (optional)

#31818

[chrishawn]

i would add this happens in DataGridPro 5.5.1 as well as 5.6.0

[alexfauquette]

What causes the filter panel to close is the mouseUp outside of the panel

There is a quick fix to avoid the filter input wrap on two lines. To do so we unset the width and replace it with a min-width. The draw-back of this solution is that the input can nom be infinitely long

<DataGrid
	{...}
	componentsProps={{
	      filterPanel: {
	          filterFormProps: {
	              valueInputProps: {
	                  sx: {
		                  minWidth: 190,
		                  width: 'unset'
	            	}
				}
			}
		}
	}}
/>

[chrishawn]

great work around!

[flaviendelangle]

@alexfauquette is there something to do on our side ?
If you could clean the PR title / labels, you know the subject better than me 👍

[alexfauquette]

I added this issue to the RFC on filtering. A quick win would be to set a max-height on the multiple value input. But I prefer to wait for the redesign of the filter panel because we already discussed it with @m4theushw and did not find a satisfying design

[MBilalShafi]

Update: It has been fixed already with the solution of #6213 and doesn't reproduce anymore since v6 and v5.17.20