palantir / blueprint

A React-based UI toolkit for the web
https://blueprintjs.com/
Apache License 2.0
20.73k stars 2.18k forks source link

DateRangeInput3 has different appearance on different browsers #7032

Open jandrew44 opened 1 week ago

jandrew44 commented 1 week ago

Environment

Code Sandbox

Reproducible on the Blueprint sample page: https://blueprintjs.com/docs/#datetime2/date-range-input3

Steps to reproduce

  1. Open the link
  2. Switch to dark theme
  3. Open month selector

Actual behavior

Note different styles applied in different browsers.

Chrome: Screenshot_12

Firefox: Screenshot_13

Edge: Screenshot_14

Expected behavior

Same component appearance in all browsers.

Possible solution

Can be improved a bit by overriding styles manually. But could not get the same appearance because native structures are being used by DateRangeInput3.

ggdouglas commented 3 days ago

The main issue based on your screenshots appears to be with Firefox, where the undesirable light grey background color on the select element is displayed. This seems to be caused by the .bp5-minimal class applied to the select. The root cause seems to be that Firefox does not support setting alpha transparency or background: none on the background of select elements, leading to the default light grey background color appearing. Here's an isolated reproduction of the bug: https://codepen.io/xgad/pen/poMOpNg

unnamed

To solve this without breaking the styling of selects in other browsers/OSs, a potential workaround could be to add a special case for the .bp5-html-select element in datepickers. This would override the background color to match the datepicker's background color, and a pseudo element could be used to achieve the semi-transparent hover/focus state.

unnamed (1)

Alternatively, we could convert the dropdown in the datepicker from a native <select> to our Select component implementation. This would likely provide a cleaner solution overall, as native components are notoriously difficult to style consistently across browsers/OSs. However, there might be some added complexities in converting the dropdown, such as ensuring compatibility with React Daypicker interactions.