Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[Select] Null value not working #23558

Closed
radzk opened this issue Nov 15, 2020 · 3 comments · Fixed by #23940
Closed

[Select] Null value not working #23558

radzk opened this issue Nov 15, 2020 · 3 comments · Fixed by #23940
Labels
component: select This is the name of the generic UI component, not the React module! docs Improvements or additions to the documentation good first issue Great for first contributions. Enable to learn the contribution process.

Comments

@radzk
Copy link

radzk commented Nov 15, 2020

https://material-ui.com/api/select/
The docs says that you cannot use empty string value for value field. As long as this is eventually acceptable, there is an issue, because for some reason null value also does not work. These both totally break my communication with backend service, because it seems I'll have to find and replace the values before saving (I do want to save null).
If I change the nulls to any non-empty string, it works, but it isnt a solution.

const options = [{ name: 'Default', value: null }, { name: 'Alternative', value: 'alternative' }]; const currentValue = null;

   <Select
       name={`content.${index}.target`}
                    key={`content.${index}.target`}
                    onChange={handleChange}
                    value={currentValue}>
                    {options.map((option) => <MenuItem value={option.value}>
                        {option.name}
                    </MenuItem>)}
                </Select>
@radzk radzk added the status: waiting for maintainer These issues haven't been looked at yet by a maintainer label Nov 15, 2020
@oliviertassinari oliviertassinari added component: select This is the name of the generic UI component, not the React module! docs Improvements or additions to the documentation and removed status: waiting for maintainer These issues haven't been looked at yet by a maintainer labels Nov 15, 2020
@oliviertassinari
Copy link
Member

@radzk the value can't be null, check the warning in the console. Regarding the usage of an empty string, this is valid. Looking at the description, on part is outdated, we can apply the following change:

diff --git a/packages/material-ui/src/Select/Select.d.ts b/packages/material-ui/src/Select/Select.d.ts
index 36819277b5..16db364bf3 100644
--- a/packages/material-ui/src/Select/Select.d.ts
+++ b/packages/material-ui/src/Select/Select.d.ts
@@ -149,7 +149,6 @@ export interface SelectProps<T = unknown>
   SelectDisplayProps?: React.HTMLAttributes<HTMLDivElement>;
   /**
    * The `input` value. Providing an empty string will select no options.
-   * This prop is required when the `native` prop is `false` (default).
    * Set to an empty string `''` if you don't want any of the available options to be selected.
    *
    * If the value is an object it must have reference equality with the option in order to be selected.

@oliviertassinari oliviertassinari added the good first issue Great for first contributions. Enable to learn the contribution process. label Nov 15, 2020
@radzk
Copy link
Author

radzk commented Nov 16, 2020

@oliviertassinari I'm not sure about this removed line, I don't think it has anything to do with my problem.

I'm referring more to the next line: "Set to an empty string '' if you don't want any of the available options to be selected."

Anyway I found a workaround for my case for now, just switching null to 'all' and vice-versa, like below..
Thanks for your time!

// ContentTarget.ALL = 'all';
...
onChange={(e) => {
     setFieldValue(`content.${index}.target`, e.target.value === ContentTarget.ALL ? null : e.target.value);
}}
value={values.target === null ? ContentTarget.ALL : values.target}
...

@croraf
Copy link
Contributor

croraf commented Sep 13, 2021

[Feature request] Would it be possible to redesign the component to allow null value for the option?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
component: select This is the name of the generic UI component, not the React module! docs Improvements or additions to the documentation good first issue Great for first contributions. Enable to learn the contribution process.
Projects
None yet
Development

Successfully merging a pull request may close this issue.

3 participants