Skip to content

fix: Fixing Slider's programmatic focus#25869

Merged
khmakoto merged 5 commits intomicrosoft:masterfrom
khmakoto:sliderFocus
Dec 2, 2022
Merged

fix: Fixing Slider's programmatic focus#25869
khmakoto merged 5 commits intomicrosoft:masterfrom
khmakoto:sliderFocus

Conversation

@khmakoto
Copy link
Member

@khmakoto khmakoto commented Dec 1, 2022

Previous Behavior

Using programmatic focus based on the componentRef of a Slider would not work correctly, trying and failing to focus on the non-interactive thumb.

Before

New Behavior

Using programmatic focus based on the componentRef of a Slider now works correctly, focusing on the interactive slider-box as expected.

After

Related Issue(s)

@khmakoto khmakoto added Component: Slider Fluent UI react (v8) Issues about @fluentui/react (v8) labels Dec 1, 2022
@khmakoto khmakoto self-assigned this Dec 1, 2022
@khmakoto khmakoto requested review from a team as code owners December 1, 2022 23:13
@github-actions github-actions bot added this to the October Project Cycle Q4 2022 milestone Dec 1, 2022
@fabricteam
Copy link
Collaborator

fabricteam commented Dec 1, 2022 •
edited
Loading

📊 Bundle size report

🤖 This report was generated against 0e6c43dfe0b2f3568d6a9b574cd073cdc9f71608

@fabricteam
Copy link
Collaborator

fabricteam commented Dec 1, 2022 •
edited
Loading

🕵 fluentuiv8 Open the Visual Regressions report to inspect the 3 screenshots

✅ There was 0 screenshots added, 0 screenshots removed, 1034 screenshots unchanged, 0 screenshots with different dimensions and 3 screenshots with visible difference.

unknown 3 screenshots
Image Name Diff(in Pixels) Image Type
TagPicker.Root.chromium.png 145 Changed
TagPicker.Selected - RTL.chromium.png 145 Changed
TagPicker.Selected.chromium.png 145 Changed

@khmakoto khmakoto enabled auto-merge (squash) December 1, 2022 23:37
@fabricteam
Copy link
Collaborator

fabricteam commented Dec 1, 2022 •
edited
Loading

Perf Analysis (@fluentui/react)

Scenario Render type Master Ticks PR Ticks Iterations Status
GroupedList mount 1836 2070 2 Possible regression
All results

Scenario Render type Master Ticks PR Ticks Iterations Status
BaseButton mount 1207 1185 5000
Breadcrumb mount 2827 2839 1000
Checkbox mount 2656 2669 5000
CheckboxBase mount 2373 2367 5000
ChoiceGroup mount 4316 4332 5000
ComboBox mount 1146 1199 1000
CommandBar mount 9278 9303 1000
ContextualMenu mount 10111 10291 1000
DefaultButton mount 1371 1360 5000
DetailsRow mount 3427 3362 5000
DetailsRowFast mount 3393 3364 5000
DetailsRowNoStyles mount 3241 3249 5000
Dialog mount 3001 2992 1000
DocumentCardTitle mount 586 587 1000
Dropdown mount 3174 3140 5000
FocusTrapZone mount 1937 1963 5000
FocusZone mount 1935 1918 5000
GroupedList mount 1836 2070 2 Possible regression
GroupedList virtual-rerender 1105 1104 2
GroupedList virtual-rerender-with-unmount 1626 1613 2
GroupedListV2 mount 578 564 2
GroupedListV2 virtual-rerender 535 554 2
GroupedListV2 virtual-rerender-with-unmount 568 577 2
IconButton mount 1786 1787 5000
Label mount 758 756 5000
Layer mount 4155 4184 5000
Link mount 863 847 5000
MenuButton mount 1635 1619 5000
MessageBar mount 2378 2330 5000
Nav mount 3038 3095 1000
OverflowSet mount 1429 1399 5000
Panel mount 2487 2472 1000
Persona mount 1283 1286 1000
Pivot mount 1533 1512 1000
PrimaryButton mount 1507 1504 5000
Rating mount 7018 6989 5000
SearchBox mount 1500 1491 5000
Shimmer mount 2974 2938 5000
Slider mount 2125 2102 5000
SpinButton mount 4286 4266 5000
Spinner mount 826 835 5000
SplitButton mount 2811 2809 5000
Stack mount 866 871 5000
StackWithIntrinsicChildren mount 2340 2335 5000
StackWithTextChildren mount 5020 5084 5000
SwatchColorPicker mount 9520 9459 5000
TagPicker mount 2371 2341 5000
TeachingBubble mount 78839 76364 5000
Text mount 823 816 5000
TextField mount 1569 1563 5000
ThemeProvider mount 1432 1455 5000
ThemeProvider virtual-rerender 1125 1147 5000
ThemeProvider virtual-rerender-with-unmount 2006 2017 5000
Toggle mount 1137 1145 5000
buttonNative mount 540 530 5000

@size-auditor
Copy link

size-auditor bot commented Dec 2, 2022

Asset size changes

Project Bundle Baseline Size New Size Difference
office-ui-fabric-react fluentui-react-Slider 54.053 kB 54.09 kB ExceedsBaseline     37 bytes

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

Baseline commit: 0e6c43dfe0b2f3568d6a9b574cd073cdc9f71608 (build)

@codesandbox-ci
Copy link

codesandbox-ci bot commented Dec 2, 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 4bfe44a:

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

@khmakoto khmakoto merged commit 83b69f2 into microsoft:master Dec 2, 2022
@khmakoto khmakoto deleted the sliderFocus branch December 2, 2022 00:31
marcosmoura added a commit to marcosmoura/fluentui that referenced this pull request Dec 2, 2022
@marcosmoura
Merge branch 'master' into marcosmoura/fix/card-a11y
4fb79b9 
* master:
  fix: Pressed and Hover states for toolbar buttons (microsoft#25835)
  feat: add large size for toolbar (microsoft#25830)
  applying package updates
  adding perf test for Persona (microsoft#25863)
  fix: Fixing Slider's programmatic focus (microsoft#25869)
  chore(v0 docs): Add storybook stories that reference docsite examples for 1JS VR tool migration (microsoft#25663)
  fix: Respecting user-provided ids in ComboBox options (microsoft#25867)
  refactor(scripts): more domain boundaries encapsulation (microsoft#25851)
  docs: add documentation about how to migrate V0 createSvgIcon (microsoft#25828)
  support cross story linking and create example in Menu story (microsoft#25850)
Hotell pushed a commit to Hotell/fluentui that referenced this pull request Feb 9, 2023
@khmakoto @Hotell
fix: Fixing Slider's programmatic focus (microsoft#25869)
63d2377 
* fix: Fixing Slider's programmatic focus.

* Adding change file.

* Removing console.log.

* Fixing type error.

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

Reviewers

@spmonahan spmonahan spmonahan approved these changes

Assignees

@khmakoto khmakoto

Labels

Component: Slider Fluent UI react (v8) Issues about @fluentui/react (v8)

Projects

None yet

Milestone

October Project Cycle Q4 2022

Development

Successfully merging this pull request may close these issues.

[Bug]: Slider does not receive programmatic .focus()

3 participants

@khmakoto @fabricteam @spmonahan