[data grid] Header filters - Label of a Select input always shrinks even when there's no value selected

[snelsi]

Steps to reproduce

https://mui.com/x/react-data-grid/filtering/header-filters/

Current behavior

For free-text header filters label shrinks only when the input has some value.

However, label of the select/dropdown filter is always shrinked, even when there are no value selected.

This looks off

Expected behavior

Label should shrink only when some option is selected

Context

Would be really nice if someone could provide a codesandbox with DataGrid Header filters:

1. not shrinking if there's no value selected
2. their underline border removed

Your environment

System:
OS: Linux 5.15 Ubuntu 20.04.6 LTS (Focal Fossa)
Binaries:
Node: 20.12.1 - ~/.nvm/versions/node/v20.12.1/bin/node
npm: 10.9.2 - ~/.nvm/versions/node/v20.12.1/bin/npm
pnpm: Not Found
Browsers:
Chrome: Not Found
npmPackages:
@emotion/react: ^11.13.3 => 11.14.0
@emotion/styled: ^11.13.0 => 11.14.0
@mui/core-downloads-tracker: 6.3.0
@mui/material: ^6.0.0 => 6.3.0
@mui/private-theming: 6.3.0
@mui/styled-engine: 6.3.0
@mui/system: 6.3.0
@mui/types: 7.2.20
@mui/utils: 6.3.0
@mui/x-data-grid: 7.23.6
@mui/x-data-grid-pro: 7.23.6
@mui/x-date-pickers: 7.23.3
@mui/x-date-pickers-pro: ^7.18.0 => 7.23.3
@mui/x-internals: 7.23.6
@mui/x-license: ^7.17.0 => 7.23.6
@types/react: ^18.3.1 => 18.3.18
react: ^18.3.1 => 18.3.1
react-dom: ^18.3.1 => 18.3.1
typescript: ^5.6.2 => 5.7.2

Search keywords: Data Grid, Header filters, Select input, Label

[MBilalShafi]

Hey @snelsi, the header filters in v8 had a design rehaul that makes the behavior consistent for all the column types. You can check the updated version here: https://next.mui.com/x/react-data-grid/filtering/header-filters/

v8 stable release is scheduled to be around the end of Q1 2025, so it should not be far from now.
Does the design update work for you?

[snelsi]

Can you please provide a codesabdbox with a workaround for v7 in the meantime?
I'd rather have a quick patch now

[michelengelen]

Seems related to this: #15778

Might be because the value is not undefined, but null or ''. We should check that as it might be an easy fix!

[snelsi]

Tried manually overriding item.value in headerFilterCell function with undefined / null / '', but it doesn't seem to have any effect

[MBilalShafi]

The reason why the label doesn't go to its position is because of (1) we use an empty value in the beginning of the select options and (2) the shrink prop passed to the InputLabel component forces the label to shrink.

mui-x/packages/x-data-grid/src/components/panel/filterPanel/GridFilterInputSingleSelect.tsx

Lines 127 to 131 in 53acdfc

	<rootProps.slots.baseInputLabel
	{...rootProps.slotProps?.baseInputLabel}
	id={labelId}
	htmlFor={id}
	shrink

For a quick patch, I've duplicated the GridFilterInputSingleSelect component, removed the shrink prop and used it in this example: https://stackblitz.com/edit/react-avwqjfur?file=Demo.tsx

Let me know if it could work for you for now.

[snelsi]

I think I found an easier way to do the same thing

<DataGrid
  slots={{
    baseInputLabel: ({ shrink, ...rest }) => <InputLabel {...rest} />,
  }}
/>