React-bootstrap-table2: Switch between editable cells using tab not working.

[elad823]

When pressing tab in edit mode, the edit mode is going out.

https://react-bootstrap-table.github.io/react-bootstrap-table2/storybook/index.html?selectedKind=Cell%20Editing&selectedStory=Click%20to%20Edit&full=0&addons=1&stories=1&panelRight=0&addonPanel=storybook%2Factions%2Factions-panel

[AllenFang]

@elad823 yes, this feature is still not implement, I'll implement it ASAP, thanks

[teresa-recursion]

@AllenFang Any update on this? I have a fix on a local branch, if I can get permissions I will create a pull request for it.

[AllenFang]

@teresa-recursion sorry, I'm working on the expand row and new react context API design. For the tab to navigate the cell editing, I think I will recommend you to implement the cell navigation before this.

Do let me know if you really want to open a PR for this, I think I will implement the cell navigation in July or Aug.

[teresa-recursion]

@AllenFang by cell navigation, do you mean using the arrow keys to move up/down/left/right? My PR includes that. If not, what do you envision for cell navigation?

[royjer]

@teresa-recursion Could you share your solution? I came up with one (basically just calling blur on the current control, and click on the next) that works great on FF and Chrome, but not on IE. Any help would be greatly appreciated.

[teresa-recursion]

@royjer my basic approach was to add key handling in editing-cell.js

and then pass it up to wrapper.js

I don't have permissions to create a branch, otherwise I would share it with you. I'm not sure this is the direction @AllenFang is going to go with this, but it works. I haven't tested in IE, let me know how that goes! :)

[royjer]

Awesome. Thanks! I'll let you know.

[royjer]

@teresa-recursion can you please share onFocusNext()?

[teresa-recursion]

[AllenFang]

https://github.com/react-bootstrap-table/react-bootstrap-table2/issues/433

[xxporkoxx]

Hello guys i am facing the same problem right now. I am using those versions of react-table packages:

"react-bootstrap-table-next": "^1.1.4",
"react-bootstrap-table2-editor": "^1.0.1",
"react-bootstrap-table2-filter": "^1.0.0",
"react-bootstrap-table2-toolkit": "^1.0.3",

I have tried to implement @teresa-recursion approach but i think that those change were made on older versions then the one i am using. Do we have any update on the keyboard navigation @AllenFang ?

Could this keyHandle be implemented outside of the component, maybe?

@royjer i saw that you resolved that using the blur method... Can you explain better your approach? I would be very glad!!

Besides that you did a very great job @AllenFang ! Cheers for that !

[MaorBenAmi]

Hey,
@AllenFang This feature implemented already? using tab to navigate in editing mode?

Thanks !

[AllenFang]

@MaorBenAmi sorry for lately reply, we are not yet to implement the keyboard navigation, I hope I can finish before this Q2, probably April

[DrogoNevets]

Is this still on track for Q2? we are going to have to make a judgement call to move to a different Component soon, would love to hold out, but cant much past mid-April

[mpeng]

Any update on using Tab to navigate between cells ? I agree with DrogoNevets, missing of this feature could be a deal breaker for many.

[mpeng]

I am able to follow code samples provided by @teresa-recursion and @royjer to implementate the features in the latest version, thank you both !

[xxporkoxx]

@mpeng i didn't understand what you just said. Where you able to impement the Tab Navigation? Or not? You would be a god if you were able to do this and provide us a pull request haha!

@DrogoNevets didi you guys moved to another component or just implemented something to overcome the Tab Navigation?

[DrogoNevets]

@xxporkoxx
We moved to react-data-grid there wasn’t any response from the maintainers or guidance on timeline or anything

[mpeng]

@xxporkoxx , what I mean is I made the changes based on the latest version 3.1.2.

I made the changes locally to handle Tab and four arrow keys and uses the file as part of my app.

I attached the entire file I am using to this thread. Just change the extension from 'txt' to 'js' and reference it in your code. It should work. The only thing I hard-coded is the # of column. My table has 7 columns and first column is not editable. See below

if (nextCol >= 7 ) {
      nextCol = 1;
      nextRow += 1;
    } else if (nextCol <= 0) {
      nextCol = 7 - 1;
      nextRow -= 1;
    }

I also changed the default type from 'text' to 'number" to suit my needs.

If you diff the file I attached with the file from npm, you will see all the changes I made.

Let me know if this helps.

Like I said before, this feature is a dealbreaker for me and I was also tempted to use react-data-grid, but decided against it and implementated the change instead. It turned out to be a easy change.

react-bootstrap-table2-editor.txt

[LoicHa]

Sadly , this feature was not included in the latest version _1.2.4_
@AllenFang any news about it ?

[nickdk]

Does anyone here have a better option in implementing this? Feels like a dealbreaker for me, we're trying to implement the workaround but seems like a lot of stuff changed in the mean time in editing-cell.js.

[lavania-aditya]

is this feature is implemented in table or it's currently under development. I need this feature in my project @AllenFang

[purnima995]

@AllenFang any update on this. any near future ETA? I need this in my project.

[lavania-aditya]

@AllenFang when this feature will be updated, I need it in my current project.

[jabberwo]

Really wish we had this feature Allen.

[tteris]

hi all and especially @AllenFang .
Allen thank you very much for the amount of work you had give in this project so we can us it.
So i used some the code of @teresa-recursion which left on this feed and some of my own implementations so i can use this functionallity of "tab" button to navigate on the table .
Although the solusion is not perfect due the lack of my undestaing of your code or the lack of an addional check points

I'll leave you the code here and where in the project i placed it .
Please if you have the time review my addition so we can proceed in this so much asked feature.

in react-bootstrap-table2/packages/react-bootstrap-table2-editor/src/context.js
line 51
_this.focusNext = _this.focusNext.bind(this)
line 218
onFocusNext : this.focusNext,
line 163

{
      key: 'focusNext',
      value: function onFocusNext(h=1,v=0) {

        let nextCol = this.state.cidx + h
        let nextRow = this.state.ridx + v
        let tableRlength = 0

        for(let i =0 ; i<this.props.columns.length ; i++){
          if(!this.props.columns[i].hidden && !this.props.columns[i].isDummyField)
            tableRlength++;
        }        
        if(nextCol >= tableRlength){
          nextCol = 0;
          nextRow +=1;
        }else if(nextCol <0){
          nextCol = this.props.column.length-1;
          nextRow -=1;
        }
        if(nextRow >= this.props.data.length){
          nextRow = 0;
        }else if(nextRow < 0 ){
          nextRow =this.props.data.length - 1
        }

        this.startEditing(nextRow,nextCol)

      }
    }

in react-bootstrap-table2/packages/react-bootstrap-table2-editor/src/editing-cell.js
line 200

{
      key: 'handleKeyDown',
      value: function handleKeyDown(e) {
        var onEscape = this.props.onEscape;
        var onFocusNext =this.props.onFocusNext;//edw
        if (e.keyCode === 27) {
          // ESC
          onEscape();
        } else if (e.keyCode === 13) {
          // ENTER
          this.beforeComplete(this.editor.getValue());
        }else if (e.keyCode === 9) {
          // TAB
          e.preventDefault()
          this.beforeComplete(this.editor.getValue());
          onFocusNext();
        }
      }
    }

line 348
onFocusNext:_propTypes2.default.func.isRequired

[OvidiuCalburean]

Any news on this feature being implemented?

[lavania-aditya]

I have recently faced this position and as I am using react-bootstrap for my project, so I use input cell as the column formatter and that can leads me to my own custom onChange onBlur and every function, which helps a lot and also tabbing for editing cells work in it.
For updating the table data, use the onChange method and Please follow the way of immutable to update data in the world of react.

[Zimm1]

Allen ma boy, cmon