React-datepicker: isClearable doesn't work in Firefox (Clear Icon not clickable)

[Jefski14]

Expected behavior

Clicking the X Icon should clear the input.
(Which works in Chrome & IE (and maybe more, but I just tested those)).

Actual behavior

The X Icon is not clickable, so nothing happens if you try to click it.

Steps to reprodcue

Open https://reactdatepicker.com/#example-25 with Firefox.
(Tested in Firefox Dev Edition 61.0b7 & Firefox 60.0.1)

[pixelshaded]

This seems to be a styling issue. The icon is rendered with an ::after selector, but the parent in firefox (the button) has no width or height so it is not clickable. I fixed it by updating two styles with:

.react-datepicker__close-icon {
  top: 25%;
  right: 7px;
  width: 16px;
  height: 16px;
}
.react-datepicker__close-icon::after {
  right: 0
}

[siarheipashkevich]

I have the same issue.

[Jefski14]

@pixelshaded You're right, this is indeed a styling issue. I tried using your style fix but it doesn't work correctly for me.
I'm going to try to fix it myseft later.

[Jefski14]

Here's my solution:

.react-datepicker__close-icon {
  top: 25%;
  right: 7px;
  width: 16px;
  height: 16px !important;
  position: absolute;
}
.react-datepicker__close-icon::after {
  right: 0 !important;
  top: 0;
  margin: 0;
}