Dropdown arrow not visible when body background colour is white (e.g. in govuk-frontend)

[andymantell]

I have encountered an issue when attempting to use the accessible-autocomplete under the new govuk design system, which sets background-color to white on the body element - meaning that the arrow is no longer visible.

This is caused by the z-index: -1 on the arrow effectively putting it underneath the body element. Which relies on the body having a transparent background colour which is no longer true in the new govuk-design-system (It used to be fine under govuk-elements / govuk-frontend-toolkit)

We have fixed it for our purposes by removing z-index: -1 from the arrow. In order for the clicks to pass through to the underlying input, we then use pointer-events: none on the arrow. Due to browser support for pointer-events, we then withhold the enhanced select from IE10 by detecting pointer events support using this little snippet:

function supportsPointerEvents() {
  var element = document.createElement('x');
  element.style.cssText = 'pointer-events:auto';
  return element.style.pointerEvents === 'auto';
}

(Somewhat related issue here that may also warrant use of pointer-events: #227)

[andymantell]

I've made a demo here:

https://accessible-autocomplete-govuk-design-system.glitch.me/

[edwardhorsford]

I think we've just had this same issue. Oddly we've always had the design system with no issue - and this bug has only just come up.

[NickColley]

I wonder if the best way to sort this is to add a click handler to the dropdown that focuses the input.

[NickColley]

@edwardhorsford looks like if you raise the entire component then it may resolve this issue, since the icon is still behind the input.

.autocomplete__wrapper {
    z-index: 0;
}

I've not tested this cross browser.

[mec]

@NickColley we have also seen this issue with the GOVUK Frontend. Raising the .autocomplete__wrapper as described does seem to fix it, however on clicking the element, the dropdown arrow disappears – this doesn't seem to be the expected behaviour?

Here is a quick demo: