search

markusenglund / react-switch

A draggable toggle-switch component for React. Check out the demo at:
https://react-switch.netlify.com/
MIT License
1.33k stars 100 forks source link

exposing onFocus & onBlur events #90

Open billwatson017 opened 3 years ago

billwatson017 commented 3 years ago

We are using this component for a form field implementation and would like to change the style of our wrapper component when a user tabs to this input field. Can you please expose onFocus and onBlur events so we have the ability to toggle our setFocused event?

mansin-paf commented 3 years ago

Trying to do something similar. They're currently exposing a property activeBoxShadow, although it doesn't work the way it's intended. The problem is that whenever you're tabbing to a react-switch element, the hidden input element gets focused leading to the activeBoxShadow never getting applied (because it's expecting the outer wrapper to be focused)

doubleforte commented 2 years ago

Similar issue for me.

I'm able to style the parent with :focus-within but I only want that when they tab to the switch. CSS can look at :focus-visible on the hidden checkbox, but I can't figure out a way to have the parent wrapper react to the :focus-visible state of the child.

Any ideas?