Skip to content
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

Merged
merged 8 commits into from
Nov 8, 2018

Conversation

davidturissini
Copy link
Contributor

Details

  • Fixes and issue where custom elements with tabindex=0 and delegatesFocus were not actually delegating focus properly.

Does this PR introduce a breaking change?

  • Yes
  • No

@@ -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))) {
Copy link
Contributor Author

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);
Copy link
Contributor Author

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
**/
Copy link
Contributor Author

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) {
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Rename for clarity

@salesforce-best-lwc-internal
Copy link

Benchmark results

Base commit: a5b99f1 | Target commit: e70185c

lwc-engine-benchmark

table-append-1k metric base(a5b99f1) target(e70185c) trend
benchmark-table/append/1k duration 158.05 (±4.25 ms) 155.90 (±3.95 ms) -2.2ms (1.4%) 👌
table-clear-1k metric base(a5b99f1) target(e70185c) trend
benchmark-table/clear/1k duration 6.40 (±0.45 ms) 6.45 (±0.35 ms) +0.0ms (0.8%) 👌
table-create-10k metric base(a5b99f1) target(e70185c) trend
benchmark-table/create/10k duration 922.15 (±8.70 ms) 937.60 (±7.65 ms) +15.4ms (1.7%) 👎
table-create-1k metric base(a5b99f1) target(e70185c) trend
benchmark-table/create/1k duration 122.05 (±3.15 ms) 120.05 (±3.15 ms) -2.0ms (1.6%) 👌
table-update-10th-1k metric base(a5b99f1) target(e70185c) trend
benchmark-table/update-10th/1k duration 79.00 (±2.65 ms) 79.25 (±2.25 ms) +0.3ms (0.3%) 👌
tablecmp-append-1k metric base(a5b99f1) target(e70185c) trend
benchmark-table-component/append/1k duration 260.75 (±7.05 ms) 263.40 (±6.70 ms) +2.6ms (1.0%) 👌
tablecmp-clear-1k metric base(a5b99f1) target(e70185c) trend
benchmark-table-component/clear/1k duration 12.20 (±1.75 ms) 12.10 (±2.00 ms) -0.1ms (0.8%) 👌
tablecmp-create-10k metric base(a5b99f1) target(e70185c) trend
benchmark-table-component/create/10k duration 1811.95 (±15.75 ms) 1817.25 (±11.10 ms) +5.3ms (0.3%) 👌
tablecmp-create-1k metric base(a5b99f1) target(e70185c) trend
benchmark-table-component/create/1k duration 211.35 (±5.40 ms) 217.00 (±5.55 ms) +5.6ms (2.7%) 👎
tablecmp-update-10th-1k metric base(a5b99f1) target(e70185c) trend
benchmark-table-component/update-10th/1k duration 72.50 (±4.15 ms) 72.55 (±5.30 ms) +0.0ms (0.1%) 👌
wc-append-1k metric base(a5b99f1) target(e70185c) trend
benchmark-table-wc/append/1k duration 297.60 (±10.20 ms) 295.90 (±13.30 ms) -1.7ms (0.6%) 👌
wc-clear-1k metric base(a5b99f1) target(e70185c) trend
benchmark-table-wc/clear/1k duration 23.95 (±2.45 ms) 23.95 (±2.25 ms) 0.0ms (0.0%) 👌
wc-create-10k metric base(a5b99f1) target(e70185c) trend
benchmark-table-wc/create/10k duration 4463.70 (±27.80 ms) 4470.95 (±26.55 ms) +7.3ms (0.2%) 👌
wc-create-1k metric base(a5b99f1) target(e70185c) trend
benchmark-table-wc/create/1k duration 267.25 (±5.30 ms) 266.35 (±5.00 ms) -0.9ms (0.3%) 👌
wc-update-10th-1k metric base(a5b99f1) target(e70185c) trend
benchmark-table-wc/update-10th/1k duration 77.00 (±6.15 ms) 77.60 (±7.25 ms) +0.6ms (0.8%) 👌

@davidturissini davidturissini force-pushed the dturissini/delegates-focus-tabindex-zero branch from e70185c to c7d7568 Compare November 8, 2018 01:34
Copy link
Member

@ekashida ekashida left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

LGTM

@davidturissini davidturissini force-pushed the dturissini/delegates-focus-tabindex-zero branch from 00a5b3e to d667dc5 Compare November 8, 2018 19:07
@salesforce-best-lwc-internal
Copy link

Benchmark results

Base commit: d520c72 | Target commit: 00a5b3e

lwc-engine-benchmark

table-append-1k metric base(d520c72) target(00a5b3e) trend
benchmark-table/append/1k duration 154.65 (±5.10 ms) 157.00 (±3.00 ms) +2.3ms (1.5%) 👎
table-clear-1k metric base(d520c72) target(00a5b3e) trend
benchmark-table/clear/1k duration 6.35 (±0.25 ms) 6.50 (±0.45 ms) +0.2ms (2.4%) 👌
table-create-10k metric base(d520c72) target(00a5b3e) trend
benchmark-table/create/10k duration 919.10 (±6.35 ms) 923.95 (±6.40 ms) +4.9ms (0.5%) 👎
table-create-1k metric base(d520c72) target(00a5b3e) trend
benchmark-table/create/1k duration 119.50 (±2.50 ms) 120.70 (±2.60 ms) +1.2ms (1.0%) 👎
table-update-10th-1k metric base(d520c72) target(00a5b3e) trend
benchmark-table/update-10th/1k duration 80.05 (±3.50 ms) 88.90 (±6.60 ms) +8.9ms (11.1%) 👎
tablecmp-append-1k metric base(d520c72) target(00a5b3e) trend
benchmark-table-component/append/1k duration 264.10 (±8.95 ms) 261.10 (±6.85 ms) -3.0ms (1.1%) 👌
tablecmp-clear-1k metric base(d520c72) target(00a5b3e) trend
benchmark-table-component/clear/1k duration 13.05 (±2.05 ms) 12.60 (±2.10 ms) -0.5ms (3.4%) 👌
tablecmp-create-10k metric base(d520c72) target(00a5b3e) trend
benchmark-table-component/create/10k duration 1828.30 (±9.55 ms) 1842.75 (±17.80 ms) +14.5ms (0.8%) 👎
tablecmp-create-1k metric base(d520c72) target(00a5b3e) trend
benchmark-table-component/create/1k duration 213.55 (±4.85 ms) 213.50 (±6.40 ms) -0.1ms (0.0%) 👌
tablecmp-update-10th-1k metric base(d520c72) target(00a5b3e) trend
benchmark-table-component/update-10th/1k duration 74.80 (±5.70 ms) 73.60 (±6.05 ms) -1.2ms (1.6%) 👌
wc-append-1k metric base(d520c72) target(00a5b3e) trend
benchmark-table-wc/append/1k duration 289.10 (±10.80 ms) 286.70 (±12.35 ms) -2.4ms (0.8%) 👌
wc-clear-1k metric base(d520c72) target(00a5b3e) trend
benchmark-table-wc/clear/1k duration 23.35 (±2.60 ms) 23.00 (±2.40 ms) -0.4ms (1.5%) 👌
wc-create-10k metric base(d520c72) target(00a5b3e) trend
benchmark-table-wc/create/10k duration 4474.00 (±21.80 ms) 4433.35 (±27.50 ms) -40.6ms (0.9%) 👍
wc-create-1k metric base(d520c72) target(00a5b3e) trend
benchmark-table-wc/create/1k duration 262.85 (±5.70 ms) 263.55 (±5.80 ms) +0.7ms (0.3%) 👌
wc-update-10th-1k metric base(d520c72) target(00a5b3e) trend
benchmark-table-wc/update-10th/1k duration 81.05 (±4.25 ms) 80.15 (±5.95 ms) -0.9ms (1.1%) 👌

@salesforce-best-lwc-internal
Copy link

Benchmark results

Base commit: 60f17bc | Target commit: d667dc5

lwc-engine-benchmark

table-append-1k metric base(60f17bc) target(d667dc5) trend
benchmark-table/append/1k duration 159.55 (±4.05 ms) 156.10 (±4.05 ms) -3.5ms (2.2%) 👍
table-clear-1k metric base(60f17bc) target(d667dc5) trend
benchmark-table/clear/1k duration 7.00 (±0.50 ms) 6.45 (±0.55 ms) -0.5ms (7.9%) 👍
table-create-10k metric base(60f17bc) target(d667dc5) trend
benchmark-table/create/10k duration 935.80 (±6.90 ms) 939.20 (±6.70 ms) +3.4ms (0.4%) 👌
table-create-1k metric base(60f17bc) target(d667dc5) trend
benchmark-table/create/1k duration 120.05 (±3.50 ms) 119.65 (±3.00 ms) -0.4ms (0.3%) 👌
table-update-10th-1k metric base(60f17bc) target(d667dc5) trend
benchmark-table/update-10th/1k duration 79.15 (±3.05 ms) 89.85 (±1.95 ms) +10.7ms (13.5%) 👎
tablecmp-append-1k metric base(60f17bc) target(d667dc5) trend
benchmark-table-component/append/1k duration 259.65 (±8.25 ms) 269.60 (±6.50 ms) +10.0ms (3.8%) 👎
tablecmp-clear-1k metric base(60f17bc) target(d667dc5) trend
benchmark-table-component/clear/1k duration 13.00 (±1.75 ms) 14.50 (±1.75 ms) +1.5ms (11.5%) 👌
tablecmp-create-10k metric base(60f17bc) target(d667dc5) trend
benchmark-table-component/create/10k duration 1819.75 (±16.20 ms) 1818.70 (±9.95 ms) -1.0ms (0.1%) 👌
tablecmp-create-1k metric base(60f17bc) target(d667dc5) trend
benchmark-table-component/create/1k duration 215.65 (±5.60 ms) 214.60 (±5.25 ms) -1.0ms (0.5%) 👌
tablecmp-update-10th-1k metric base(60f17bc) target(d667dc5) trend
benchmark-table-component/update-10th/1k duration 74.50 (±4.85 ms) 74.55 (±5.75 ms) +0.1ms (0.1%) 👌
wc-append-1k metric base(60f17bc) target(d667dc5) trend
benchmark-table-wc/append/1k duration 297.95 (±12.90 ms) 295.25 (±10.65 ms) -2.7ms (0.9%) 👌
wc-clear-1k metric base(60f17bc) target(d667dc5) trend
benchmark-table-wc/clear/1k duration 25.60 (±2.45 ms) 24.85 (±2.95 ms) -0.8ms (2.9%) 👌
wc-create-10k metric base(60f17bc) target(d667dc5) trend
benchmark-table-wc/create/10k duration 4554.65 (±21.55 ms) 4512.95 (±20.65 ms) -41.7ms (0.9%) 👍
wc-create-1k metric base(60f17bc) target(d667dc5) trend
benchmark-table-wc/create/1k duration 269.50 (±5.70 ms) 272.10 (±4.25 ms) +2.6ms (1.0%) 👌
wc-update-10th-1k metric base(60f17bc) target(d667dc5) trend
benchmark-table-wc/update-10th/1k duration 79.80 (±6.00 ms) 78.15 (±3.70 ms) -1.6ms (2.1%) 👌

@salesforce-best-lwc-internal
Copy link

Benchmark results

Base commit: 60f17bc | Target commit: 4ed3a04

lwc-engine-benchmark

table-append-1k metric base(60f17bc) target(4ed3a04) trend
benchmark-table/append/1k duration 159.55 (±4.05 ms) 157.80 (±5.50 ms) -1.8ms (1.1%) 👌
table-clear-1k metric base(60f17bc) target(4ed3a04) trend
benchmark-table/clear/1k duration 7.00 (±0.50 ms) 6.50 (±0.45 ms) -0.5ms (7.1%) 👍
table-create-10k metric base(60f17bc) target(4ed3a04) trend
benchmark-table/create/10k duration 935.80 (±6.90 ms) 921.80 (±6.50 ms) -14.0ms (1.5%) 👍
table-create-1k metric base(60f17bc) target(4ed3a04) trend
benchmark-table/create/1k duration 120.05 (±3.50 ms) 120.15 (±2.95 ms) +0.1ms (0.1%) 👌
table-update-10th-1k metric base(60f17bc) target(4ed3a04) trend
benchmark-table/update-10th/1k duration 79.15 (±3.05 ms) 79.10 (±2.00 ms) -0.1ms (0.1%) 👌
tablecmp-append-1k metric base(60f17bc) target(4ed3a04) trend
benchmark-table-component/append/1k duration 259.65 (±8.25 ms) 265.40 (±7.15 ms) +5.8ms (2.2%) 👎
tablecmp-clear-1k metric base(60f17bc) target(4ed3a04) trend
benchmark-table-component/clear/1k duration 13.00 (±1.75 ms) 13.55 (±2.10 ms) +0.6ms (4.2%) 👌
tablecmp-create-10k metric base(60f17bc) target(4ed3a04) trend
benchmark-table-component/create/10k duration 1819.75 (±16.20 ms) 1829.10 (±12.35 ms) +9.3ms (0.5%) 👎
tablecmp-create-1k metric base(60f17bc) target(4ed3a04) trend
benchmark-table-component/create/1k duration 215.65 (±5.60 ms) 211.10 (±4.65 ms) -4.5ms (2.1%) 👍
tablecmp-update-10th-1k metric base(60f17bc) target(4ed3a04) trend
benchmark-table-component/update-10th/1k duration 74.50 (±4.85 ms) 73.10 (±5.25 ms) -1.4ms (1.9%) 👌
wc-append-1k metric base(60f17bc) target(4ed3a04) trend
benchmark-table-wc/append/1k duration 297.95 (±12.90 ms) 294.25 (±13.00 ms) -3.7ms (1.2%) 👌
wc-clear-1k metric base(60f17bc) target(4ed3a04) trend
benchmark-table-wc/clear/1k duration 25.60 (±2.45 ms) 24.70 (±2.50 ms) -0.9ms (3.5%) 👌
wc-create-10k metric base(60f17bc) target(4ed3a04) trend
benchmark-table-wc/create/10k duration 4554.65 (±21.55 ms) 4476.80 (±28.95 ms) -77.8ms (1.7%) 👍
wc-create-1k metric base(60f17bc) target(4ed3a04) trend
benchmark-table-wc/create/1k duration 269.50 (±5.70 ms) 266.80 (±4.65 ms) -2.7ms (1.0%) 👍
wc-update-10th-1k metric base(60f17bc) target(4ed3a04) trend
benchmark-table-wc/update-10th/1k duration 79.80 (±6.00 ms) 75.75 (±5.55 ms) -4.0ms (5.1%) 👍

@salesforce-best-lwc-internal
Copy link

Benchmark results

Base commit: 60f17bc | Target commit: cf8e8c4

lwc-engine-benchmark

table-append-1k metric base(60f17bc) target(cf8e8c4) trend
benchmark-table/append/1k duration 159.55 (±4.05 ms) 155.40 (±4.60 ms) -4.2ms (2.6%) 👍
table-clear-1k metric base(60f17bc) target(cf8e8c4) trend
benchmark-table/clear/1k duration 7.00 (±0.50 ms) 6.55 (±0.50 ms) -0.5ms (6.4%) 👍
table-create-10k metric base(60f17bc) target(cf8e8c4) trend
benchmark-table/create/10k duration 935.80 (±6.90 ms) 926.85 (±8.60 ms) -9.0ms (1.0%) 👍
table-create-1k metric base(60f17bc) target(cf8e8c4) trend
benchmark-table/create/1k duration 120.05 (±3.50 ms) 120.60 (±2.45 ms) +0.5ms (0.5%) 👌
table-update-10th-1k metric base(60f17bc) target(cf8e8c4) trend
benchmark-table/update-10th/1k duration 79.15 (±3.05 ms) 79.85 (±2.55 ms) +0.7ms (0.9%) 👌
tablecmp-append-1k metric base(60f17bc) target(cf8e8c4) trend
benchmark-table-component/append/1k duration 259.65 (±8.25 ms) 259.00 (±5.65 ms) -0.6ms (0.3%) 👌
tablecmp-clear-1k metric base(60f17bc) target(cf8e8c4) trend
benchmark-table-component/clear/1k duration 13.00 (±1.75 ms) 12.65 (±1.60 ms) -0.4ms (2.7%) 👌
tablecmp-create-10k metric base(60f17bc) target(cf8e8c4) trend
benchmark-table-component/create/10k duration 1819.75 (±16.20 ms) 1844.25 (±15.35 ms) +24.5ms (1.3%) 👎
tablecmp-create-1k metric base(60f17bc) target(cf8e8c4) trend
benchmark-table-component/create/1k duration 215.65 (±5.60 ms) 216.30 (±5.65 ms) +0.7ms (0.3%) 👌
tablecmp-update-10th-1k metric base(60f17bc) target(cf8e8c4) trend
benchmark-table-component/update-10th/1k duration 74.50 (±4.85 ms) 72.25 (±4.25 ms) -2.3ms (3.0%) 👌
wc-append-1k metric base(60f17bc) target(cf8e8c4) trend
benchmark-table-wc/append/1k duration 297.95 (±12.90 ms) 285.95 (±8.75 ms) -12.0ms (4.0%) 👍
wc-clear-1k metric base(60f17bc) target(cf8e8c4) trend
benchmark-table-wc/clear/1k duration 25.60 (±2.45 ms) 24.90 (±2.80 ms) -0.7ms (2.7%) 👌
wc-create-10k metric base(60f17bc) target(cf8e8c4) trend
benchmark-table-wc/create/10k duration 4554.65 (±21.55 ms) 4498.60 (±21.25 ms) -56.0ms (1.2%) 👍
wc-create-1k metric base(60f17bc) target(cf8e8c4) trend
benchmark-table-wc/create/1k duration 269.50 (±5.70 ms) 266.60 (±6.15 ms) -2.9ms (1.1%) 👌
wc-update-10th-1k metric base(60f17bc) target(cf8e8c4) trend
benchmark-table-wc/update-10th/1k duration 79.80 (±6.00 ms) 79.60 (±6.95 ms) -0.2ms (0.3%) 👌

@salesforce-best-lwc-internal
Copy link

Benchmark results

Base commit: 60f17bc | Target commit: 686704c

lwc-engine-benchmark

table-append-1k metric base(60f17bc) target(686704c) trend
benchmark-table/append/1k duration 159.55 (±4.05 ms) 156.45 (±4.35 ms) -3.1ms (1.9%) 👌
table-clear-1k metric base(60f17bc) target(686704c) trend
benchmark-table/clear/1k duration 7.00 (±0.50 ms) 6.80 (±0.50 ms) -0.2ms (2.9%) 👍
table-create-10k metric base(60f17bc) target(686704c) trend
benchmark-table/create/10k duration 935.80 (±6.90 ms) 930.35 (±8.25 ms) -5.5ms (0.6%) 👍
table-create-1k metric base(60f17bc) target(686704c) trend
benchmark-table/create/1k duration 120.05 (±3.50 ms) 121.55 (±2.80 ms) +1.5ms (1.2%) 👌
table-update-10th-1k metric base(60f17bc) target(686704c) trend
benchmark-table/update-10th/1k duration 79.15 (±3.05 ms) 78.55 (±2.45 ms) -0.6ms (0.8%) 👌
tablecmp-append-1k metric base(60f17bc) target(686704c) trend
benchmark-table-component/append/1k duration 259.65 (±8.25 ms) 261.45 (±8.70 ms) +1.8ms (0.7%) 👌
tablecmp-clear-1k metric base(60f17bc) target(686704c) trend
benchmark-table-component/clear/1k duration 13.00 (±1.75 ms) 12.65 (±1.65 ms) -0.4ms (2.7%) 👌
tablecmp-create-10k metric base(60f17bc) target(686704c) trend
benchmark-table-component/create/10k duration 1819.75 (±16.20 ms) 1811.80 (±11.30 ms) -8.0ms (0.4%) 👌
tablecmp-create-1k metric base(60f17bc) target(686704c) trend
benchmark-table-component/create/1k duration 215.65 (±5.60 ms) 212.10 (±4.85 ms) -3.5ms (1.6%) 👍
tablecmp-update-10th-1k metric base(60f17bc) target(686704c) trend
benchmark-table-component/update-10th/1k duration 74.50 (±4.85 ms) 73.60 (±5.50 ms) -0.9ms (1.2%) 👌
wc-append-1k metric base(60f17bc) target(686704c) trend
benchmark-table-wc/append/1k duration 297.95 (±12.90 ms) 287.05 (±10.50 ms) -10.9ms (3.7%) 👍
wc-clear-1k metric base(60f17bc) target(686704c) trend
benchmark-table-wc/clear/1k duration 25.60 (±2.45 ms) 24.45 (±2.25 ms) -1.2ms (4.5%) 👌
wc-create-10k metric base(60f17bc) target(686704c) trend
benchmark-table-wc/create/10k duration 4554.65 (±21.55 ms) 4536.70 (±33.10 ms) -17.9ms (0.4%) 👍
wc-create-1k metric base(60f17bc) target(686704c) trend
benchmark-table-wc/create/1k duration 269.50 (±5.70 ms) 269.25 (±6.30 ms) -0.3ms (0.1%) 👌
wc-update-10th-1k metric base(60f17bc) target(686704c) trend
benchmark-table-wc/update-10th/1k duration 79.80 (±6.00 ms) 75.45 (±5.20 ms) -4.3ms (5.5%) 👍

@davidturissini davidturissini merged commit 81f0dbd into master Nov 8, 2018
@davidturissini davidturissini deleted the dturissini/delegates-focus-tabindex-zero branch November 8, 2018 21:37
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants