Issue changing month and day on dateinput in Internet Explorer 11

[timothymcooley]

Environment

• Package version(s): Initially found in 2.0.2 , reproducible in 3.0.0+
• Browser and OS versions: Internet Explorer 11 & Windows 10

Steps to reproduce

Reproducible on the example: https://blueprintjs.com/docs/#datetime/dateinput

1. Click on a dateinput textbox to open the popover
2. Note the day selected
3. Go back a previous month
4. Click on a different day than what is selected
5. Note the selected day isn't what you clicked, it's the original day minus one month.

Note: You can change days within the same month

Actual behavior

Cannot change day and month at the same time using dateinput popover

Expected behavior

The day you clicked is actually selected

Possible solution

Unsure. It looks like the onChange for the dateinput doesn't actually fire on the click after changing months. I attempted to use the isUserChange boolean to prevent the changing month from firing the onChange but the issue persists.

[giladgray]

@timothymcooley I cannot reproduce this on IE.

[timothymcooley]

@giladgray
My exact IE version is 11.285.17134.0
Update Versions:11.0.85 (KB4457426)

Also, I discovered that the issue is a bit more widespread than in the initial ticket. Anytime I click two different inputs on the popover it closes.

Examples found on https://blueprintjs.com/docs/#datetime/dateinput:

• Go forward a month then back.
• Select a month in the month dropdown then the forward arrows.
• Select a year in the dropdown then try to click the month dropdown.

Is there any more information that might be useful?

[giladgray]

@timothymcooley perhaps you have some time to investigate this issue? check out the repo and develop on it in IE. add debugger/print statements as necessary to understand if the click events are getting lost.

all the calendar logic is handled by react-day-picker.

[knalinne]

@giladgray Hello !
I have the same issue and tried to investigate it !

First of all, this is how I reproduce it:

I found out that, after a month change, this function

blueprint/packages/datetime/src/datePicker.tsx

Line 223 in 3f910a8

private handleDayClick = (day: Date, modifiers: DayModifiers, e: React.MouseEvent<HTMLDivElement>) => {

is never called on IE.

When the month has changed, the popup is closed by a blur event.

blueprint/packages/datetime/src/dateInput.tsx

Lines 167 to 170 in ac38072

	onMonthChange: (month: Date) => {
	Utils.safeInvoke(this.props.dayPickerProps.onMonthChange, month);
	this.setTimeout(this.registerPopoverBlurHandler);
	},

blueprint/packages/datetime/src/dateInput.tsx

Lines 381 to 390 in ac38072

	private handlePopoverBlur = (e: FocusEvent) => {
	const relatedTarget = e.relatedTarget as HTMLElement;
	if (relatedTarget == null || !this.popoverContentEl.contains(relatedTarget)) {
	this.handleClosePopover();
	} else if (relatedTarget != null) {
	this.unregisterPopoverBlurHandler();
	this.lastElementInPopover = relatedTarget;
	this.lastElementInPopover.addEventListener("blur", this.handlePopoverBlur);
	}
	};

There is a difference between Chrome and IE in the 'relatedTarget'.
It's null on IE and it's a dom element in Chrome.

On IE, as the relatedTarget is null, the popup is closed.
I guess that the click event is not triggered and that's the reason why the date do not change.

On Chrome, the relatedTarget is not null, the 'else' part of the function is called and everything works.

I don't really know how to fix this.
According to https://stackoverflow.com/questions/41298948/how-to-use-relatedtarget-or-equivalent-in-ie, it looks like the relatedTarget do not correctly works on blur events.

By simply removing the call to this.handleClosePopover(); it seems to work, but I suppose it will break something, this code is probably here for something :-)

I hope this will help you to fix this !
Is there something else I can do to help ?

[giladgray]

@knalinne thank you for the detailed report! at least we know where to focus our efforts to address this now 👍

and this definitely qualifies as a bug now!