Inputs change order position in Safari

Question

I have made a simple web app in React which works fine however when I run it in Safari it change order position based on which one is being typed. Here is a quick video

Inputs change postions

Basically I have striped the whole code to a basic elements but without any change. Once I have removed 2 way binding it started to work without that behaviour. So is it a bug in safari or how can I use 2 way binding without that behaviour? Here is the code I'm using to render those inputs

inputChangedHandler = (event, controlName) => {
    const updatedControls = {
        ...this.state.controls,
        [controlName]: {
            ...this.state.controls[controlName],
            value: event.target.value,
            valid: this.checkValidity(event.target.value, this.state.controls[controlName].validation),
            touched: true
        }
    };
    this.setState({ controls: updatedControls })
}

render() {
    const formElementArray = [];
    for (let key in this.state.controls) {
        formElementArray.push({
            id: key,
            config: this.state.controls[key]
        });
    }

    let form = formElementArray.map(formElement => (
        <Input
            key={formElement.id}
            elementType={formElement.config.elementType}
            elementConfig={formElement.config.elementConfig}
            value={formElement.config.value}
            invalid={!formElement.config.valid}
            shouldValidate={formElement.config.validation}
            touched={formElement.config.touched}
            changed={(event) => this.inputChangedHandler(event, formElement.id)}
            />
    ))
return (
        <div className={classes.Auth}>
            <form onSubmit={this.submitHandler}>
                {form}
                <Button btnType="Success">SUBMIT</Button>
            </form>
        </div>
    );

I just created brand new app in react with nothing but 2 inputs which uses 2 way binding and I get exactly the same result

files with node with node folder

files without node without node folder

score 4 · Accepted Answer · answered Dec 18 '18 at 14:19

4

It's not a bug, it's standard behavior: Does JavaScript Guarantee Object Property Order?

If you want the order to be consistent you should put the keys in controls into an array, or get an array of keys, sort them, and iterate over those in your render() method.

answered Dec 18 '18 at 14:19

steenuil

354
3
5

Thanks steenuil.. Thanks for clarification. The array has keys and I didn't even try to sort them because all the other browsers are sorting the array correctly all the time. Only Safari has this issue. I'm gonna try to sort it then ... Thank you very much – Dec 18 '18 at 14:49
I have taken differen approach to this issue but I still think this is a bug in safari... This is normal way I’ve been taught to render inputs in React. This method work well in all browsers appart from safari so I can not believe that this is a standard behaviour.. – Dec 18 '18 at 19:38

Inputs change order position in Safari

1 Answers1