React-dates: SingleDatePicker date selection in IE 11 doesnt work

Created on 10 May 2019  路  8Comments  路  Source: airbnb/react-dates

react-dates version
[email protected]

Describe the bug
Use the SingleDatePicker in your project, build and open the app on IE11 attempt to select (with mouse) the date, notice that calendar opens and then closes but onDateChanged is not called.

Do the same with the storybook example notice the same result

Source code (including props configuration)
Steps to reproduce the behavior:

      <SingleDatePicker
        id={this.props.id}
        date={date}
        focused={focused}
        onDateChange={updatedDate => this.onDateChange(updatedDate)}
        onFocusChange={updatedFocused => this.onFocusChange(updatedFocused)}
        displayFormat="ll"
        isOutsideRange={this.isOutsideRangeHandler}
        numberOfMonths={1}
        renderMonthElement={this.renderMonthElement}
      />

Desktop (please complete the following information):

  • OS: Windows 10
  • Browser IE
  • Version 11.706.17134.0

Is the issue reproducible in Storybook?
Yes

http://airbnb.io/react-dates/?selectedKind=SingleDatePicker%20%28SDP%29&selectedStory=default&full=0&addons=1&stories=1&panelRight=0&addonPanel=kadirahq%2Fstorybook-addon-actions%2Factions-panel

Additional context
You can navigate with keyboard and select the date - then the onDateChange is invoked

Most helpful comment

As an additional info the 18.4.0 works fine.

All 8 comments

As an additional info the 18.4.0 works fine.

Just noting that I encountered this issue as well.
@LukaszGrela your fix of downgrading to 18.4.0 seems to address this issue...

This seems to have been fixed and released with 20.2.0
Updating from 20.1.0 to 20.2.0 fixed the problem for me.
https://github.com/airbnb/react-dates/issues/1530

@beautifulgarbage @nsmithdev Was using react-dates ^18.2.2. and had the same issue, but updating to 18.4.0 or 20.2.0 didn't solve it. Still present.

Same issue but older version. Our project requires we use 16.7.0 and use SingleDatePicker in IE11. Any suggestions on a fix?

In general, there won't be fixes on old majors - if the issue still occurs on the latest, then it's something that needs fixing.

Actually as @ljharb mentioned in one of other posts related to this issue, it is fixed in v20.2.0, and you can check this out by pulling the project and starting storybook. The reason I was unable to make it work in our project was because react-dates is used in a library that we created and are pulling from npm, and while testing locally, I was not careful enough and didn't replace react-dates in node-modules folder inside our libraries folder inside main node-modules (if that makes sence) after installing newest version of react-dates in the main project folder. If done correctly, everything's working just fine.

In that case, closing as resolved. Please file a new issue if it鈥檚 still a problem in v20.2.0 or later.

Was this page helpful?
0 / 5 - 0 ratings

Related issues

Jesus-Gonzalez picture Jesus-Gonzalez  路  3Comments

cemremengu picture cemremengu  路  3Comments

mrseanbaines picture mrseanbaines  路  3Comments

HartiganHM picture HartiganHM  路  3Comments

yokomizor picture yokomizor  路  3Comments