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

[ZeeshanTamboli]

Could you provide a minimal reproduction? It helps us troubleshoot. A live example would be perfect. This StackBlitz sandbox template may be a good starting point.

[benosmond]

@ZeeshanTamboli sure, here you go:
https://stackblitz.com/edit/stackblitz-starters-px9dru?file=src%2FApp.tsx

There's a value in options that has a blank label, which when selected causes Autocomplete to render as if it's got nothing selected. This is confusing because value has an object in it, with an ID, so other parts of my UI will render as if a selection is there.

I instead want it to render as if the label [blank] is selected. Something like this:

The italics are important to distinguish between a blank label (an empty string) and the literal text '[blank]'.

[ZeeshanTamboli]

Here's how you can do it: https://stackblitz.com/edit/stackblitz-starters-syz7zg?file=src%2FApp.tsx

[github-actions]

👋 Thanks for using our open-source projects!

We use GitHub issues exclusively as a bug and feature requests tracker, however,
this issue appears to be a support request.

For support with Material UI please check out https://mui.com/material-ui/getting-started/support/. Thanks!

If you have a question on Stack Overflow, you are welcome to link to it here, it might help others.
If your issue is subsequently confirmed as a bug, and the report follows the issue template, it can be reopened.