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

Left/Right arrow keys wont move text caret on inputs when editing a cell with selectableRange enabled #4563

Open
cpgo opened this issue Aug 21, 2024 · 5 comments
Labels
Possible Bug A possible bug that needs investigation

Comments

@cpgo
Copy link

cpgo commented Aug 21, 2024

Describe the bug
When editing a cell and the table has selectableRange enabled left and right arrow keys will not move the input cursor

Tabulator Info

  • Which version of Tabulator are you using?
  • 6.2

Working Example
https://jsfiddle.net/4fc5s8oa/6/
Or the example on docs https://tabulator.info/docs/6.2/range#clipboard

To Reproduce
A step by step guide to recreate the issue in your JS Fiddle or Codepen:

  1. Enable selectableRange
  2. Open any cell editor via either Enter key or single/double clicking depending on editTriggerEvent
  3. Try hitting left key to edit a single letter on the cell input
  4. See error

Expected behavior
I would expect the input to work like a normal input, meaning I can navigate with keyboard or click somewhere on the text to move the input caret

Screenshots
If applicable, add screenshots to help explain your problem.

Desktop (please complete the following information):

  • OS: Ubuntu
  • Browser: Chrome
  • Version 127.0.6533.119

Smartphone (please complete the following information):

  • Device: [e.g. iPhone6]
  • OS: [e.g. iOS8.1]
  • Browser [e.g. stock browser, safari]
  • Version [e.g. 22]

Additional context
I see that the text area input (https://tabulator.info/docs/6.2/edit#editor-textarea) has a verticalNavigation option that almost does what I expect, but as the name suggest only navigating up or down, I tried looking at the code to see if I could implement a horizontalNavigation option but had no luck

@cpgo cpgo added the Possible Bug A possible bug that needs investigation label Aug 21, 2024
@cpgo
Copy link
Author

cpgo commented Aug 22, 2024

Found this workaround for now, not sure if this will break anything else

    Tabulator.extendModule("keybindings", "actions", {
      rangeExpandLeft: function(e) {
        if (this.table.modules.edit.currentCell) {
          return;
        }

        this.dispatch("keybinding-nav-range", e, "left", false, true);
      },
      rangeExpandRight: function(e) {
        if (this.table.modules.edit.currentCell) {
          return;
        }

        this.dispatch("keybinding-nav-range", e, "right", false, true);
      },
      navLeft: function(e) {
        if (this.table.modules.edit.currentCell) {
          return;
        }

        this.dispatch("keybinding-nav-left", e);
      },
      navRight: function(e) {
        if (this.table.modules.edit.currentCell) {
          return;
        }

        this.dispatch("keybinding-nav-right", e);
      },
    });

Still trying to keep the editor open when clicking inside the input but still havent found what module to extend to do that.

@ValyaSHmelev
Copy link

Faced the same problem, thanks for the temporary solution

@ainars-sk
Copy link

+1. I've faced the same issue, but I've managed to sort it out by rolling back to version 6.2.0 - it does not have this glitch. Thanks to @cpgo for JSFiddle - I was decreasing minor version one by one till I've got it fixed :)

@Hoogkamer
Copy link

Thanks, version 6.2.0 works. The solution by cpgo works for the arrow keys, however it does not work when you want to click and put the cursor at a specific place in the cell to edit it.

@cpgo
Copy link
Author

cpgo commented Oct 9, 2024

however it does not work when you want to click and put the cursor at a specific place in the cell to edit it

Yeah, I could not find a workaround for that.

In the end we needed a bit more features that were not available out of the box on tabulator and moved away to another library. Still really like tabulator for simpler data grids tho

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Possible Bug A possible bug that needs investigation
Projects
None yet
Development

No branches or pull requests

4 participants