Dropdown arrow not visible with dark backgrounds

[edwardhorsford]

If a user uses custom css and a dark background colour, the dropdown arrow is not visible. I think this is because the arrow continues to be black.

Example with black background:

Example with light background:

[NickColley]

We may be able to add fill: currentColour to ensure the SVG arrow is the same colour as the border.

[edwardhorsford]

Thanks @NickColley that seems to work.

Light background:

Dark background:

[NickColley]

So not so easy after all.

At the moment, the autocomplete relies on a transparent background with the icon underneath the input.

This makes sure that the icon can not obstruct clicking the input.

When overriding colours, the background will be set to 'white'. Which hides the icon.

If we move this icon above the input, it now will obstruct opening the input if clicked.

We can add pointer-events: none to this element, which prevents any clicks from registering on the icon which solves the problem but this is only available in IE11+.

https://caniuse.com/#feat=pointer-events, any older browsers would still have this obstruction.

This leaves a few options:

1. Bump supported browsers from IE9 to IE11, and only enhance when in IE11
2. Add click handlers to the icon, this feels brittle but is an option.
3. Use @supports and only put the icon on top if pointer-events is supported. Only edge has @supports support

[andymantell]

Just to add some more information on this - this bug is rearing it's head when attempting to use the accessible-autocomplete under the new govuk design system, which happens to set background-color to white on the body element - meaning that the arrow is no longer visible.

In the meantime - we have opted for a variant of option 3 - to withhold the enhanced select from IE10 by detecting pointer events support using this little snippet instead of @supports so that it works in IE11:

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

And then of course removing the z-index and adding pointer-events: none to the arrow

[36degrees]

Just to add some more information on this - this bug is rearing it's head when attempting to use the accessible-autocomplete under the new govuk design system, which happens to set background-color to white on the body element - meaning that the arrow is no longer visible.

Eurgh. I think that's actually a separate (but related) issue to this – the arrow SVG has a z-index of -1 which I think is putting it under the body element, so if you have any background colour set at all then it disappears.

Would you mind raising a separate issue?

[andymantell]

Yes sorry it is not the same issue. I got fixated on the fact that the solution would be the same for both problems. I'll raise a new ticket...