material-ui/core Select doesn't render with empty array as value

[don-p]

When using multiple in a Select component, the value is an Array. When there are no items selected, this results in an empty array. However, the renderValue() function is not execute in this case when the current value is an empty array.

• [x] This is not a v0.x issue.
• [x] I have searched the issues of this repository and believe that this is not a duplicate.

Expected Behavior 🤔

renderValue() function should always be called when the selected value changes - even if it changes to an empty array as current value.

Current Behavior 😯

See above - renderValue() function is not called with an empty array as current value. This is due to the following in utils.js#15:

function hasValue(value) {
  return value != null && !(Array.isArray(value) && value.length === 0);
} // Determine if field is empty or filled.

Steps to Reproduce 🕹

Link:

1. Create a Select, with multiple attribute true.
2. Add a renderValue property to the select.
3. Initialize the value property of the select with a var containing an empty (zero-length) Array.
4. Place a breakpoint in the renderValue() function, and note that renderValue() is not called when the value changes to an empty Array.

Context 🔦

The Select component should support a mechanism for de-selecting all items, which will result in an empty Array, and for catching this state in the renderValue() function in order to render a 'placeholder' or other indication that no value is selected.

Your Environment 🌎

| Tech | Version |
|--------------|---------|
| Material-UI | v3.9.2 |
| React | 16.7.0 |
| Browser | |
| TypeScript | |
| etc. | |

[oliviertassinari]

@don-p Have you tried with?

<Select displayEmpty />

[don-p]

Yes, I did look at that property, as well as some issues related to it - and I tend to agree that the documentation of that property isn't very clear, in terms of making it obvious about what it does or what to expect:

If true, the selected item is displayed even if its value is empty. 

I've also seen that this is complicated by the following in SelectInput.js:

        if (multiple) {
          if (!Array.isArray(value)) {
            throw new Error('Material-UI: the `value` property must be an array ' + 'when using the `Select` component with `multiple`.');
          }

I'll look at the displayEmpty to see if it address this use case.

Thanks.

[don-p]

OK - the displayEmpty property does indeed address this case.

I'd suggest considering a bit more descriptive documentation of this, for example:

displayEmpty: If true, the selected item will be rendered, even if its value is empty.  If the intent is to show a meaningful display in this case, the renderValue function property must be used, to check for the case of an empty selected value and provide a custom render value.

[oliviertassinari]

@don-p We would be happy to accept a better property description! Do you want to submit one? :)

[testuserx]

I have got the same issue (MUI 3.9.2), but I already added displayEmpty and renderValue:

<Select
    displayEmpty={true}
    multiple
    value={[]}
    renderValue={(selected) => {console.log(selected);return(<div>test</div>)}}
    onChange={this.handleChange}
>

It make infinite loop (selected value of [] is displayed in console multiple times and crashes at the end) and I get following errors in console:

[oliviertassinari]

@testuserx Could you provide a reproduction?

[bigtone1284]

@oliviertassinari Hey I was looking to contribute to the project and was looking for a good issue from amongst the "good first issue" labelled issues. I reached out to @mbrookes regarding some good issues to start with and he recommended these issues would be a good place to start.

Anyway, for this issue, it seems like the Select component was working as expected and some additional documentation around how to use the displayEmpty prop is needed.

Do I understand the context around this issue?

[oliviertassinari]

@bigtone1284 Thanks for your interest in contributing! You are on the right track here :). Yes, I think that you understand the context correctly.

[bigtone1284]

@oliviertassinari I submitted a PR here https://github.com/mui-org/material-ui/pull/16376, I'd appreciate any feedback on this.