[question] How can I render a specific value in an Autocomplete component differently?

[benosmond]

The problem in depth

I have an Autocomplete component which I'm using with a standard TextField input like this:

<Autocomplete id="filter"
    autoHighlight
    selectOnFocus
    clearOnBlur
    disabled={disabled}
    renderInput={params => <TextField {...params} label="Filter" />}
    options={options}
    value={value}
    onChange={(_, value) => setValue(value)}
    inputValue={inputValue}
    onInputChange={(_, inputValue) => setInputValue(inputValue)} />

It is possible for my options to have a label that is blank (''), and when this happens I want to avoid showing an empty value in the input.

Instead, I'd like to show the text [blank] - which is what I've done for the options using renderOption.

So far, I haven't been able to get it working. I've tried assigning the TextField component in renderInput a value directly:

renderInput={params => <TextField {...params} label="Filter" value="[blank]" />}

Your environment

`npx @mui/envinfo`

``` System: OS: Windows 11 10.0.22631 Binaries: Node: 20.12.2 - C:\Program Files\nodejs\node.EXE npm: 10.5.0 - C:\Program Files\nodejs\npm.CMD pnpm: Not Found Browsers: Chrome: Not Found Edge: Chromium (124.0.2478.67) npmPackages: @emotion/react: 11.10.6 @emotion/styled: 11.10.6 @mui/base: 5.0.0-alpha.96 @mui/core-downloads-tracker: 5.12.2 @mui/icons-material: 5.11.16 @mui/material: ^5.10.15 => 5.12.2 @mui/private-theming: 5.12.0 @mui/styled-engine: 5.12.0 @mui/system: 5.12.1 @mui/types: 7.2.4 @mui/utils: 5.14.15 @mui/x-data-grid: 6.16.3 @mui/x-data-grid-premium: ^6.16.3 => 6.16.3 @mui/x-data-grid-pro: 6.16.3 @mui/x-date-pickers: ^6.11.0 => 6.11.0 @mui/x-license-pro: ^6.0.0-beta.3 => 6.10.2 @mui/x-tree-view: ^6.0.0-alpha.1 => 6.0.0-alpha.1 @types/react: ^18.0.21 => 18.2.0 react: ^17.0.2 => 17.0.2 react-dom: ^17.0.2 => 17.0.2 typescript: ^5.3.3 => 5.3.3 ```

Search keywords: textfield, autocomplete, render Order ID: 82553

Search keywords: