CSS hover/active touch feedback not working on mobile until react-select is shown

Question

I am struggling to debug the issue here. Until a react-select is shown on the UI the feedback on mobile touch elements do not provide feedback on touch.

This can be seen here by completing the journey on mobile until step 4: https://odd-panda-design.badgerbookings.com/booking

When you first interact with the elements there is no feedback however when you get to the 4th screen in the journey and click "signup" (showing the react select) the hover elements suddenly provide feedback if you navigate back to them. This issue is only on mobile and not web. I have tested on iPhone 6 using Chrome.

Below is the react-select element that triggers the touch feedback interactions.

I have tried adding onTouchStart and changing the hover elements to include :active or :focus

I am not sure if this is a react or javascript issue

Answer 1

I had dealt with this before.

Try adding onclick="" to any element that requires ios to recognize as hover element.

As a side note, try abstracting the problem. Remove react select and see if it works, if not, continue abstracting and see when the problem disappears.