IE 9, clicking cell scrolls to top

[handsontable]

IE 9, clicking cell scrolls to top

[grund3g]

@dstekol @AMBudnik I had the same issue with multiple tables on one page in IE11 and fixed it by adapting hideEditableElement and showEditableElement:

Handsontable.editors.TextEditor.prototype.hideEditableElement = function() {
    this.textareaParentStyle.visibility = 'hidden';
    this.textareaParentStyle.position = 'fixed';
    this.textareaParentStyle.top = '0px';
    this.textareaParentStyle.left = '0px';

    //this.textareaParentStyle.top = '-9999px'; // default
    //this.textareaParentStyle.left = '-9999px'; // default
    this.textareaParentStyle.zIndex = '-1'; // default
};

Handsontable.editors.TextEditor.prototype.showEditableElement = function() {
    this.textareaParentStyle.position = 'absolute';
    this.textareaParentStyle.visibility = 'visible';

    this.textareaParentStyle.zIndex = this.holderZIndex >= 0 ? this.holderZIndex : ''; // default
};

[AMBudnik]

Thank you for your suggestion @grund3g

[nobisheikh]

I think I found what the issue is. IE 9 scrolls to where the textarea is whenever focus or select is called on the text area. Is there a way to work around this issue ?

[warpech]

Hi nobisheikh, thanks for your interest! This should be fixed now. Indeed the cause was that IE scrolled to the invisible textarea, so I made sure that that textarea is always in the corner of the viewport.

[dstekol]

I have found that there is still a jumping issue with the textarea when there are multiple tables on the page. My fix is to recode the textarea to be invisible but on screen (visibility:hidden; position:fixed; top: 0px; left: 0px;) when it is not needed (inside the hideEditableElement function), and then change to "position:absolute; visibility:visible;" when it is needed (in the showEditableElement function). This stops the browser from jumping to it because it is technically always floating on the top left corner of the screen, you just can't see it, and this seems a cleaner solution than making the position -9999px, which is what it is being set to in the existing code.

[AMBudnik]

Hi @dstekol

this topic is really old. Can I ask you to create a new issue with a demo or/and a video where this can be seen?

[github-actions]

Launch the local version of documentation by running:

npm run docs:review 67f796e288da075f113e2f99487c3aa70a2ef8f9