[data grid] A GridFilterOperator with InputComponent set has inconsistent behavior

[ZzzZeta]

Steps to reproduce

Link to live example: https://codesandbox.io/p/sandbox/xenodochial-driscoll-c3wmcx

A: A filter is always created with undefined value when open the panel.

Steps:

1. Click the filter button. The panel is opened and a filter is created with undefined value but filter indicator is not displayed.

   {
    "items": [
      {
        "field": "firstName",
        "operator": "contains",
        "id": 78333
      }
    ],
    "logicOperator": "and",
    "quickFilterValues": [],
    "quickFilterLogicOperator": "and"
   }

2. Close the panel and nothing changed.

B: If input value is not undefined, delete a filter requires 2 delete clicks

Steps:

1. Click filter.
   1. Input anything

      {
      "items": [
        {
          "field": "firstName",
          "operator": "contains",
          "id": 3327,
          "value": "dsadsa",
          "fromInput": ":rsp:"
        }
      ],
      "logicOperator": "and",
      "quickFilterValues": [],
      "quickFilterLogicOperator": "and"
      }

   2. Input anything and then delete all characters.

      {
      "items": [
        {
          "field": "firstName",
          "operator": "contains",
          "id": 3327,
          "value": "",
          "fromInput": ":rs3:"
        }
      ],
      "logicOperator": "and",
      "quickFilterValues": [],
      "quickFilterLogicOperator": "and"
      }

2. Click the delete button and the filter (input) value is actually set to undefined rather than deleting the filter. The filter indicator is gone.

   {
    "items": [
      {
        "field": "firstName",
        "operator": "contains",
        "id": 83466,
        "fromInput": ":rp1:"
      }
    ],
    "logicOperator": "and",
    "quickFilterValues": [],
    "quickFilterLogicOperator": "and"
   }

3. Click the delete button again. The filter is finally deleted and the panel is closed.

   {
    "items": [],
    "logicOperator": "and",
    "quickFilterValues": [],
    "quickFilterLogicOperator": "and"
   }

Current behavior

Explained in steps to reproduce.

Expected behavior

• The filter should not be created when panel is opened because the input is empty.
• The filter should always be deleted when delete button is clicked.

Context

Filtering behavior should be consistent.

Your environment

npx @mui/envinfo

``` System: OS: Linux 6.1 Debian GNU/Linux 12 (bookworm) 12 (bookworm) Binaries: Node: 20.9.0 - /usr/local/bin/node npm: 9.8.1 - /usr/local/bin/npm pnpm: 8.10.2 - /usr/local/share/npm-global/bin/pnpm Browsers: Chrome: Not Found npmPackages: @emotion/react: 11.11.4 => 11.11.4 @emotion/styled: 11.11.5 => 11.11.5 @mui/material: 5.15.18 => 5.15.18 @mui/x-data-grid: 7.5.1 => 7.5.1 @types/react: 18.2.38 => 18.2.38 react: 18.2.0 => 18.2.0 react-dom: 18.2.0 => 18.2.0 typescript: 4.4.4 => 4.4.4 ```

Search keywords: GridFilterOperator

[michelengelen]

Hey @ZzzZeta ... thanks for raising this. It seems we are a bit inconsistent here, since it does work the way you would expect it when using multi-filters. I will add this to the board for the team to have a look! 👍🏼