Select box closes when using javascript scrollTop function

Question

I have an issue where I have box that is kind of like a live feed and updates constantly. This live feed has overflow-y: scroll and I use scrollTop to bring them to the bottom of the container.

However if clicks on the select box it will automatically get closed when the live feed is updating and scrollTop is called.

This seems to only be broken in Chrome (Version 27.0.1453.110 m) It works correctly in IE, FF, Opera, Safari.

You can view the example here, click on the select box and wait for the other box to start scrolling, the select box will lose the dropdown: http://jsfiddle.net/xa3D2/2/

HTML

<select>
    <option>1</option>
    <option>2</option>
    <option>3</option>
    <option>4</option>
    <option>5</option>
</select>
<div id="scrollBox">
</div>

JS

function addContent()
{
    $('#scrollBox').append('<div>');
    $('#scrollBox').scrollTop($('#scrollBox').prop('scrollHeight'));
    setTimeout(addContent,500);
}
setTimeout(addContent,500);

CSS

#scrollBox {
    border: 1px solid #ccc;
    overflow-y: scroll;
    word-wrap: break-word;
    background: #fff;
    color: #000;
    text-align: left;
    position: absolute;
    top: 50px;
    left: 0;
    right: 0;
    width: 100px;
    height: 300px;
}
#scrollBox div {
    height: 50px;
    border: 1px solid #00f;
}

I guess my question would be is this a Chrome bug? Is there a possible way around this?

FYI the focus on select is not lose in chrome, seems the issue more difficult to catch unfortunately — A. Wolff, Jun 17 '13 at 17:37
@roasted, I have revised my question I see the focus remains but the problem is the dropdown disappears and you have to click on it again. — arosolino, Jun 17 '13 at 17:40
I can't find a solution but here are 2 similar question worth reading: http://stackoverflow.com/questions/3872375/jquery-javascript-scrolltop-not-working-as-expected-on-chrome-to-restore-scrollb and http://stackoverflow.com/questions/1830080/jquery-scrolltop-doesnt-seem-to-work-in-safari-or-chrome-windows — Precastic, Jun 17 '13 at 17:42
reported as chrome bug here: https://code.google.com/p/chromium/issues/detail?id=114922 — A. Wolff, Jun 17 '13 at 18:10
@roasted I went ahead and submitted a new bug report since it appears to have never been handled. — arosolino, Jun 17 '13 at 18:14

score 2 · Accepted Answer · answered Jun 17 '13 at 18:25

2

This has been fixed in the latest Chrome. You can see this by visiting https://www.google.com/intl/en/chrome/browser/canary.html

We are apparently waiting on an update.

I downloaded the latest Canary version and can confirm it does not happen there.

answered Jun 17 '13 at 18:25

teynon

7,540
10
63
106

score 0 · Answer 2 · answered Jun 17 '13 at 17:52

0

The problem only seems to happen when the select is over the scrolling area. As a fix I would either:

Use the jQuery .menu() widget for a list of selectable options http://jqueryui.com/menu/; or
Redo the layout so that the select is not over the area being re-drawn by scrollTop().

answered Jun 17 '13 at 17:52

Precastic

3,742
1
24
29

@arosolino LOL ok the culprit is overflow-y: scroll; Remove that & it works but breaks the functionality. I removed that with some other CSS & thought overlay was the problem. – Precastic Jun 17 '13 at 18:04
Yeah I know what the problem is and since it only happens in Chrome I guess I will just submit a but report. – arosolino Jun 17 '13 at 18:09
It's the actual scrolling that breaks it, if you remove the scrollTop() call it works as well. – arosolino Jun 17 '13 at 18:09

Select box closes when using javascript scrollTop function

2 Answers2