soccerloway/quill-better-table

Insert row in table causes page to jump to top

JennyZYBai opened this issue · 2 comments

when insert row up/down inside a table will take the scroll bar to top.

https://codepen.io/soccerloway/pen/WWJowj
Try inset multiple table to have a scroll bar shown on the right, scroll to the bottom table then click inside a table cell and select insert row up. It insets a new row but will take the view to top of the page.

Any one have idea how to stop the page jump?

document.querySelectorAll(".ql-picker").forEach(tool => {
      tool.addEventListener("mousedown", function (event) {
        event.preventDefault();
        event.stopPropagation();
      });
    });

add this to your componentDidMount and componentDidUpdate

document.addEventListener('mousedown', e => {
  const composedPath = e.composedPath();
  for (let i = 0, j = composedPath.length; i < j; i++) {
    const item = composedPath[i];
    if (item === document.body || item === document) return;
    if (item.classList && item.classList.contains('qlbt-operation-menu-item')) {
      e.preventDefault();
    }
  }
});