Inputs as children cannot be focused

[dwoznicki]

Expected behavior

When passing in inputs as children to DatePicker, it should be possible to focus them.

Actual behavior

Currently, once the calendar input is blurred, focus is immediately reapplied to it. You can see this happening below.

react-datepicker/src/index.jsx

Lines 354 to 365 in 5d5cc88

	handleBlur = event => {
	if (
	this.state.open &&
	!this.props.withPortal &&
	!this.props.showTimeInput
	) {
	this.deferFocusInput();
	} else {
	this.props.onBlur(event);
	}
	this.setState({ focused: false });
	};

The reasoning behind this behavior is mentioned here: #730 (comment)

Refocusing the calendar input makes it impossible to focus other elements inside the popper.

Steps to reproduce

Something like so:

import React, { useState } from "react";
import DatePicker from "react-datepicker";

const Demo = () => {
    const [ date, setDate ] = useState(new Date());
    const handleChange = date => setDate(date);
    return <DatePicker selected={ date } onChange={ handleChange }>
        <input type="time" name="time" />
    </DatePicker>
};

What I'm trying to achieve

My goal is to create a picker that supports date time ranges in a single DatePicker. My current plan is to add two time inputs below the calendar: one for start and one for end. Basically, just showTimeInput x2.

Possible solutions (for my case)

1. Add a prop to prevent calendar refocus on blur: Kinda ugly, but then the client could decide if/when they want this behavior.
2. Allow multiple time inputs: deferFocusInput is already disabled for time input, so allowing for multiple inputs would not require a change to the current blur behavior.
3. I should just find a different way to do this: I'm not sold on my current implementation, and would be interested to hear other thoughts. That said, other users may find this behavior unintuitive in the future.

[stale]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.