Strange difference in behaviour between preact and react in combination with @material-ui and conditional operator #2949
Description
This is the code to test the behavior difference.
Note: I know that it can be fixed by using the "boolswitch &&" / "!boolswitch &&" Syntax. But i noticed this after switching from react to preact. I'm not entirely sure if this might be a material-ui shortcoming but as it happened after switching to Preact i thought it might be better suited to post the issue here.
import React from 'react';
import TextField from '@material-ui/core/TextField';
function Debug(props) {
const [boolswitch, setboolswitch] = React.useState(false);
return (
<div>
{boolswitch ? '' :
<TextField
style={{width: "100%"}}
label={"Username"}
variant="outlined"
margin="normal"
onKeyPress={event => {
}}
onChange={event => {}}
/>
}
{boolswitch ? '' :
<TextField
style={{width: "100%"}}
label={"Password"}
variant="outlined"
margin="normal"
onKeyPress={event => {
}}
onChange={event => {}}
/>
}
{boolswitch ?
<TextField
style={{width: "100%"}}
label={"2fa"}
variant="outlined"
margin="normal"
onKeyPress={event => {
}}
onChange={event => {}}
/>
: ''
}
<button onClick={event => {
setboolswitch(true);
}}>Continue</button>
</div>
);
}
export default Debug;
First step:
Second step:
Problem: The internal value state of the username field is rendered for the now visible 2fa field
I also know that it could be avoided using States for all the values, but this would mean that a state update while typing would be needed which slows down the typing.
Summary: Somehow the ? '' : '' Syntax seems to cause a difference while rendering in Preact vs. React