Входы изменяют позицию заказа в Safari

Question

Я сделал простое веб-приложение в React, которое прекрасно работает, однако, когда я запускаю его в Safari, оно меняет позицию заказа в зависимости от того, какое из них вводится.Вот быстрое видео

Входы меняют положение

По сути, я расширил весь код до базовых элементов, но без каких-либо изменений.Как только я удалил 2 способа привязки, он начал работать без этого поведения.Так это ошибка в сафари или как я могу использовать двухстороннее связывание без такого поведения?Вот код, который я использую для рендеринга этих входных данных

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>
    );

Я только что создал совершенно новое приложение в реакции только с двумя входами, которые используют двухстороннее связывание, и я получаю точно такой же результат

файлы с узлом с папкой узла

файлы без узла без папки узла

Answer 1

Это не ошибка, это стандартное поведение: Гарантирует ли JavaScript порядок свойств объекта?

Если вы хотите, чтобы порядок был последовательным, вы должны поместить ключи в controls вили получить массив ключей, отсортировать их и выполнить итерации по методу render().