Reakit: Feature Request - Keyboard support for Step element

Created on 25 Aug 2018  路  6Comments  路  Source: reakit/reakit

It would be great to be able to optionally use the left and right arrow keys to move through steps.

feature stale

Most helpful comment

I agree that Step may be the wrong place to put this keyboard feature. Maybe it should be abstracted into its own component, just like we did with Portal (which was inside Overlay before) in #169.

But I'd like to see more use cases before doing it (and possibly doing it the wrong way). #242 may be one.

I think it's worth the time as more use cases appear. Most of them should probably be resolved using Tabs though (I've already made a Carousel from it, for example).

All 6 comments

I'm studying how I can do this. I noticed that Tabs have support to left/right when TabsTab are focused. It makes sense for tabs. But steps has a more generic proposal, it does not necessarily have pointers (next/prev) because it is usually used as low level to others components that implement your navigation rules (TabsTab is an example of implementation using show method).
Where and how would be the best place to apply keyboard logic in this case?

@diegohaz @Thomazella do you think it's worth investing time in this feature?

I agree that Step may be the wrong place to put this keyboard feature. Maybe it should be abstracted into its own component, just like we did with Portal (which was inside Overlay before) in #169.

But I'd like to see more use cases before doing it (and possibly doing it the wrong way). #242 may be one.

I think it's worth the time as more use cases appear. Most of them should probably be resolved using Tabs though (I've already made a Carousel from it, for example).

Just throwing ideas around:

<Input.Container>
  {({ ref, focus }) => (
    <Input
      as={KeyboardListener}
      ref={ref}
      onKeyPress={{ "/": focus }} // modifies original onKeyPress?
      global // listens on window instead of Input
    />
  )}
</Input.Container>
<Step.Container>
  {step => (
    <Step
      as={KeyboardListener}
      onKeyPress={{
        ArrowLeft: step.previous,
        ArrowRight: step.next
      }}
      {...step}
    />
  )}
</Step.Container>

I like the idea of KeyboardListener component, and like the idea of global modifier. I just do not know if we should use prop onKeyPress when this is not a real event. Maybe we can use keyPressMap, keyMap?

Any progress on this issue? I figured it would be really easy to implement with react-hotkeys, but it's actually not easy at all, to my surprise.

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

Was this page helpful?
0 / 5 - 0 ratings