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

Picker/PeoplePicker: Fix issue where default value wouldn't trigger suggestions #13480

Merged
merged 7 commits into from
Jun 5, 2020

Conversation

joschect
Copy link
Contributor

@joschect joschect commented Jun 4, 2020

Pull request checklist

Description of changes

Original Behavior: If the picker's input contained some default value via inputProps: {defaultVisibleValue: 'foo'}} when the picker received focus, it would not show suggestions.

The fix: The picker now attempts to callback to get suggestions if it currently contains a text value and does not have any current suggestions.

Focus areas to test

(optional)

* This should be called when the user does something other than use text entry to trigger suggestions.
*
*/
private _userTriggeredSuggestions = () => {
Copy link
Contributor

Choose a reason for hiding this comment

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

👍 for moving this. Also a valuable refactor target in the future as there are tons of paths through these branches.


this.updateSuggestionsList(suggestions);

this.setState({
Copy link
Contributor

Choose a reason for hiding this comment

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

This seems to be new logic and not just a refactor. Intentional?

Copy link
Contributor Author

Choose a reason for hiding this comment

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

Correct! This fixes an issue where a default value in the picker wouldn't have triggered a resolve suggestions.

@msft-github-bot
Copy link
Contributor

msft-github-bot commented Jun 4, 2020

Perf Analysis

No significant results to display.

All results

Scenario Master Ticks PR Ticks Iterations Status
BaseButton 903 887 5000
ButtonNext 383 395 5000
Checkbox 1699 1678 5000
CheckboxBase 1387 1411 5000
CheckboxNext 1773 1633 5000
ChoiceGroup 5398 5345 5000
ComboBox 938 973 1000
CommandBar 8217 8294 1000
ContextualMenu 16263 15999 1000
DefaultButton 1150 1155 5000
DetailsRow 3626 3765 5000
DetailsRow (fast icons) 3702 3740 5000
DetailsRow without styles 3433 3554 5000
Dialog 1579 1588 1000
DocumentCardTitle with truncation 1963 1994 1000
Dropdown 2620 2661 5000
FocusZone 1737 1805 5000
IconButton 1854 1866 5000
Label 341 359 5000
Link 465 488 5000
LinkNext 502 503 5000
MenuButton 1506 1543 5000
Nav 3397 3400 1000
Panel 1516 1519 1000
Persona 892 892 1000
Pivot 1405 1524 1000
PivotNext 1417 1416 1000
PrimaryButton 1318 1290 5000
SearchBox 1371 1365 5000
Slider 1579 1583 5000
SliderNext 2065 2059 5000
Spinner 400 427 5000
SplitButton 3324 3345 5000
Stack 525 517 5000
Stack with Intrinsic children 1975 1980 5000
Stack with Text children 5417 5313 5000
TagPicker 2925 2983 5000
Text 434 438 5000
TextField 1482 1524 5000
ThemeProvider 2800 2908 5000
Toggle 1010 978 5000
ToggleNext 950 941 5000
button 79 94 5000

Perf Analysis (Fluent)

Perf comparison
Status Scenario Fluent TPI Fabric TPI Ratio Iterations Ticks
🎯 Avatar.Fluent 0.49 0.51 0.96:1 2000 979
🦄 Button.Fluent 0.12 0.21 0.57:1 5000 584
🔧 Checkbox.Fluent 0.66 0.36 1.83:1 1000 655
🎯 Dialog.Fluent 0.16 0.22 0.73:1 5000 780
🔧 Dropdown.Fluent 3.39 0.48 7.06:1 1000 3387
🔧 Icon.Fluent 0.15 0.05 3:1 5000 740
🦄 Image.Fluent 0.08 0.12 0.67:1 5000 418
🔧 Slider.Fluent 1.63 0.36 4.53:1 1000 1633
🔧 Text.Fluent 0.08 0.02 4:1 5000 386
🦄 Tooltip.Fluent 0.1 20.09 0:1 5000 501

🔧 Needs work     🎯 On target     🦄 Amazing

Perf tests with no regressions
Scenario Current PR Ticks Baseline Ticks Ratio
ButtonMinimalPerf.default 201 182 1.1:1
HeaderMinimalPerf.default 385 350 1.1:1
LayoutMinimalPerf.default 447 414 1.08:1
Text.Fluent 386 358 1.08:1
CardMinimalPerf.default 624 584 1.07:1
DividerMinimalPerf.default 381 355 1.07:1
FlexMinimalPerf.default 323 302 1.07:1
FormMinimalPerf.default 448 419 1.07:1
ListCommonPerf.default 1038 972 1.07:1
AnimationMinimalPerf.default 702 661 1.06:1
BoxMinimalPerf.default 372 351 1.06:1
ButtonSlotsPerf.default 645 610 1.06:1
ChatWithPopoverPerf.default 516 486 1.06:1
ImageMinimalPerf.default 401 380 1.06:1
TreeMinimalPerf.default 967 912 1.06:1
AlertMinimalPerf.default 333 318 1.05:1
DropdownManyItemsPerf.default 1446 1375 1.05:1
CarouselMinimalPerf.default 502 488 1.03:1
LoaderMinimalPerf.default 756 734 1.03:1
MenuMinimalPerf.default 911 881 1.03:1
TreeWith60ListItems.default 227 221 1.03:1
Checkbox.Fluent 655 636 1.03:1
Dialog.Fluent 780 755 1.03:1
AvatarMinimalPerf.default 513 505 1.02:1
ChatDuplicateMessagesPerf.default 461 452 1.02:1
HierarchicalTreeMinimalPerf.default 447 440 1.02:1
ProviderMergeThemesPerf.default 2202 2154 1.02:1
TableMinimalPerf.default 431 423 1.02:1
Slider.Fluent 1633 1606 1.02:1
AccordionMinimalPerf.default 156 154 1.01:1
AttachmentSlotsPerf.default 1180 1167 1.01:1
DialogMinimalPerf.default 793 782 1.01:1
ListNestedPerf.default 924 917 1.01:1
RefMinimalPerf.default 211 209 1.01:1
SplitButtonMinimalPerf.default 3625 3583 1.01:1
StatusMinimalPerf.default 732 727 1.01:1
IconMinimalPerf.default 732 727 1.01:1
CustomToolbarPrototype.default 4066 4026 1.01:1
ToolbarMinimalPerf.default 981 967 1.01:1
Dropdown.Fluent 3387 3366 1.01:1
Image.Fluent 418 412 1.01:1
DropdownMinimalPerf.default 3354 3342 1:1
HeaderSlotsPerf.default 836 840 1:1
MenuButtonMinimalPerf.default 1303 1301 1:1
RadioGroupMinimalPerf.default 446 445 1:1
TableManyItemsPerf.default 2375 2386 1:1
AttachmentMinimalPerf.default 162 163 0.99:1
ChatMinimalPerf.default 640 648 0.99:1
CheckboxMinimalPerf.default 2902 2930 0.99:1
EmbedMinimalPerf.default 2003 2027 0.99:1
ItemLayoutMinimalPerf.default 1396 1406 0.99:1
ListMinimalPerf.default 500 504 0.99:1
PortalMinimalPerf.default 116 117 0.99:1
ProviderMinimalPerf.default 891 898 0.99:1
ReactionMinimalPerf.default 402 405 0.99:1
SliderMinimalPerf.default 1616 1627 0.99:1
TextMinimalPerf.default 383 386 0.99:1
TooltipMinimalPerf.default 752 762 0.99:1
Tooltip.Fluent 501 507 0.99:1
GridMinimalPerf.default 764 776 0.98:1
ListWith60ListItems.default 1141 1168 0.98:1
VideoMinimalPerf.default 656 667 0.98:1
Avatar.Fluent 979 1000 0.98:1
Button.Fluent 584 594 0.98:1
InputMinimalPerf.default 1043 1080 0.97:1
PopupMinimalPerf.default 260 272 0.96:1
SegmentMinimalPerf.default 359 373 0.96:1
TextAreaMinimalPerf.default 507 528 0.96:1
LabelMinimalPerf.default 441 462 0.95:1
Icon.Fluent 740 777 0.95:1

@size-auditor
Copy link

size-auditor bot commented Jun 5, 2020

Asset size changes

Project Bundle Baseline Size New Size Difference
office-ui-fabric-react office-ui-fabric-react-Pickers 273.045 kB 272.588 kB BelowBaseline     -457 bytes
office-ui-fabric-react fluentui-react-next-Pickers 273.045 kB 272.588 kB BelowBaseline     -457 bytes

ExceedsTolerance Over Tolerance (1024 B) ExceedsBaseline Over Baseline BelowBaseline Below Baseline New New Deleted  Removed 1 kB = 1000 B

Baseline commit: 24e7759686ef88224d23ba35ac0e3add895357b6 (build)

@dzearing
Copy link
Member

dzearing commented Jun 5, 2020

can you fill in a description of what the behavior was before/after? how do we test?

Comment on lines 594 to 596
if (this.props.inputProps !== undefined && this.props.inputProps.onClick !== undefined) {
this.props.inputProps.onClick(ev);
}
Copy link
Member

Choose a reason for hiding this comment

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

Suggested change
if (this.props.inputProps !== undefined && this.props.inputProps.onClick !== undefined) {
this.props.inputProps.onClick(ev);
}
this.props.inputProps?.onClick?(ev);

I think that would work :)

Comment on lines 551 to 553
if (this.props.inputProps && this.props.inputProps.onFocus) {
this.props.inputProps.onFocus(ev as React.FocusEvent<HTMLInputElement>);
}
Copy link
Member

Choose a reason for hiding this comment

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

Suggested change
if (this.props.inputProps && this.props.inputProps.onFocus) {
this.props.inputProps.onFocus(ev as React.FocusEvent<HTMLInputElement>);
}
this.props.inputProps?.onFocus?(ev as React.FocusEvent<HTMLInputElement>);

Copy link
Contributor Author

Choose a reason for hiding this comment

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

Did we get these fixed? I think it was an issue with babel if I remember correctly.

…ker.test.tsx

Co-authored-by: Makoto Morimoto <Humberto.Morimoto@microsoft.com>
@msft-github-bot
Copy link
Contributor

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

Handy links:

miroslavstastny pushed a commit to levithomason/fluentui that referenced this pull request Jun 8, 2020
…uggestions (microsoft#13480)

* Minor picker refactor, fix an issue where default value wouldn't trigger resolving value

* Change files

* update api

* fix comments

* remove unneeded test

* fix minor issue

* Update packages/office-ui-fabric-react/src/components/pickers/BasePicker.test.tsx

Co-authored-by: Makoto Morimoto <Humberto.Morimoto@microsoft.com>

Co-authored-by: Makoto Morimoto <Humberto.Morimoto@microsoft.com>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

Successfully merging this pull request may close these issues.

PeoplePicker: Not resolving suggestions on initial run when seeded with suggestion text
6 participants