reactjs - Material-ui Textfield は、最初の redux-form/FOCUS でウィンドウを上に自動スクロールします

Question

material-ui のTextfieldでredux-formを使用してフォームを作成し、メールを送信しました。1 つのことを除いて、すべてがうまく機能しています。TextField を初めてクリックすると、ウィンドウが上にスクロールします。場合によっては、フォーカスが TextField にとどまります。その後、正常に動作しています

何が起こっているかの例を次に示します。

私のフォーム：

import React, { PropTypes, Component } from 'react';
import { reduxForm } from 'redux-form';
import TextField from 'material-ui/TextField';
import RaisedButton from 'material-ui/RaisedButton';
import withStyles from 'isomorphic-style-loader/lib/withStyles';
import styles from './EmailForm.css';
import theme from '../../../theme/theme';
import { mediaQueries } from '../../../decorators';

export const fields = ['name', 'email', 'subject', 'message'];

const validate = values => {
   ...
};

@mediaQueries
@withStyles(styles)
@reduxForm({
    form: 'EmailForm',
    fields,
    validate
})
export default class EmailForm extends Component {

    static propTypes = {
        fields: PropTypes.object.isRequired,
        handleSubmit: PropTypes.func.isRequired,
        submitting: PropTypes.bool.isRequired,
        mediaQueries: PropTypes.func.isRequired,
    };

    state = {
        mobile: false,
    }

    componentDidMount() {
        this.props.mediaQueries('(max-width: 399px)', () => {
            this.setState({ mobile: true });
        });
        this.props.mediaQueries('(min-width: 400px) and (max-width: 919px)', () => {
            this.setState({ mobile: true });
        });
        this.props.mediaQueries('(min-width: 920px)', () => {
            this.setState({ mobile: false });
        });
    }

    render() {
        const { fields: { name, email, subject, message }, handleSubmit, submitting } = this.props;
        const emailMarginLeft = this.state.mobile ? 0 : '8px';

        // SOME STYLE HERE

        return (
            <form
                className={styles.form}
                onSubmit={handleSubmit} >
                <div className={styles.nameAndEmail}>
                    <TextField style={nameFieldStyle}
                        floatingLabelText="Votre Nom"
                        floatingLabelStyle={labelStyle}
                        floatingLabelFocusStyle={labelFocusStyle}
                        errorText={(name.touched && name.error) ? name.error : ''}
                        errorStyle={errorStyle}
                        id="nameField"
                        {...name} />
                    <TextField style={emailTextField}
                        floatingLabelText="Votre courriel"
                        floatingLabelStyle={labelStyle}
                        floatingLabelFocusStyle={labelFocusStyle}
                        errorText={(email.touched && email.error) ? email.error : ''}
                        errorStyle={errorStyle}
                        id="emailField"
                        {...email} />
                </div>
                <div className={styles.subjectAndMessage}>
                    <TextField style={textField}
                        floatingLabelText="Sujet"
                        floatingLabelStyle={labelStyle}
                        floatingLabelFocusStyle={labelFocusStyle}
                        errorText={(subject.touched && subject.error) ? subject.error : ''}
                        errorStyle={errorStyle}
                        id="sujet"
                        {...subject} />
                    <TextField style={messageTextField}
                        floatingLabelText="Message"
                        floatingLabelStyle={labelStyle}
                        floatingLabelFocusStyle={labelFocusStyle}
                        errorText={(message.touched && message.error) ? message.error : ''}
                        errorStyle={errorStyle}
                        multiLine
                        rows={5}
                        id="message"
                        {...message} />
                </div>
                <RaisedButton
                    style={buttonStyle}
                    key="submitButton"
                    type="submit"
                    label="Envoyer"
                    primary
                    disabled={submitting} />
            </form>
        );
    }
}

フォームを使用するコンポーネント:

@withStyles(styles)
export default class ContactUs extends Component {

    constructor(props) {
        super(props);
        this.handleSubmit = this.handleSubmit.bind(this);
    }

    handleSubmit(data) {
        // Do stuff
    }

    render() {
        return (
            <div className={styles.contactUs}>
                <h2>Formulaire</h2>
                <EmailForm
                    ref="EmailForm"
                    onSubmit={this.handleSubmit}
                    submitting />
            </div>
        );
    }
}

インポートされたテーマには、material-ui スタイルに使用される色が含まれています。また、TextFields の onFocus および onBlur props が機能しないこともわかりました。単純にテキストをログに記録しようとしましたが、うまくいきません。

さらに奇妙なのは、この emailForm を使用するのは初めてではないということです。別のサイトで使用しましたが、問題なく動作していました。

なぜそれが起こっているのか誰にも分かりますか？