A
A
AndreyKiyah2019-09-19 15:44:33
JavaScript
AndreyKiyah, 2019-09-19 15:44:33

React-datepicker not closing?

Dear friends, tell me please, the datepicker does not close after choosing a date.

{!!createPeriod && (
                                <div className="FilterForm__item FilterForm__item--full">
                                    <p>{createPeriod.label}</p>
                                    <div className="FilterForm__range">
                                        <div className={`FilterForm__input range-field ${this.props.form["InvoicesSearch[createdFrom]"] && 'FilterForm__input--fill'}`}>
                                            <label>
                                                <DatePicker
                                                    dateFormat="dd.MM.yyyy"
                                                    selected={this.props.form["InvoicesSearch[createdFrom]"]}
                                                    name="InvoicesSearch[createdFrom]"
                                                    withPortal={isMobile}
                                                    maxDate={this.props.form["InvoicesSearch[createdTo]"]}
                                                    onChangeRaw={e => e.preventDefault()}
                                                    placeholderText="От"
                                                    popperModifiers={{
                                                        offset: {
                                                            enabled: true,
                                                            offset: '5px, 10px',
                                                            offsetRight: '400px'
                                                        },
                                                        preventOverflow: {
                                                            enabled: true,
                                                            escapeWithReference: false, // force popper to stay in viewport (even when input is scrolled out of view)
                                                            boundariesElement: 'viewport'
                                                        }
                                                    }}
                                                    onChange={(e) => this.props.handleChange("InvoicesSearch[createdFrom]", e)}
                                                />
                                                <i className="fal fa-calendar"></i>
                                            </label>
                                        </div>
                                        <div className={`FilterForm__input range-field ${this.props.form["InvoicesSearch[createdTo]"] && 'FilterForm__input--fill'}`}>
                                            <label>
                                                <DatePicker
                                                    dateFormat="dd.MM.yyyy"
                                                    selected={this.props.form["InvoicesSearch[createdTo]"]}
                                                    name="InvoicesSearch[createdTo]"
                                                    withPortal={isMobile}
                                                    onChangeRaw={e => e.preventDefault()}
                                                    placeholderText="До"
                                                    popperModifiers={{
                                                        offset: {
                                                            enabled: true,
                                                            offset: '5px, 10px',
                                                            offsetRight: '400px'
                                                        },
                                                        preventOverflow: {
                                                            enabled: true,
                                                            escapeWithReference: false, // force popper to stay in viewport (even when input is scrolled out of view)
                                                            boundariesElement: 'viewport'
                                                        }
                                                    }}
                                                    onChange={(e) => this.props.handleChange("InvoicesSearch[createdTo]", e)}
                                                />
                                                <i className="fal fa-calendar"></i>
                                            </label>
                                        </div>
                                    </div>
                                </div>
                            )}

handleChange = (key, value) => {
        this.setState({
            form: {
                ...this.state.form,
                [key]: value
            }
        })
    }

Answer the question

In order to leave comments, you need to log in

1 answer(s)
A
AndreyKiyah, 2019-09-19
@AndreyKiyah

e.preventDefault()}> solves the problem

Didn't find what you were looking for?

Ask your question

Ask a Question

731 491 924 answers to any question