MUI Autocomplete Popper Closes GridColumnMenuFilter Unexpectedly

[Trustin]

Description: When using MUI Autocomplete inside the KendoReact GridColumnMenuFilter, clicking on the autocomplete input triggers the Popper component outside the GridColumnMenuFilter wrapper. However, when selecting an option from the Popper, the outside click event of the GridColumnMenuFilter is triggered, causing the filter menu to close unexpectedly.

Steps to Reproduce:

1. Open the provided demo link.

2. Click on the MUI Autocomplete input inside the GridColumnMenuFilter.

3. Observe that the Popper appears outside the filter menu.

4. Click on an option in the Popper.

5. Notice that the GridColumnMenuFilter closes immediately after selecting an option.

Expected Behavior: Selecting an option from the MUI Autocomplete Popper should not trigger the outside click event of the GridColumnMenuFilter, preventing it from closing unintentionally.

Actual Behavior: The GridColumnMenuFilter closes when selecting an option from the Popper.

import * as React from 'react';
import { AutoComplete } from '@progress/kendo-react-dropdowns';
import TextField from '@material-ui/core/TextField';
import Autocomplete from '@material-ui/lab/Autocomplete';

const data = [
  { title: 'The Shawshank Redemption', year: 1994 },
  { title: 'The Godfather', year: 1972 },
  { title: 'The Godfather: Part II', year: 1974 },
  { title: 'The Dark Knight', year: 2008 },
  { title: '12 Angry Men', year: 1957 },
  { title: "Schindler's List", year: 1993 },
  { title: 'Pulp Fiction', year: 1994 },
  { title: 'The Lord of the Rings: The Return of the King', year: 2003 },
  { title: 'The Good, the Bad and the Ugly', year: 1966 },
  { title: 'Fight Club', year: 1999 },
];

export const CustomFilterUI = (props) => {
  const onChange = (event) => {
    const value = event.value === 'null' ? null : event.value === 'true';
    const { firstFilterProps } = props;
    firstFilterProps.onChange({
      value,
      operator: 'eq',
      syntheticEvent: event.syntheticEvent,
    });
  };

  const { firstFilterProps } = props;
  const value = firstFilterProps.value;

  return (
    <div>
      <h3>MUI Autocomplete</h3>
      <Autocomplete
        id="combo-box-demo"
        options={data}
        getOptionLabel={(option) => option.title}
        style={{ width: 300 }}
        renderInput={(params) => (
          <TextField {...params} label="Combo box" variant="outlined" />
        )}
        onChange={onChange}
        disablePortal
      />
      <h3>Kendo Autocomplete</h3>
      <AutoComplete data={data} textField="title" onChange={onChange} />
    </div>
  );
};

Demo Link: StackBlitz Demo

Additional Notes:

• The issue might be due to event propagation from the MUI Popper component.

• A potential fix could involve preventing the GridColumnMenuFilter from closing when clicking inside the Popper.

• Seeking guidance on how to prevent this behavior while maintaining correct filtering functionality.

Looking forward to your support and suggestions. Thank you!

[Trustin]

I tried to use 2 ways: default and using disablePortal, but both were not working correctly with the expectation, like using the Kendo Autocomplete component

<Autocomplete
        id="combo-box-demo"
        options={products}
        getOptionLabel={(option) => option.ProductName}
        style={{ width: 300 }}
        renderInput={(params) => (
          <TextField {...params} label="Combo box" variant="outlined" />
        )}
        onChange={onChange}
        PopperComponent={(popperProps) => (
          <Popper
            {...popperProps}
            disablePortal
            style={{ ...popperProps.style, zIndex: 9999 }}
          />
        )}
      />

[Yanko]

Hello, Trustin,

Thank you for the provided example.

I tested the scenario with `disablePortal` both enabled and disabled. When disabled the ColumnMenu closes as described in your initial message, when enabled the ColumnMenu stays open after selection but not all options are displayed as those outside the ColumnMenu container are not displayed. 

Since the KendoReact AutoComplete works as expected the issue is with the MUI Autocomplete component. I suggest contacting the MUI support to inquire about this scenario.

I can help you customize the KendoReact AutoComplete to fit your requirements if such an approach is feasible.

Regards,
Yanko
Progress Telerik