Topic: MDB Vue editable table tab focus cursor position not working properly

modadvisor free asked 2 years ago

Dear sir

i am using your editable component from below link. when user try to navigate through tab key using one cell to another cell cursor is focusing at the start of the values but it must needs to place cursor at the end of each values in the cell

please help me to solve that issue. Thanks

Marcin Luczak staff answered 2 years ago


This is not default browser behavior and this can't be done directly from the component's methods. To achieve that you will have to create a custom function and append it to the table cell event listener on focus, e.g:

function placeCaretAtEnd(el) {
        let range = document.createRange();
        let sel = window.getSelection();

    .forEach(td => 
        td.addEventListener('focus', (e)=>{ placeCaretAtEnd( })

Keep coding, Marcin

modadvisor free commented 2 years ago

will it supports for all browser ? Thanks

modadvisor free commented 2 years ago

also is there possibility that when i move through tab it can select whole values in the td ?

Marcin Luczak staff commented 2 years ago

For cross-browser support please see this SO link on which I based my solution

For selecting whole values you can check this link

Please insert min. 20 characters.


Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.



Specification of the issue

  • ForumUser: Free
  • Premium support: No
  • Technology: MDB Vue
  • MDB Version: MDB4 6.7.2
  • Device: PC
  • Browser: chrome
  • OS: windows 10
  • Provided sample code: No
  • Provided link: Yes