javascriptinputscrollfocusenter

scrollIntoView() method stops scrolling mid-way to the element when triggered by ENTER key on input

Context

I'm developing a list of items.

I have a form on the top of the list in order to add new items (just 1 input and 1 submit button).

Once the form is submitted, I have the next code in order to automatically scroll into the new element (wherever it fits into the list):

document.getElementById(newItemId).scrollIntoView({ behavior: "smooth" });

For testing purposes and a better understanding of the problem, I created a huge list (50 items) and I made all new items to be placed at the bottom of the list, so I can get clearer evidences.

web page with a form at the top and a list of items below

Problem

When creating the item #51:

Note: Without behavior: "smooth" there isn't any problem, as it is an instant scroll and there is no time in-between to get interrupted.

Note 2: I managed to develop a workaround by using the window.scrollTo() method, but I would like to make it work with scrollIntoView() to avoid pixel-perfect calculations and to report this problem to affected browsers in case this is a bug.

Code Example

As suggested by comments, I made this jsbin for testing purposes: https://jsbin.com/kiwiviboro/edit?html,output

Considerations:

Solution

  • Source of the problem

    I just woke up with fresh ideas! And found out that the problem was in other part of the logic.

    I have a logic to hide the form when it is correctly submitted (affected CSS property: visibility: hidden), so the problem here is that the input loses the focus "unexpectedly" and some browsers (Chrome) when losing the focus stops any scrolling actions (and maybe other kind of animations?), some others (Edge) notice it a while later and others (Firefox) doesn't even care.

    I omitted it as I though it had nothing to do with this problem due to the differences between browsers behaviors.

    Solution

    In case you face this problem, just .blur() your input before sending/hiding the form or, most accurately / in any other case, before starting the scroll action, in order to lose the focus manually / intentionally before the scroll starts happening.

    Code Example

    I made the same code example of the question but with the fix already applied:

    https://jsbin.com/deciyenivo/edit?html,output

    You can check that it now works properly in all browsers.

    Discussion

    Anyway, do you think it is still a bug from Chrome and Edge? (and maybe other browsers) Should I report it?

    Or is this considered a correct behavior?

    Just for the record, I will leave here my current browsers versions: