Material-ui: Switch status is not being updated on db value

[muscaiu]

As u can see in the live example below ,the label color is being updated but the Switch is not, even though they use the same value.

CodeSandbox example

[support[bot]]

👋 Thanks for using Material-UI!

We use the issue tracker exclusively for bug reports and feature requests, however,
this issue appears to be a support request or question. Please ask on StackOverflow where the
community will do their best to help. There is a "material-ui" tag that you can use to tag your
question.

If you would like to link from here to your question on SO, it will help others find it.
If your issues is confirmed as a bug, you are welcome to reopen the issue using the issue template.

[oliviertassinari]

@muscaiu I'm not sure to understand what you mean, you can use the theme provider to change the primary color: https://codesandbox.io/s/04j2mzq0vv.

[joshwooding]

@oliviertassinari Sometimes when loading the page this happens:

Ignore the loop it only happens once :)

[eps1lon]

https://stackoverflow.com/questions/53502750/material-ui-switch-status-is-not-being-updated-from-db-value/53504961#53504961

Although it does not log warnings. I thought we do log warnings if components change from controlled to uncontrolled?

[oliviertassinari]

Oh ok, I have misunderstood the problem. I can't reproduce it 🤔.

[eps1lon]

@oliviertassinari It's a race condition. Try switching immediately once it's mounted.

- const dbStatus = status && status[0].status;
+ const dbStatus = Boolean(status && status[0].status);

[joshwooding]

https://codesandbox.io/s/pj65mv7oxm Seems like there's a bug with the Switch component? It throws the error with a normal checkbox

[eps1lon]

@joshwooding Oh so it does trigger warnings. No idea why I missed that. Again the error is in the usercode. See https://github.com/mui-org/material-ui/issues/13704#issuecomment-442207466

[joshwooding]

@eps1lon I added a checkbox to see if it throws on native components if you remove it, it doesn't throw it anymore

It also doesn't throw the error with a Checkbox component
It throws with the TextField component: https://codesandbox.io/s/885l4o2pn8

[eps1lon]

Just to be clear: The actual error is that Switch is not warning that the component is switching between controlled and uncontrolled.

[joshwooding]

Just to be clear: The actual error is that Switch is not warning that the component is switching between controlled and uncontrolled.

Sorry If I didn't make it clear enough, that's what I meant by:

https://codesandbox.io/s/pj65mv7oxm Seems like there's a bug with the Switch component? It throws the error with a normal checkbox

👍

[DominikSerafin]

In my case, I was providing checked={this.state.someValue} where someValue was value loaded from backend. And while that value was loading from backend, the checked was ultimately undefined.

And I assumed that not providing checked at all (or providing undefined to it) would result in component being controlled by default.

And I also assumed that it would get uncontrolled only if defaultChecked was provided.

I think some other developers might fall in this trap too and that warning would help a lot. But I don't think lack of warning is the main problem here.

---

Shouldn't the Switch & Checkbox components kick in into controlled mode after providing controlled checked?

It feels more intuitive for me because that's the behavior of vanilla checkbox. In my codepen below, I'm changing native checkbox value from undefined to true after 5 seconds. And after that, the checkbox is controlled and visibly shows that it's checked.

https://codepen.io/anon/pen/pQqMvm

And in case of MUI Switch/Checkbox going from checked={undefined} to checked={true} (like in my case) makes the component stay unchecked visually and uncontrolled.

Shouldn't it actually make it visually checked and controlled? Like in native checkbox?

[oliviertassinari]

@DominikSerafin We have updated the implementation (#13726) to reproduce the native checkbox behavior. With a native checkbox, you can't switch between the controlled and uncontrolled mode.

[DominikSerafin]

Thanks @oliviertassinari!

Just a question - what do you mean that you can't switch between controlled and uncontrolled mode in native checkbox? In that codepen I provided, when the state.personChecked is undefined, the checkbox is uncontrolled (toggleable without any additional state logic), but after the value of state.personChecked changes to true, the checkbox is controlled (can be toggled only with additional state logic). (And vice versa.)

[oliviertassinari]

@DominikSerafin Your example raises a warning:

We won't trade bundle size for supporting logics that React warns against.

[DominikSerafin]

@oliviertassinari got it. Thanks for explanation.