Select toggle seems to remain "selected" after de-selection

[rdp84]

Expected Behaviour

When you de-select the select toggle on a touch device then the toggle should go back to the de-select state.

Current Behaviour

On touch devices (iOS, Android) when you de-select a selected toggle it still appears to be selected to the user. When you touch away from the toggle to change the focus then the toggle looks to become fully de-selected.

Steps to Reproduce (for bugs)

1. On a mobile device browse to https://www.sky.com/toolkit/components/select#checkbox
2. Tap Select
3. Tap again to unselect. Notice that the de-selection does not complete immediately and only happens once you touch away and change the focus.

I demonstrated this to Steve Duffin and he has an idea as to why this is happening. It might be that this can't be fixed but raising here so it can be properly triaged.

[joe-bell]

@rdp84 Is this for sky.com/toolkit? If it is, those examples don't have JavaScript and are purely to demo interaction states.

Closing this issue until the above PR template has been fulfilled to explain the issue to an adequate level

[rdp84]

Apologies - submitted slightly early when pressing the "Enter" key while focus was on submit.

I've added some comments.

[steveduffin]

This is an issue with how iOS and android handle :hover - styling remains on these items when the input is toggled off but the user has not selected anything else on the page - this gives the impression the item is still checked. I would say this is another styling issue with this piece of UI

[joe-bell]

@sky-uk/toolkit why don't we use the same technique we use for Switch?

@media(pointer: coarse) {};