-
Notifications
You must be signed in to change notification settings - Fork 402
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
fix(engine): fix for delegatesFocus with tabindex=0 #812
fix(engine): fix for delegatesFocus with tabindex=0 #812
Conversation
@@ -55,7 +55,7 @@ export function PatchedCustomElement(Base: HTMLElement): HTMLElementConstructor | |||
|
|||
// Check if the value from the dom has changed | |||
const newValue = tabIndexGetter.call(this); | |||
if ((!hasAttr || originalValue !== newValue) && newValue === -1) { | |||
if ((!hasAttr || originalValue !== newValue) && (newValue === -1 || (isDelegatingFocus(this) && newValue === 0))) { |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
If we are delegating focus, we have to listen for the focusin
event if the tabindex is 0
// Host element can show up in our "previous" section if its tabindex is 0 | ||
// We want to filter that out here | ||
const firstChildIndex = (hostIndex > -1) ? hostIndex : ArrayIndexOf.call(all, firstChild); | ||
const prev = ArraySlice.call(all, 0, firstChildIndex); |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
When tabindex
is 0 on the host, host
will actually show up in the previous array. We have to make sure that doesn't happen. I think this is quicker than using ArrayFilter
call but I could be wrong.
* <x-input> | ||
* #shadowRoot(delegatesFocus=true) | ||
* <input /> <--- focus in here | ||
**/ |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
These comments are no longer relevant because we disqualify based on mousedown
// focuses on either the custom element, or an internal element | ||
// via keyboard navigation (tab or shift+tab) | ||
// Focusing via mouse should be disqualified before this gets called | ||
function keyboardFocusInHandler(event: FocusEvent) { |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Rename for clarity
Benchmark resultsBase commit: lwc-engine-benchmark
|
e70185c
to
c7d7568
Compare
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
LGTM
00a5b3e
to
d667dc5
Compare
Benchmark resultsBase commit: lwc-engine-benchmark
|
Benchmark resultsBase commit: lwc-engine-benchmark
|
Benchmark resultsBase commit: lwc-engine-benchmark
|
Benchmark resultsBase commit: lwc-engine-benchmark
|
Benchmark resultsBase commit: lwc-engine-benchmark
|
Details
tabindex=0
anddelegatesFocus
were not actually delegating focus properly.Does this PR introduce a breaking change?