The Wayback Machine - https://web.archive.org/web/20201124045928/https://github.com/mui-org/material-ui/issues/23558
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

Open
radzk opened this issue Nov 15, 2020 · 2 comments
Open

[Select] Null value not working #23558

radzk opened this issue Nov 15, 2020 · 2 comments

Comments

@radzk
Copy link

@radzk 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>
@oliviertassinari
Copy link
Member

@oliviertassinari oliviertassinari commented Nov 15, 2020

@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.
@radzk
Copy link
Author

@radzk 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}
...
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Linked pull requests

Successfully merging a pull request may close this issue.

None yet
2 participants
You can’t perform that action at this time.