React-bootstrap-typeahead: Scrolling with mouse wheel causes flickering in Internet Explorer (IE 11) and Edge.

[jtmunn]

Version

v3.2.4

Steps to reproduce

Run react-bootstrap-typeahead in Internet Explorer (11) / Microsoft Edge browser

1. Filter a dropdown / click a dropdown that has more items than are viewable at one time so that a vertical scrollbar shows up.
2. Scroll (using mouse wheel) up or down and observe the flickering / intermittent flashing of the background showing up.

Expected Behavior

The flickering should not show up in IE / Edge - it appears smooth, with no flickering on both Chrome and Firefox.

Actual Behavior

Flickering/ intermittent flashing of the background showing up in both IE (11) and Edge.

[jtmunn]

This can be seen on the Live Examples page.

[dougarp]

@jtmunn - I was able to work around this same issue by overriding the css class in the following manner:

.rbt-menu.dropdown-menu.show {
  transform: none !important;
}

[NathanTrost]

Overriding the transform alone causes another issue. Since the inline transform provided pushes the dropdown down, overriding it causes it to block the input. This is what I did to address this issue

.rbt-menu.dropdown-menu.show {
    transform: none !important;
    top: auto !important;
}

[Raztyck]

Those work arounds doesnt work properly when bodyContainer prop is set to true. Menu is rendered at the end of body container.