Emilio Cobos Álvarez
fc08bd4c08
This is... Not particularly pretty, to be clear. Maybe I should file a spec issue to get better define when and how the :focus-within state gets updated, because on one hand it's weird that when in a tree like: <div id=parent> <input id=a> <input id=b> </div> Moving focus from a to b would allow you to observe parent without :focus-within. But on the other the current set-up is clearly error-prone. Maybe we should add more state to nsFocusManager (an stack with currently :focus-within ancestors) and fix it up "more properly" when the focus actually moves (which could be on the blur event of a), but I think I'd like to at least have some draft spec text for how does that look. I filed https://github.com/whatwg/html/issues/11835 to discuss this a bit more thoroughly. Differential Revision: https://phabricator.services.mozilla.com/D270166
38 lines
1.6 KiB
HTML
38 lines
1.6 KiB
HTML
<!doctype html>
|
|
<meta charset="utf-8">
|
|
<title>Moving focus from its own focus() call doesn't leave stale :focus-within state</title>
|
|
<link rel="help" href="https://drafts.csswg.org/selectors-4/#the-focus-within-pseudo">
|
|
<link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1996182">
|
|
<link rel="author" href="mailto:emilio@crisal.io" title="Emilio Cobos Álvarez">
|
|
<link rel="author" href="https://mozilla.com" title="Mozilla">
|
|
<script src="/resources/testharness.js"></script>
|
|
<script src="/resources/testharnessreport.js"></script>
|
|
<div id="wrapper">
|
|
<div id="outer">
|
|
<input id="tab">
|
|
<input id="input" onblur="outside.focus()">
|
|
</div>
|
|
<input id="outside">
|
|
</div>
|
|
<script>
|
|
onload = function() {
|
|
test(function() {
|
|
let wrapper = document.getElementById("wrapper");
|
|
let outer = document.getElementById("outer");
|
|
let tab = document.getElementById("tab");
|
|
let input = document.getElementById("input");
|
|
let outside = document.getElementById("outside");
|
|
|
|
input.focus();
|
|
assert_equals(document.activeElement, input, "activeElement after focus");
|
|
assert_true(outer.matches(":focus-within"), "outer matches :focus-within");
|
|
assert_true(wrapper.matches(":focus-within"), "wrapper matches :focus-within");
|
|
// This ends up shifting to `outside` rather than `tab`.
|
|
tab.focus();
|
|
assert_equals(document.activeElement, outside, "activeElement after trying to focus sibling");
|
|
assert_true(wrapper.matches(":focus-within"), "wrapper still matches :focus-within");
|
|
assert_false(outer.matches(":focus-within"), "outer no longer matches :focus-within");
|
|
});
|
|
}
|
|
</script>
|