MDB Vue editable table tab focus cursor position not working

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

modadvisor asked 9 months 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 9 months 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 commented 9 months ago

will it supports for all browser ? Thanks

modadvisor commented 9 months ago

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

Marcin Luczak staff commented 9 months 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
  • User: 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