Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

manualColumnResize doesn't work and warns "The provided element is not a child of the top overlay" #5959

Closed
aaronbeall opened this issue Apr 12, 2019 · 4 comments

Comments

Projects
None yet
4 participants
@aaronbeall
Copy link
Contributor

commented Apr 12, 2019

Description

In some cases the combination of fixedColumnsLeft, manualColumnResize and horizontal scrolling causes column resizing to not work on fixed columns, giving the warning "The provided element is not a child of the top overlay" from:

  | warn | @ | handsontable.full.js:7437
  | getRelativeCellPosition | @ | handsontable.full.js:13265
  | setupHandlePosition | @ | handsontable.full.js:86003
  | onMouseOver | @ | handsontable.full.js:86163
  | (anonymous) | @ | handsontable.full.js:86354
  | callbackProxy | @ | handsontable.full.js:3246

I am not sure of the exact conditions but I can reproduce with two tables rendered at once, which is how I ran into this in my real app.

Steps to reproduce

  1. Open demo: https://jsfiddle.net/co08abhq/
  2. Notice that column resizing works on all columns (both tables, both fixe and non-fixed columns)
  3. Scroll the bottom table to the right
  4. Now you can't resize the bottom table's fixed left columns, and the console gives the warning "The provided element is not a child of the top overlay" a lot.

img

The behavior of this changed between 7.0.0 and 7.0.2, possibly related to #5050 but in 7.0.0 it still wasn't working just in a different way.

Demo

https://jsfiddle.net/co08abhq/

Your environment

  • Handsontable version: 7.0.2
  • Browser Name and version:
  • Operating System:
@AMBudnik

This comment has been minimized.

Copy link
Contributor

commented Apr 15, 2019

Thank you for sharing @aaronbeall

I wanted to check how it worked in the past and in 7.0.0 it's still wrong but very different. We're able to get the resize handle but there's no way to alter the column's width and something weird happens underneath.

GIF

7.0.0. It doesn't seem to work fine in any previous version.

@aaronbeall

This comment has been minimized.

Copy link
Contributor Author

commented Apr 15, 2019

I think I've narrowed down the source of this bug, and it does have to do with having multiple tables on the page at once:

export function overlayContainsElement(overlayType, element) {
const overlayElement = element.ownerDocument.querySelector(`.ht_clone_${overlayType}`);
return overlayElement ? overlayElement.contains(element) : null;
}

The overlayContainsElement function does a document level query selector for a table clone element, but if there are multiple tables it'll just return the first one. This leads to the wrong branch of code in getCoords to return the visibleRowHeadedColumnToSourceColumn column rather than the offsettedTH column:

if (overlayContainsElement(Overlay.CLONE_TOP_LEFT_CORNER, cellElement) || overlayContainsElement(Overlay.CLONE_LEFT, cellElement)) {
col = this.columnFilter.offsettedTH(col);
} else {
col = this.columnFilter.visibleRowHeadedColumnToSourceColumn(col);
}

This is explains why it still works before any offset due to scrolling has happened (in which case both branches return the same result), but breaks as soon as there is.

@aaronbeall

This comment has been minimized.

Copy link
Contributor Author

commented Apr 15, 2019

Changing the implementation of overlayContainsElement to require a root element and passing in this.wtRootElement fixed the issue for me:

export function overlayContainsElement(overlayType, element, root) {
  const overlayElement = root.parentElement.querySelector(`.ht_clone_${overlayType}`);
  return overlayElement ? overlayElement.contains(element) : null;
}
@AMBudnik

This comment has been minimized.

Copy link
Contributor

commented May 13, 2019

I'm happy to announce that we've released the fix :) again thanks for sharing, Aaron!

@AMBudnik AMBudnik closed this May 13, 2019

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.