Traffic Calendar calendar popup is transparent

[kmid5280]

Description of Issue

Calendar popup on Add Traffic page is transparent when the calendar is over the input box, but renders normally when below input box. Possible that other things are rendering over it when it is in that position.

Insert Description Here

Possible Solution and/or Approach

Could investigate Z index contributing to issue.

Additional Comments

[kmid5280]

@seankwilliams I've been playing with this issue some more. I'm noticing that the issue only happens when the DatePicker popper flips up. The popper will flip up if there is not enough room to display it underneath the input. When it is displaying under the input, it displays normally.

Interestingly, it also only seems to conflict with other input components that use the DatePicker. In the screenshot, you can see that the Date/Time of Announcement input overlays the calendar popper, but not the Title input. Again, this only happens if the calendar popper is flipped above the input:

Changing the z-index values of both the popper and the Datepicker inputs don't change the behavior.

I'm wondering if this is a quirk with either the React DatePicker plugin or the Popper that it uses. We may be able to find a property to set for the Popper:

https://reactdatepicker.com/#example-configure-popper-properties https://popper.js.org/docs/v2/modifiers/flip/

Is it important for the calendar to be able to flip upwards? We could disable the flipping behavior so it only shows underneath the input.

[seankwilliams]

@kmid5280 I think it's better to have the tooltip behavior as it is so the calendar opens up where the user can see it if they are using a datepicker field that is at the bottom of their window.

What if we remove the z-index from the .form-group element that is Date/Time of Announcement? I am not sure if there's any reason to have z-index on that field.