Fix offset() for elements within foreign object context

[kumilingus]

Context

After inserting the table into SVG , the cell selection boxes will stop appearing. The user can edit the cell, but the input element is hidden (or misplaced).

Selecting the B3 cell:

Editing the B3 cell:

I managed to locate the root cause of the problem. It lies within the DOM utility offset that does not account for the DOM element to be inside a foreign object. The foreign object has neither offsetLeft nor offsetTop properties defined and the offset() method ends up returning { top: NaN, left: NaN }.

An example use case is the possibility to insert tables into an SVG document and connect columns or rows using links.
https://jsfiddle.net/kumilingus/j4s8bf97/

How has this been tested?

1. A unit test has been added.
2. A patched version of Handsontable with the same demo: https://jsfiddle.net/kumilingus/fq7zyr5b/

Types of changes

• Bug fix (non-breaking change which fixes an issue)

Related issue(s):

1. [Bug]: Selection is not displayed when the table is in a foreign object #10480

Affected project(s):

• handsontable

Checklist:

• I have reviewed the guidelines about Contributing to Handsontable and I confirm that my code follows the code style of this project.
• I have signed the Contributor License Agreement

[kumilingus]

It seems that your unit test environment does not allow the offset method to be tested? Perhaps that's the reason why there was no test for the method in the first place?

The DOM elements seem to have offsetParent always set to null and no size. Any suggestion how to test the issue?

[AMBudnik]

Hi @kumilingus

I think that at this point, the PR is ready for a review. Thank you for sharing.

[budnix]

The DOM elements seem to have offsetParent always set to null and no size. Any suggestion how to test the issue?

The *.unit.js files are run in a fake DOM environment (JSDOM), and the results may not be accurate. I'd suggest moving the test to the element.spec.js file. *.spec.js files are running in the real browser.

[kumilingus]

Hi @budnix, I moved the test to the element.spec.js file, but I wasn't sure how to run it. 🤦 😄

[budnix]

Hi @budnix, I moved the test to the element.spec.js file, but I wasn't sure how to run it. 🤦 😄

I reviewed the code, and besides one mistake, it looks good 👌

PS: You can run these tests by running npm run test:e2e (in the handsontable directory), or you can narrow them by npm run test:e2e --testPathPattern=element.

[AMBudnik]

Hi @kumilingus

I have great news! Your merged pull request was just published with Handsontable v14.0.0

Thank you again for your input.

Here's #9754 the full list of changes for this release.