[Autocomplete] `renderValue` does not render falsy values

[TobiasKrahn]

Steps to reproduce

Steps:

1. Open this link to live example: (required)
   https://stackblitz.com/edit/ngv7uzgm?file=src%2FDemo.tsx
2. Choose Option A
3. Value will not be rendered

this should be caused by this condition renderValue && value in

material-ui/packages/mui-material/src/Autocomplete/Autocomplete.js

Line 593 in cd25f4f

} else if (renderValue && value) {

Current behavior

Autocomplete does not get called for falsy values (like 0)

Expected behavior

renderValue should only be skipped for empty arrays, null or undefined as a value

Context

Select a Enum value with an autocomplete

Your environment

npx @mui/envinfo

  Don't forget to mention which browser you used.
  Output from `npx @mui/envinfo` goes here.

Search keywords: Autocomplete, falsy, renderValue

[ZeeshanTamboli]

Thanks for reporting this — it's a bug.

We can fix it with the following change:

- } else if (renderValue && value) {
+ } else if (renderValue && value != null) {

This allows renderValue to handle 0 correctly while still skipping null and undefined.

We should also add a test case to cover this scenario.

[LakshitAgarwal]

can i take up this issue?

[0210shivam]

Yes, this issue is currently unassigned and there’s no open PR for it, so you're good to take this up. Feel free to go ahead!

[ZeeshanTamboli]

@LakshitAgarwal Feel free to create a PR.