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(synthetic-shadow): conservatively disable focus navigation routine upon focus #2077

Merged
merged 4 commits into from
Nov 9, 2020

Conversation

ekashida
Copy link
Member

@ekashida ekashida commented Nov 5, 2020

Details

In a nutshell, this is how we disable keyboard focus navigation when the user clicks on an element:

mousedown: letBrowserHandleFocus is set to true
focusin: short circuit the keyboard focus navigation routine if letBrowserHandleFocus is set to true
mouseup: letBrowserHandleFocus is set to false

The problem here is that, during a click, all focus events are processed before focusin events, so if there is a focus handler that runs between the mousedown and focusin events above, and it invokes the focus() method on an element (which is a very strange behavior), the letBrowserHandleFocus flag is incorrectly set to false before our focusin handler runs, causing the "next" element to be incorrectly focused.

Does this PR introduce breaking changes?

  • No, it does not introduce breaking changes.

GUS work item

N/A yet

@salesforce-best-lwc-internal
Copy link

⚠ Performance Regression

Best has detected that there is a 9.7% performance regression across your benchmarks.

Please click here to see more details.

Click to view significantly changed benchmarks

@lwc/engine-dom

❌ Regressions base (9e9b0f4) target (6d7cc18) trend
ss-slot-create-container.benchmark/benchmark-slot-ss/synthetic-shadow-create 236.26 (± 1.51ms) 268.18 (± 1.99ms) +31.9ms (13.5%)
ss-slot-update-component-with-slot.benchmark/benchmark-slot-ss/synthetic-shadow-slot-update-component-with-slot 24.09 (± 0.57ms) 26.67 (± 0.52ms) +2.6ms (10.7%)
ss-slot-update-container-template.benchmark/benchmark-slot-ss/synthetic-shadow-slot-update-container-template 24.31 (± 0.46ms) 26.77 (± 0.53ms) +2.5ms (10.1%)
ss-slot-update-slotted-content.benchmark/benchmark-slot-ss/synthetic-shadow-slot-update-slotted-content 181.60 (± 3.97ms) 193.48 (± 7.54ms) +11.9ms (6.5%)
table-append-1k.benchmark/benchmark-table/append/1k 244.79 (± 2.14ms) 274.30 (± 3.26ms) +29.5ms (12.1%)
table-clear-1k.benchmark/benchmark-table/clear/1k 13.68 (± 0.19ms) 16.88 (± 0.16ms) +3.2ms (23.4%)
table-create-10k.benchmark/benchmark-table/create/10k 1283.52 (± 8.73ms) 1452.17 (± 11.46ms) +168.7ms (13.1%)
table-create-1k.benchmark/benchmark-table/create/1k 145.39 (± 1.22ms) 174.65 (± 1.37ms) +29.3ms (20.1%)
table-update-10th-1k.benchmark/benchmark-table/update-10th/1k 134.41 (± 2.71ms) 149.26 (± 1.75ms) +14.9ms (11.1%)
tablecmp-append-1k.benchmark/benchmark-table-component/append/1k 354.15 (± 1.90ms) 388.29 (± 1.52ms) +34.1ms (9.6%)
tablecmp-clear-1k.benchmark/benchmark-table-component/clear/1k 6.76 (± 0.16ms) 9.88 (± 0.18ms) +3.1ms (46.2%)
tablecmp-create-10k.benchmark/benchmark-table-component/create/10k 1948.63 (± 17.98ms) 2149.02 (± 13.41ms) +200.4ms (10.3%)
tablecmp-create-1k.benchmark/benchmark-table-component/create/1k 219.51 (± 2.46ms) 250.32 (± 2.19ms) +30.8ms (14.0%)
tablecmp-update-10th-1k.benchmark/benchmark-table-component/update-10th/1k 114.69 (± 0.77ms) 128.04 (± 1.16ms) +13.4ms (11.6%)
wc-append-1k.benchmark/benchmark-table-wc/append/1k 476.75 (± 9.13ms) 510.24 (± 9.20ms) +33.5ms (7.0%)
wc-clear-1k.benchmark/benchmark-table-wc/clear/1k 22.14 (± 0.14ms) 26.82 (± 0.27ms) +4.7ms (21.1%)
wc-create-10k.benchmark/benchmark-table-wc/create/10k 3001.55 (± 23.57ms) 3233.32 (± 26.24ms) +231.8ms (7.7%)
wc-create-1k.benchmark/benchmark-table-wc/create/1k 330.84 (± 1.35ms) 369.01 (± 2.70ms) +38.2ms (11.5%)
wc-update-10th-1k.benchmark/benchmark-table-wc/update-10th/1k 115.08 (± 0.58ms) 131.38 (± 1.05ms) +16.3ms (14.2%)

@lwc/engine-server

❌ Regressions base (9e9b0f4) target (6d7cc18) trend
table-render-10k.benchmark/benchmark-table/render/10k 455.65 (± 25.40ms) 500.42 (± 11.53ms) +44.8ms (9.8%)
tablecmp-render-10k.benchmark/benchmark-table-component/render/10k 999.26 (± 76.25ms) 1154.73 (± 33.44ms) +155.5ms (15.6%)

.shadowRoot.querySelector('integration-child')
.shadowRoot.querySelector('button');
});
button.click(); // click into input
Copy link
Contributor

Choose a reason for hiding this comment

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

clicks the input or the button?

static delegatesFocus = true;

handleFocus(event) {
event.target.focus();
Copy link
Contributor

Choose a reason for hiding this comment

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

does the button (event.target) already have the focus before calling .focus()?

Copy link
Member Author

Choose a reason for hiding this comment

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

Yeah

Copy link
Contributor

Choose a reason for hiding this comment

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

what confuses me is that the button will get the focus even if we don't execute this line. but i also guess that executing this line without the fix, will make the test fail.

Copy link
Member Author

Choose a reason for hiding this comment

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

Yeah, it doesn’t make sense but we should be able to handle that!

@salesforce-best-lwc-internal
Copy link

🥳 Performance Improvement

Best has detected that there is a 6.8% performance improvement across your benchmarks.

Please click here to see more details.

Click to view significantly changed benchmarks

@lwc/engine-dom

✅ Improvements base (9e9b0f4) target (5926765) trend
ss-slot-create-container.benchmark/benchmark-slot-ss/synthetic-shadow-create 236.26 (± 1.51ms) 202.96 (± 1.12ms) -33.3ms (14.1%)
ss-slot-update-component-with-slot.benchmark/benchmark-slot-ss/synthetic-shadow-slot-update-component-with-slot 24.09 (± 0.57ms) 21.20 (± 0.92ms) -2.9ms (12.0%)
ss-slot-update-container-template.benchmark/benchmark-slot-ss/synthetic-shadow-slot-update-container-template 24.31 (± 0.46ms) 21.76 (± 0.48ms) -2.5ms (10.5%)
ss-slot-update-slotted-content.benchmark/benchmark-slot-ss/synthetic-shadow-slot-update-slotted-content 181.60 (± 3.97ms) 139.02 (± 0.84ms) -42.6ms (23.4%)
table-append-1k.benchmark/benchmark-table/append/1k 244.79 (± 2.14ms) 209.39 (± 3.28ms) -35.4ms (14.5%)
table-clear-1k.benchmark/benchmark-table/clear/1k 13.68 (± 0.19ms) 12.16 (± 0.39ms) -1.5ms (11.1%)
table-create-1k.benchmark/benchmark-table/create/1k 145.39 (± 1.22ms) 127.38 (± 0.94ms) -18.0ms (12.4%)
table-update-10th-1k.benchmark/benchmark-table/update-10th/1k 134.41 (± 2.71ms) 112.81 (± 1.42ms) -21.6ms (16.1%)
tablecmp-append-1k.benchmark/benchmark-table-component/append/1k 354.15 (± 1.90ms) 294.28 (± 2.57ms) -59.9ms (16.9%)
tablecmp-clear-1k.benchmark/benchmark-table-component/clear/1k 6.76 (± 0.16ms) 5.85 (± 0.85ms) -0.9ms (13.5%)
tablecmp-create-1k.benchmark/benchmark-table-component/create/1k 219.51 (± 2.46ms) 191.56 (± 1.32ms) -27.9ms (12.7%)
tablecmp-update-10th-1k.benchmark/benchmark-table-component/update-10th/1k 114.69 (± 0.77ms) 98.24 (± 0.94ms) -16.4ms (14.3%)
wc-append-1k.benchmark/benchmark-table-wc/append/1k 476.75 (± 9.13ms) 390.57 (± 2.07ms) -86.2ms (18.1%)
wc-clear-1k.benchmark/benchmark-table-wc/clear/1k 22.14 (± 0.14ms) 18.62 (± 0.55ms) -3.5ms (15.9%)
wc-create-10k.benchmark/benchmark-table-wc/create/10k 3001.55 (± 23.57ms) 2611.93 (± 14.32ms) -389.6ms (13.0%)
wc-create-1k.benchmark/benchmark-table-wc/create/1k 330.84 (± 1.35ms) 293.79 (± 4.56ms) -37.1ms (11.2%)
wc-update-10th-1k.benchmark/benchmark-table-wc/update-10th/1k 115.08 (± 0.58ms) 100.96 (± 1.09ms) -14.1ms (12.3%)

@lwc/engine-server

✅ Improvements base (9e9b0f4) target (5926765) trend
table-render-10k.benchmark/benchmark-table/render/10k 455.65 (± 25.40ms) 382.20 (± 13.19ms) -73.5ms (16.1%)
tablecmp-render-10k.benchmark/benchmark-table-component/render/10k 999.26 (± 76.25ms) 900.12 (± 20.48ms) -99.1ms (9.9%)

@ekashida ekashida merged commit a29962b into master Nov 9, 2020
@ekashida ekashida deleted the ekashida/focus-patched-fix branch November 9, 2020 23:39
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.

None yet

2 participants