Dropdown: do not select first option automatically unless it's selected using keyboard navigation by xugao · Pull Request #10755 · microsoft/fluentui

xugao · 2019-10-09T05:08:03Z

Pull request checklist

Addresses an existing issue: Fixes Dropdown with placeholder - first option automatically selected on focus. #5473 , Fixes Dropdown calls onChange before callout is dismissed #10713
Include a change request file using $ yarn change

Description of changes

In case of keyboard navigation to dropdown, per aria guidance, dropdown should select first option by default on focus. But we do not want to do this if user clicked and opened the dropdown.
Before:

After:

Microsoft Reviewers: Open in CodeFlow

size-auditor · 2019-10-09T05:23:53Z

Asset size changes

Project	Bundle	Baseline Size	New Size	Difference
office-ui-fabric-react	Dropdown	212.376 kB	212.566 kB	190 bytes

Over Tolerance (1024 B) Over Baseline Below Baseline New Removed 1 kB = 1000 B

Baseline commit: 25b3c4b429e592c8d61208f11e808c4d1cbc82a7 (build)

msft-github-bot · 2019-10-09T05:39:19Z

Component Perf Analysis

No significant results to display.

All results

Scenario	Master Ticks	PR Ticks
BaseButton	954	892
BaseButton (experiments)	1162	1188
DefaultButton	1187	1165
DefaultButton (experiments)	2196	2290
DetailsRow	3617	3733
DetailsRow (fast icons)	3708	3676
DetailsRow without styles	3417	3420
DocumentCardTitle with truncation	34713	34944
MenuButton	1511	1494
MenuButton (experiments)	3977	3950
PrimaryButton	1372	1386
PrimaryButton (experiments)	2308	2435
SplitButton	3229	3280
SplitButton (experiments)	8072	7929
Stack	526	533
Stack with Intrinsic children	1289	1280
Stack with Text children	4793	4855
Text	422	426
Toggle	1012	968
Toggle (experiments)	2691	2584
button	71	67

dzearing · 2019-10-09T14:09:56Z

Looks like screener caught a regression; take a look at the failed screener result and check the problem state. :)

xugao · 2019-10-09T15:54:08Z

@dzearing

Looks like screener caught a regression; take a look at the failed screener result and check the problem state. :)

The changes look expected. according to the wiki, i need admin to approve these screener test failures. Could you help double check the changes and approve if look good? :)

P.S. the way github lets you reply a comment feels unintuitive to me . let me know if im doing this wrong :)

msft-github-bot · 2019-10-09T16:57:40Z

Hello @cliffkoh!

Because this pull request has the AutoMerge label, I will be glad to assist with helping to merge this pull request once all check-in policies pass.

p.s. you can customize the way I help with merging this pull request, such as holding this pull request until a specific person approves. Simply @mention me (`@msft-github-bot`) and give me an instruction to get started! Learn more here.

khmakoto

Made one small suggestion but otherwise LGTM 👍

msft-github-bot · 2019-10-10T12:32:34Z

🎉office-ui-fabric-react@v7.48.0 has been released which incorporates this pull request.:tada:

Handy links:

…ed using keyboard navigation (microsoft#10755)* do not select first option by default for non-aria case* update snapshots* code cleanup* yarn change* add Aria doc link inline* resolve comment* simplify to use one class vars rather than two* resolve comments

unless it's selected using keyboard navigation (microsoft#10755) * do not select first option by default for non-aria case * update snapshots * code cleanup * yarn change * add Aria doc link inline * simplify to use one class vars rather than two

unless it's selected using keyboard navigation (#10755) * do not select first option by default for non-aria case * update snapshots * code cleanup * yarn change * add Aria doc link inline * simplify to use one class vars rather than two

mbest · 2020-03-26T21:44:44Z

What is the "aria guidance" referenced above? It seems quite strange that tabbing through an item should change it.

xugao requested review from cliffkoh, joschect and khmakoto October 9, 2019 05:08

msft-github-bot added the Component: Dropdown label Oct 9, 2019

msft-github-bot assigned khmakoto Oct 9, 2019

xugao changed the title ~~Dropdown: do not select first option automatically unless it's selected using keyboard navigation per aria~~ Dropdown: do not select first option automatically unless it's selected using keyboard navigation Oct 9, 2019

cliffkoh requested a review from dzearing October 9, 2019 05:13

cliffkoh approved these changes Oct 9, 2019

View reviewed changes

cliffkoh mentioned this pull request Oct 9, 2019

Dropdown with placeholder - first option automatically selected on focus. #5473

Closed

cliffkoh added the AutoMerge label Oct 9, 2019

khmakoto approved these changes Oct 9, 2019

View reviewed changes

Comment thread packages/office-ui-fabric-react/src/components/Dropdown/Dropdown.base.tsx Outdated

xugao added 7 commits October 9, 2019 14:01

do not select first option by default for non-aria case

324996f

update snapshots

c101b5f

code cleanup

ab84891

yarn change

f41c771

add Aria doc link inline

518fd5e

resolve comment

fdef13e

simplify to use one class vars rather than two

6c974af

xugao force-pushed the dropdown-fix branch from 459c2c7 to 6c974af Compare October 9, 2019 21:25

joschect reviewed Oct 9, 2019

View reviewed changes

Comment thread packages/office-ui-fabric-react/src/components/Dropdown/Dropdown.base.tsx

resolve comments

100d6ab

xugao requested a review from joschect October 9, 2019 22:52

joschect approved these changes Oct 9, 2019

View reviewed changes

msft-github-bot merged commit 31396ed into microsoft:master Oct 9, 2019

khmakoto reviewed Oct 9, 2019

View reviewed changes

Comment thread packages/office-ui-fabric-react/src/components/Dropdown/Dropdown.base.tsx

Comment thread packages/office-ui-fabric-react/src/components/Dropdown/Dropdown.base.tsx

Comment thread packages/office-ui-fabric-react/src/components/Dropdown/Dropdown.base.tsx

msft-github-bot mentioned this pull request Oct 10, 2019

Dropdown calls onChange before callout is dismissed #10713

Closed

pKalaga mentioned this pull request Oct 16, 2019

Dropdown: do not select first option automatically unless using keyboard navigation (backport of #10755) #10866

Merged

2 tasks

xugao deleted the dropdown-fix branch October 17, 2020 01:34

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Dropdown: do not select first option automatically unless it's selected using keyboard navigation#10755

Dropdown: do not select first option automatically unless it's selected using keyboard navigation#10755
msft-github-bot merged 8 commits into
microsoft:masterfrom
xugao:dropdown-fix

xugao commented Oct 9, 2019 •

edited by cliffkoh

Loading

Uh oh!

size-auditor Bot commented Oct 9, 2019 •

edited

Loading

Uh oh!

msft-github-bot commented Oct 9, 2019 •

edited

Loading

Uh oh!

dzearing commented Oct 9, 2019

Uh oh!

xugao commented Oct 9, 2019 •

edited

Loading

Uh oh!

msft-github-bot commented Oct 9, 2019

Uh oh!

khmakoto left a comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

msft-github-bot commented Oct 10, 2019

Uh oh!

mbest commented Mar 26, 2020

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

7 participants

Uh oh!

Conversation

xugao commented Oct 9, 2019 • edited by cliffkoh Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Pull request checklist

Description of changes

Microsoft Reviewers: Open in CodeFlow

Uh oh!

size-auditor Bot commented Oct 9, 2019 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Asset size changes

Uh oh!

msft-github-bot commented Oct 9, 2019 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Component Perf Analysis

Uh oh!

dzearing commented Oct 9, 2019

Uh oh!

xugao commented Oct 9, 2019 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

msft-github-bot commented Oct 9, 2019

p.s. you can customize the way I help with merging this pull request, such as holding this pull request until a specific person approves. Simply @mention me (@msft-github-bot) and give me an instruction to get started! Learn more here.

Uh oh!

khmakoto left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

msft-github-bot commented Oct 10, 2019

Uh oh!

mbest commented Mar 26, 2020

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

7 participants

xugao commented Oct 9, 2019 •

edited by cliffkoh

Loading

size-auditor Bot commented Oct 9, 2019 •

edited

Loading

msft-github-bot commented Oct 9, 2019 •

edited

Loading

xugao commented Oct 9, 2019 •

edited

Loading

p.s. you can customize the way I help with merging this pull request, such as holding this pull request until a specific person approves. Simply @mention me (`@msft-github-bot`) and give me an instruction to get started! Learn more here.