table-nav icon indicating copy to clipboard operation
table-nav copied to clipboard

Allow arrow keys characters navigation on input and textarea

Open pedro757 opened this issue 1 year ago • 2 comments

We can't actually use arrow keys to navigate between characters

  1. John|
  2. Hit left arrow key ←

Expected: move cursor one step back Joh|n Current Behavior: cursor doesn't move John|

You can try it in your own demo navigating using arrows (←→) on input editable field

I believe arrow keys shouldn't be blocked until ESC it's been hit first

pedro757 avatar Apr 18 '24 13:04 pedro757

BTW I worked around it with this:

            <Textarea
              onKeyDown={e => {
                if (e.key === "ArrowLeft" || e.key === "ArrowRight") {
                  e.stopPropagation()
                }
              }}
            />

pedro757 avatar Apr 18 '24 13:04 pedro757

@pedro757 indeed I will fix that. Another thing you can do is disable the navigation until you get out from the input field. There is an example here: https://github.com/konsalex/table-nav/blob/main/packages/storybook/stories/NeedleTable.tsx#L76

Hope this helps

konsalex avatar Apr 18 '24 13:04 konsalex