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

feat(what-input): Limit keyboard detection in inputs #25087

Merged
merged 7 commits into from
Oct 24, 2022

Conversation

jurokapsiar
Copy link
Contributor

@jurokapsiar jurokapsiar commented Oct 5, 2022

Current Behavior

what-input is listening to keyboard, mouse and touch events and switches input mode. This change is stored to body element using data-what-input attribute. Fluent generates classes for :focus-visible pseudo selector that get activated when keyboard mode is used. This however causes a large style recalc.

New Behavior

Keyboard detection is ignored if user is in an input field and the key is not tab or F6.
Input fields are by design designed in a way where they do not need specific keyboard focused styles. We only need to check if the mode changed as user navigates outside of the input.

Related Issue(s)

Fixes #

@codesandbox-ci
Copy link

codesandbox-ci bot commented Oct 5, 2022

This pull request is automatically built and testable in CodeSandbox.

To see build info of the built libraries, click here or the icon next to each commit SHA.

Latest deployment of this branch, based on commit ee359b4:

Sandbox Source
@fluentui/react 8 starter Configuration
@fluentui/react-components 9 starter Configuration

@size-auditor
Copy link

size-auditor bot commented Oct 5, 2022

Asset size changes

Project Bundle Baseline Size New Size Difference
office-ui-fabric-react fluentui-react-northstar-Dropdown 203.972 kB 204.246 kB ExceedsBaseline     274 bytes
office-ui-fabric-react fluentui-react-northstar-Provider 93.611 kB 93.79 kB ExceedsBaseline     179 bytes
office-ui-fabric-react fluentui-react-northstar-Chat 160.192 kB 160.371 kB ExceedsBaseline     179 bytes
office-ui-fabric-react fluentui-react-northstar-SplitButton 185.206 kB 185.385 kB ExceedsBaseline     179 bytes
office-ui-fabric-react fluentui-react-northstar-Popup 138.974 kB 139.153 kB ExceedsBaseline     179 bytes
office-ui-fabric-react fluentui-react-northstar-MenuButton 168.943 kB 169.122 kB ExceedsBaseline     179 bytes
office-ui-fabric-react fluentui-react-northstar-Menu 132.979 kB 133.158 kB ExceedsBaseline     179 bytes
office-ui-fabric-react fluentui-react-northstar-Toolbar 181.47 kB 181.649 kB ExceedsBaseline     179 bytes
office-ui-fabric-react fluentui-react-northstar-Tooltip 112.558 kB 112.737 kB ExceedsBaseline     179 bytes
office-ui-fabric-react fluentui-react-northstar-Datepicker 194.084 kB 194.263 kB ExceedsBaseline     179 bytes
office-ui-fabric-react fluentui-react-northstar-Slider 87.526 kB 87.705 kB ExceedsBaseline     179 bytes
office-ui-fabric-react fluentui-react-northstar-Carousel 109.878 kB 110.057 kB ExceedsBaseline     179 bytes

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

Baseline commit: a64b8d57499088f012de1cb0d211bd243966673c (build)

@fabricteam
Copy link
Collaborator

fabricteam commented Oct 5, 2022

📊 Bundle size report

🤖 This report was generated against a64b8d57499088f012de1cb0d211bd243966673c

@fabricteam
Copy link
Collaborator

fabricteam commented Oct 5, 2022

Perf Analysis (@fluentui/react-northstar)

Perf tests with no regressions
Scenario Current PR Ticks Baseline Ticks Ratio
ButtonSlotsPerf.default 481 445 1.08:1
ChatDuplicateMessagesPerf.default 231 214 1.08:1
AttachmentMinimalPerf.default 126 119 1.06:1
FlexMinimalPerf.default 240 227 1.06:1
LayoutMinimalPerf.default 307 289 1.06:1
AnimationMinimalPerf.default 453 433 1.05:1
SegmentMinimalPerf.default 287 274 1.05:1
ButtonMinimalPerf.default 136 131 1.04:1
ImageMinimalPerf.default 333 319 1.04:1
InputMinimalPerf.default 987 951 1.04:1
LoaderMinimalPerf.default 563 541 1.04:1
PortalMinimalPerf.default 139 134 1.04:1
TextMinimalPerf.default 286 275 1.04:1
HeaderMinimalPerf.default 296 286 1.03:1
LabelMinimalPerf.default 312 304 1.03:1
ProviderMinimalPerf.default 336 327 1.03:1
ReactionMinimalPerf.default 304 294 1.03:1
TableMinimalPerf.default 324 316 1.03:1
CarouselMinimalPerf.default 385 377 1.02:1
DialogMinimalPerf.default 641 629 1.02:1
ItemLayoutMinimalPerf.default 969 951 1.02:1
PopupMinimalPerf.default 537 528 1.02:1
ProviderMergeThemesPerf.default 1089 1071 1.02:1
RadioGroupMinimalPerf.default 366 359 1.02:1
TextAreaMinimalPerf.default 390 382 1.02:1
AvatarMinimalPerf.default 151 150 1.01:1
ChatMinimalPerf.default 594 587 1.01:1
DividerMinimalPerf.default 294 291 1.01:1
MenuMinimalPerf.default 701 691 1.01:1
RosterPerf.default 1775 1757 1.01:1
RefMinimalPerf.default 180 178 1.01:1
SliderMinimalPerf.default 1336 1323 1.01:1
SplitButtonMinimalPerf.default 3647 3613 1.01:1
StatusMinimalPerf.default 556 552 1.01:1
TreeWith60ListItems.default 136 135 1.01:1
ChatWithPopoverPerf.default 308 307 1:1
EmbedMinimalPerf.default 3073 3065 1:1
FormMinimalPerf.default 315 315 1:1
SkeletonMinimalPerf.default 282 281 1:1
TooltipMinimalPerf.default 1925 1931 1:1
ButtonOverridesMissPerf.default 1082 1095 0.99:1
CardMinimalPerf.default 426 430 0.99:1
DropdownMinimalPerf.default 2210 2241 0.99:1
GridMinimalPerf.default 275 279 0.99:1
HeaderSlotsPerf.default 627 636 0.99:1
ListMinimalPerf.default 408 414 0.99:1
ToolbarMinimalPerf.default 775 781 0.99:1
TreeMinimalPerf.default 676 682 0.99:1
AttachmentSlotsPerf.default 914 928 0.98:1
CheckboxMinimalPerf.default 1716 1759 0.98:1
DropdownManyItemsPerf.default 551 560 0.98:1
MenuButtonMinimalPerf.default 1394 1429 0.98:1
VideoMinimalPerf.default 604 618 0.98:1
AccordionMinimalPerf.default 119 123 0.97:1
AlertMinimalPerf.default 210 216 0.97:1
DatepickerMinimalPerf.default 4665 4792 0.97:1
ListNestedPerf.default 460 472 0.97:1
ListCommonPerf.default 529 551 0.96:1
TableManyItemsPerf.default 1530 1586 0.96:1
CustomToolbarPrototype.default 2212 2322 0.95:1
BoxMinimalPerf.default 256 273 0.94:1
ListWith60ListItems.default 512 547 0.94:1
IconMinimalPerf.default 514 551 0.93:1

@ling1726 ling1726 closed this Oct 19, 2022
@ling1726 ling1726 reopened this Oct 19, 2022
Copy link
Member

@ling1726 ling1726 left a comment

Choose a reason for hiding this comment

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

Please add a PR desecription, about the motivation of this PR

@jurokapsiar jurokapsiar reopened this Oct 19, 2022
@jurokapsiar jurokapsiar reopened this Oct 21, 2022
@jurokapsiar jurokapsiar reopened this Oct 24, 2022
@jurokapsiar jurokapsiar merged commit d6837b7 into microsoft:master Oct 24, 2022
@jurokapsiar jurokapsiar deleted the what-input-input-limit branch October 24, 2022 11:58
marcosmoura added a commit to marcosmoura/fluentui that referenced this pull request Oct 25, 2022
* master: (106 commits)
  fix: PopoverTriggerChildProps should be exported (microsoft#25159)
  feat: replace ToolbarRadio implementation by usage of toggle button as Radio (microsoft#25343)
  docs: improve Toolbar docs examples (microsoft#25269)
  feat(tools): add unstable API setup updates (microsoft#25355)
  applying package updates
  Fix wrong narration when legend selected (microsoft#24903)
  applying package updates
  chore(react-persona): Update beachball settings and change file's type (microsoft#25363)
  chore: Refactor Field VR tests to have individual tests per component (microsoft#25263)
  chore(react-persona, react-components, vr-tests-v9): Reverting react-persona's version to beta   (microsoft#25357)
  Publishing migration package (microsoft#25354)
  fix: Detailslist is still tabbable when isHeaderVisible=false (microsoft#25342)
  fix: list even/odd off-by-one issue (microsoft#25358)
  feat: add Dropdown a11y spec (microsoft#24917)
  spinbutton: update internal padding for small size (microsoft#25286)
  chore(global-context): migrate to new package structure (microsoft#25341)
  feat: Add validationState to Progress, to make the bar red or green (microsoft#25253)
  feat: Add accessibility scenarios for Fluent UI v9 components #3 (microsoft#23334)
  feat(Dropdown): Freeform search should be case insensitive (microsoft#24879)
  feat(what-input): Limit keyboard detection in inputs (microsoft#25087)
  ...
NotWoods pushed a commit to NotWoods/fluentui that referenced this pull request Nov 18, 2022
* feat(what-input): Limit keyboard detection in inputs

* show focus indicator in dropdown scenarios

* fix test

* set what-input to mouse initially

* naming, docs and changelog

* Update packages/fluentui/react-northstar/src/utils/whatInput.ts

Co-authored-by: ling1726 <[email protected]>

Co-authored-by: Juraj Kapsiar <[email protected]>
Co-authored-by: ling1726 <[email protected]>
@khmakoto khmakoto added Fluent UI react-northstar (v0) Work related to Fluent UI V0 and removed Fluent UI react-northstar labels Nov 30, 2022
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Fluent UI react-northstar (v0) Work related to Fluent UI V0
Projects
None yet
Development

Successfully merging this pull request may close these issues.

6 participants