Focus Loss from disabling an HTML button element

Dom1953 · Post by **Dom1953** » July 24th, 2014, 6:32 am

Hi,
I'm writing a puzzle page in HTML/Javascript/CSS with an undo facility that can be exhausted. I also have an event listener on the keypress event.

When I disable the undo button in javascript using buttonElement.disabled = true;, the page document loses focus and stops responding to the keyboard. I need to click on the page (anywhere else besides on the disabled button) or type SHIFT+TAB in order to continue with keyboard input.

I can work around by greying out the undo button in CSS rather than disabling it, but it's a pity the standard method doesn't work.

Is this bug well known and I just havn't been able to find it or should I submit a bug report?
Thanks,
Dom

Post by **DanRaisch** » July 24th, 2014, 6:41 am

Moving to Web Development.

Frenzie · Post by **Frenzie** » July 24th, 2014, 8:32 am

Do you have a testcase? Presumably you should use blur() (as in document.activeElement.blur() or document.getElementById('blabla').blur()) or window.focus() to get the focus away from the disabled button.

Dom1953 · Post by **Dom1953** » July 24th, 2014, 10:28 pm

Thank you thank you merci bien. Explictly blurring the button after disabling (4. in the test case) restores keyboard input (although not required in IE).
What didn't work was transferring focus to the body, which I tried before posting. This I don't understand but can live with.
For interest a testcase to show what this is all about is as follows:

Code: Select all

<!DOCTYPE html>
<html>
<head>
    <title>Focus loss from disabled element</title>
    <meta charset="utf-8">
    <script>
        function sayKey(event)
        {    event = event || window.event;
             say(event.key);
        }
        window.addEventListener("keydown", sayKey, false);
   function say(what)
   {    document.getElementById("say").innerHTML = what;
   }
    </script>
</head>
<body>
<h1>Focus loss from disabled element</h1>

    1. Type some keyboard characters:
        <div id="say" style="margin-left: 5em;">
            &nbsp;
        </div>

    2. Click on a button that disables itself:
    <p>
    <button onclick="this.disabled=true;">Click to disable me</button> (without blur)
    </p>

    3. Try typing some more.<br><br>

    4. <small>SHIFT+RELOAD</small> and try this one:
    <p>
    <button onclick="this.disabled=true;this.blur();">Click to disable me</button> (with blur)
    </p>

    5. <small>SHIFT+RELOAD</small> and try this one:
    <p>
    <button onclick="this.disabled=true;document.body.focus();">Click to disable me</button> (document body focus)
    </p>

    <div onmouseover="say(document.activeElement);">mouse over to show activeElement</div>
</body>
</html>

Frenzie · Post by **Frenzie** » July 25th, 2014, 3:35 am

I'd say this looks like a bug with the keydown event. It should still fire even if a disabled element has focus.[1] This issue was reported at least once before, but I prefer your testcase because it comes without all the complicating factors of jQuery.

[1] Technically there is no spec, but it makes sense and all other browser engines do it that way.

Dom1953 · Post by **Dom1953** » July 25th, 2014, 4:07 pm

You are welcome. To aid you in your efforts, however, you may find the last call draft of HTML 5 actually covers this situation quite unambiguously: http://www.w3.org/TR/html5/editing.html#focus-management

7.4.2 Focus management, .... last paragraph and example:
When an element that is focused stops being a focusable element, or stops being focused without another element being explicitly focused in its stead, the user agent should synchronously run the unfocusing steps for the affected element only.

FF is not doing this and I imagine FF should make the activeElement document.body when an element is disabled without programmer interaction (as does IE). If FF adopts this recommendation I suspect this keyboard connection problem will go away, . . . all by itself :-)

Frenzie · Post by **Frenzie** » July 26th, 2014, 1:40 am

Ah, interesting. In Opera/Presto (two years old, I know) the focus remains on the disabled element, but keydown still fires. But as you say, fixing this bug in Gecko would be senseless if it's circumvented per spec. One of us should probably add a note to Bugzilla… I think I have an account…

Dom1953 · Post by **Dom1953** » July 27th, 2014, 7:23 pm

If you wouldn't mind, please let bugzilla know. (If anything changes and you need me to do it please advise.)

Many thanks for your kind help.

Frenzie · Post by **Frenzie** » July 28th, 2014, 2:08 am

I already did.

And no problem.

Focus Loss from disabling an HTML button element

Focus Loss from disabling an HTML button element

Re: Focus Loss from disabling an HTML button element

Re: Focus Loss from disabling an HTML button element

Re: Focus Loss from disabling an HTML button element

Re: Focus Loss from disabling an HTML button element

Re: Focus Loss from disabling an HTML button element

Re: Focus Loss from disabling an HTML button element

Re: Focus Loss from disabling an HTML button element

Re: Focus Loss from disabling an HTML button element