UI thread blocking - All input elements stops working and seems inaccessible when input type range is disabled dynamically in chrome

user_1101893 0
Viewed 990

When I am trying to disable an input range on my page dynamically, all other input elements on my page stop working in chrome.

Here when I disable #mySlider, #chkBox and #myButton becomes inaccessible and does not trigger respective functions, even can't able to check the checkbox.

My chrome version: 31.0.1650.63 m

FIDDLE DEMO >>

HTML

 <input type="range" min="0" max="5" value="0" id="mySlider" onChange="checkMove(this)" />

 <input type="checkbox" value="one" id="chkBox" ><br/>
 <input type="button" id="myButton" value="Click Me" onClick="clickCheck();" />

SCRIPT

function checkMove(elem) {

    var minVal = elem.value;

    if (minVal == 2) {
        elem.disabled = true;
    }
}

function clickCheck() {
    alert("hi")
}
range google-chrome input html javascript
3 Answers

I know the bug has been fixed in chrome... For sometime, but after reviewing the cause and fix implemented for the bug I thought I would provide a workaround if needed.

    // Replace the `elem.disabled = true;` with
    setTimeout(function(){ elem.disabled = true; },0);

The idea being we let the browser exit it's current event stream and then disable the input element.

The issue was essentially a catch-22, disable the input, and then update the range when the final event comes in, the problem was the element was now disabled and as such would never receive such an event, this left the browser hanging, and it never released the UI.

For more specifics checkout the patch provided in the link in the comment by @PrasanthKC above.

user_14598600
Related