Clicking on a date fails if input is not already visible on screen

[danoc]

Hello!

Reproduction link: https://codesandbox.io/s/wq906r3rr7

Steps to reproduce:

1. Open page and notice that the component works well.
2. Make browser height small.
3. Click on input to open date picker.
4. Scroll down on the page so that the input is no longer visible in the viewport.
5. Click on a date.
6. Notice that the browser jumps to focus on the input and a date is not selected. This only happens if the window was small enough that the browser had to scroll to focus on the input.

This happens when .focus runs:

react-day-picker/src/DayPickerInput.js

Lines 372 to 383 in d485bfe

	handleOverlayFocus(e) {
	e.preventDefault();
	this.overlayHasFocus = true;
	if (
	!this.props.keepFocus ||
	!this.input ||
	typeof this.input.focus !== 'function'
	) {
	return;
	}
	this.input.focus();
	}

For reasons I don't understand, it prevents handeDayClick from running:

react-day-picker/src/DayPickerInput.js

Lines 456 to 506 in d485bfe

	handleDayClick(day, modifiers, e) {
	const {
	clickUnselectsDay,
	dayPickerProps,
	onDayChange,
	formatDate,
	format,
	} = this.props;
	if (dayPickerProps.onDayClick) {
	dayPickerProps.onDayClick(day, modifiers, e);
	}
	// Do nothing if the day is disabled
	if (
	modifiers.disabled ||
	(dayPickerProps &&
	dayPickerProps.classNames &&
	modifiers[dayPickerProps.classNames.disabled])
	) {
	return;
	}
	// If the clicked day is already selected, remove the clicked day
	// from the selected days and empty the field value
	if (modifiers.selected && clickUnselectsDay) {
	let { selectedDays } = this.state;
	if (Array.isArray(selectedDays)) {
	selectedDays = selectedDays.slice(0);
	const selectedDayIdx = selectedDays.indexOf(day);
	selectedDays.splice(selectedDayIdx, 1);
	} else if (selectedDays) {
	selectedDays = null;
	}
	this.setState(
	{ value: '', typedValue: undefined, selectedDays },
	this.hideAfterDayClick
	);
	if (onDayChange) {
	onDayChange(undefined, modifiers, this);
	}
	return;
	}
	const value = formatDate(day, format, dayPickerProps.locale);
	this.setState({ value, typedValue: undefined, month: day }, () => {
	if (onDayChange) {
	onDayChange(day, modifiers, this);
	}
	this.hideAfterDayClick();
	});
	}

A workaround is to set keepFocus={false}, although I imagine that this is still not the desired behavior if keepFocus is true.

I've only tested this in Chrome.

Thanks!