Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Feature request: provide a way of detecting when react-slider has/loses focus #292

Open
moloko opened this issue Jun 6, 2023 · 2 comments

Comments

@moloko
Copy link
Contributor

moloko commented Jun 6, 2023

Use-case: I am using this component as a video progress bar/seek control. When the user tabs to the slider control, I want to be able to pause video playback so that the user can seek within the video easily. When they tab away, playback will automatically resume.

In v0.11.2 of react-slider this could be achieved by using the onBeforeChange and onAfterChange callbacks, but at some point these were changed so that they were only called if the action will/did result in a change - which I think is actually a very sensible change but does leave me in a situation where, after upgrading to v2.0.5, I can't achieve the same effect without a (rather hacky) workaround.

So, if this component could implement onFocus and onBlur callbacks that would solve the problem!

If you feel this would be of use I'm happy to have a go at implementing this. Equally if I'm being incredibly stupid and missing some very obvious way of doing this please let me know!

@msf-caesar
Copy link

Try with:

  • Adding onFocus and onBlur callbacks to react-slider component.
  • Use onFocus callback to trigger pause video playback when slider gains focus.
  • Use onBlur callback to trigger resume video playback when slider loses focus.
  • Implement the necessary logic to handle video playback in these callbacks.

@moloko
Copy link
Contributor Author

moloko commented Sep 1, 2023

Adding onFocus and onBlur callbacks to react-slider component

@msf-caesar that won't work because react-slider doesn't implement onFocus or onBlur. Hence my comment above:

So, if this component could implement onFocus and onBlur callbacks that would solve the problem!

The closest I could get was to use a ref to get hold of this internal ref then listen for the focusin and focusout events... but for obvious reasons that's not ideal and - IIRC - still wouldn't allow me to do exactly what I was trying to do.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants