ghinda / css-toggle-switch

Accessible, CSS-only, toggle switches

Home Page:http://ghinda.net/css-toggle-switch/

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Microsoft Edge support

jacobnbrum opened this issue · comments

Hi,
I have been running into an issue while trying to get this to work in the Microsoft Edge browser. The switch appears to display correctly, but clicking on it does not seem to trigger any action.

Any ideas about this?

Here is the HTML for the related element:
<label class="switch-light switch-candy" style="width:90px;" onclick=""> <input name="test_switch" type="hidden" value="0"><input style="" type="checkbox" value="1" name="test_switch" id="test_switch"> <span> <span>No</span> <span>Yes</span> <a></a> </span> </label>

Microsoft Edge 42.17134.1.0
Microsoft EdgeHTML 17.17134

I can't replicate the issue you're having. Maybe you have other scripts/styles on the page that are interacting with the elements?

This is the demo I tested in the latest Edge (it includes your code):
edge-demo

Thank you so much for looking into this. I really like this project.
I just tried your demo and it did not work on a couple of Edge browsers I tried. The browsers are slightly out of date, so I will try and update them and see if that resolves the issue.

Cool. Closing this for now. Will reopen if the issue still happens.

I just tried the demo in a couple of other places including an up to date Edge browser and a much older version of Edge. It did not seem to toggle in either place.

Do you have any ideas of what else I could look into?

switch-toggle-edge-gif

Thanks again.

I managed to reproduce the issue in Edge 17. Seems to be fixed in Edge 18.

To also fix it in 17, remove the first hidden input you have inside the label:
fixed-edge-demo

It seems Edge 17 tries to focus the hidden input when clicking the label, causing the issue.

It looks like my projects framework was generating that hidden file.

Thank you so much, I really appreciate it!