Inputs or other elements requiring focus in <Slides> are unfocusable or able to be edited.

• pure-react-carousel version: 1.27.1
• react version: 16.13.1
• browser used: Chrome Version 84.0.4147.135 (Official Build) (64-bit)
• node version: v12.17.0

Relevant code or config:

N/A

What you did:

We have a series of images in a slider, each slide having its own title (input) and description (textarea). We want people to be able to write in the input(s) and textarea(s), respectfully.

What happened:

You can’t seem to focus on the inputs at all, or be able to type in them.

Reproduction:

Minimal code repository (bootstrapped with create-react-app):

https://github.com/princefishthrower/carousel-test

Problem description:

Usability

Suggested solution:

My guess is that something with drag detection is blocking the ability to focus on any other element within the slide. I already tried a few z-index tricks, but that didn’t help. A possible workaround I could envision is turning off drag functionality until an actual drag event is detected, didn’t try this yet.

Can you help us fix this issue by submitting a pull request?

Maybe. I haven’t looked at the source code.

[tdoran]

I had a similar issue with a modal (nested within a slide) which contained an input. The input was un-focusable, regardless of click or tab. The only solution we could use was adding autoFocus to the input.

[richardwestenra]

I’m experiencing this issue too - a feature which relies on a button’s focus state is not working, because the focus event is being prevented from triggering. It works with keyboard but not with mouse.