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

https://mdbootstrap.com/docs/vue/tables/editable/

please help me to solve that issue. Thanks


Marcin Luczak staff answered 9 months ago

Hi,

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();
        range.selectNodeContents(el);
        range.collapse(false);
        let sel = window.getSelection();
        sel.removeAllRanges();
        sel.addRange(range);
}

[...document.querySelectorAll('td')]
    .forEach(td => 
        td.addEventListener('focus', (e)=>{ placeCaretAtEnd(e.target) })
    )

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 https://stackoverflow.com/questions/4233265/contenteditable-set-caret-at-the-end-of-the-text-cross-browser.

For selecting whole values you can check this link https://stackoverflow.com/questions/3805852/select-all-text-in-contenteditable-div-when-it-focus-click


Please insert min. 20 characters.

FREE CONSULTATION

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

Status

Answered

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