Strange difference in behaviour between preact and react in combination with @material-ui and conditional operator

[masbaehr]

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

[developit]

@masbaehr This can be corrected by adding key="2fa" to the last TextField.

[masbaehr]

Oh okay, is it a requirement in preact to use "key" for every component? Maybe I missed that? By the way i also noticed some other differences in rendering e.g. the defaultValue is not correctly populated if a variable changes on rerender

e.g. for a wrapped in { loadingdone && <Textfield defaultValue={value}} it was remaining empty even if value is set and loadingdone true.

[marvinhagemeister]

@masbaehr No it's not a requirement. Keys can certainly give hints to the reconciler, but the behaviour described here is a bug. Keys do serve as a workaround here if you urgently need to ship it into production.

Let's file a separate issue for the defaultValue issue you're experiencing. Otherwise it becomes a nightmare for us to track and prioritise👍

[marvinhagemeister]

Managed to narrow it down to a simple reproduction case:

// #2949
it('should not swap unkeyed chlildren', () => {
	class X extends Component {
		constructor(props) {
			super(props);
			this.name = props.name;
		}
		render() {
			return <p>{this.name}</p>;
		}
	}

	function Foo({ condition }) {
		return (
			<div>
				{condition ? '' : <X name="A" />}
				{condition ? <X name="B" /> : ''}
			</div>
		);
	}

	render(<Foo />, scratch);
	expect(scratch.textContent).to.equal('A');

	render(<Foo condition />, scratch);
	expect(scratch.textContent).to.equal('B');

	render(<Foo />, scratch);
	expect(scratch.textContent).to.equal('A');
});

Interestingly the error doesn't occur when we replace the strings as an empty value with null.