Bug 220580 – REGRESSION (r257839): Element cannot be "focus()"ed right after becoming visible from hidden

• Status: CLOSED
• Resolution: DUPLICATE
• Component: DOM

[Tomoki Imai]

Created attachment 417510 [details]
Testcase

We found a regression from r257839.

Here is how to reproduce:
1. Open the attached html with MiniBrowser
2. Push Enter key

Expected result:
Newly appeared "Menu Item" button should have focus.

Actual result:
Newly appeared "Menu Item" button doesn't have focus.

Reproduced environment:
- WinCairo MiniBrowser (r271389)

Note:
- I confirmed that reverting r257839 solves the issue.
- Chrome (87.0.4280.141) and Firefox (84.0.1) on Windows don't have this issue
- I didn't test Safari, but because the changed code in r257839 is platform-independent code, I hope it can be reproduced in Safari too.

Attached test case description:
"Menu Item" button is at first invisible, because the div which contains the button is "display:none".
When Enter key is hit, "open" class is added, and it should overwrite "display" with "block".
Then we call "focus" on the button. Because button is visible now, it should have focus.

// open menu
document.querySelector('.menu').classList.add('open');
// focus on menu item
document.querySelector('.menu-item').focus();

<div class="menu">
    <ul>
        <li>
            <button class="menu-item">Menu Item</button>
        </li>
    </ul>
</div>

.menu {
    display: none;
    background: #000;
}
.open {
    display: block;
}

[Antti Koivisto]

I can't repro on Safari (the menu opens fine) but I believe this is the same bug as 217240.

*** This bug has been marked as a duplicate of bug 217240 ***

[Tomoki Imai]

Antti,

Thanks for the info, sorry, I'm not sure why I missed that ticket.

This bug and bug bug 217240 seems to be same.
I confirmed that attachment 417524 [details] in bug 217240 fixes this issue.

[Antti Koivisto]

Thanks for confirmation!