fix(react-combobox): Remove _getAriaActiveDescendantValue, compute aria-activedescendantvalue in state, and update currentPendingValue when the options change #26574

sopranopillow · 2023-02-01T01:46:28Z

Previous Behavior

When the options of a combobox are filtered, _getAriaActiveDescendantValue will break the runtime since the currentPendingValueValidIndex is not updated to the latest options.

New Behavior

_getAriaActiveDescendantValue now checks if the currentPendingValueValidIndex is not out of bounds and if the selected value is correct. If that's not the case, the value is updated to match the latest options.

Related Issue(s)

Fixes [Bug]: Crash in Combobox when allowFreeform true and options are changed #25932

size-auditor · 2023-02-01T01:57:56Z

Asset size changes

Project	Bundle	Baseline Size	New Size	Difference
office-ui-fabric-react	fluentui-react-TimePicker	227.009 kB	227.323 kB	314 bytes
office-ui-fabric-react	fluentui-react-ComboBox	238.014 kB	238.327 kB	313 bytes

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

Baseline commit: e7adfeaa37370b9aebe79d3a0168d0457822b139 (build)

fabricteam · 2023-02-01T01:59:48Z

📊 Bundle size report

_{🤖 This report was generated against e7adfeaa37370b9aebe79d3a0168d0457822b139}

codesandbox-ci · 2023-02-01T02:01:18Z

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 54f7aa5:

Sandbox	Source
@fluentui/react 8 starter	Configuration
@fluentui/react-components 9 starter	Configuration
react fiddle (forked)	Issue #25932

fabricteam · 2023-02-01T02:17:33Z

Perf Analysis (`@fluentui/react`)

No significant results to display.

All results

Scenario	Render type	Master Ticks	PR Ticks	Iterations
BaseButton	mount	1172	1179	5000
Breadcrumb	mount	2924	2945	1000
Checkbox	mount	2641	2614	5000
CheckboxBase	mount	2344	2342	5000
ChoiceGroup	mount	4411	4462	5000
ComboBox	mount	1232	1240	1000
CommandBar	mount	9558	9552	1000
ContextualMenu	mount	13907	13998	1000
DefaultButton	mount	1392	1371	5000
DetailsRow	mount	3433	3471	5000
DetailsRowFast	mount	3423	3468	5000
DetailsRowNoStyles	mount	3282	3290	5000
Dialog	mount	3033	3055	1000
DocumentCardTitle	mount	588	577	1000
Dropdown	mount	3179	3211	5000
FocusTrapZone	mount	1976	2011	5000
FocusZone	mount	1971	1900	5000
GroupedList	mount	51678	57628	2
GroupedList	virtual-rerender	23602	24234	2
GroupedList	virtual-rerender-with-unmount	90781	91812	2
GroupedListV2	mount	558	553	2
GroupedListV2	virtual-rerender	545	543	2
GroupedListV2	virtual-rerender-with-unmount	554	546	2
IconButton	mount	1883	1879	5000
Label	mount	719	738	5000
Layer	mount	4338	4250	5000
Link	mount	832	842	5000
MenuButton	mount	1657	1662	5000
MessageBar	mount	2310	2236	5000
Nav	mount	3228	3192	1000
OverflowSet	mount	1351	1367	5000
Panel	mount	2506	2563	1000
Persona	mount	1325	1319	1000
Pivot	mount	1650	1614	1000
PrimaryButton	mount	1503	1501	5000
Rating	mount	6921	6888	5000
SearchBox	mount	1509	1479	5000
Shimmer	mount	2847	2836	5000
Slider	mount	2086	2104	5000
SpinButton	mount	4650	4628	5000
Spinner	mount	816	796	5000
SplitButton	mount	3094	3055	5000
Stack	mount	831	827	5000
StackWithIntrinsicChildren	mount	2296	2292	5000
StackWithTextChildren	mount	4751	4748	5000
SwatchColorPicker	mount	10309	10457	5000
TagPicker	mount	2617	2597	5000
TeachingBubble	mount	84774	84230	5000
Text	mount	773	787	5000
TextField	mount	1590	1574	5000
ThemeProvider	mount	1533	1504	5000
ThemeProvider	virtual-rerender	1085	1078	5000
ThemeProvider	virtual-rerender-with-unmount	2137	2128	5000
Toggle	mount	1104	1085	5000
buttonNative	mount	533	544	5000

…to combobox/fix

fabricteam · 2023-02-14T17:37:10Z

🕵 fluentuiv8 No visual regressions between this PR and main

packages/react/src/components/ComboBox/ComboBox.tsx

…to combobox/fix

packages/react/src/components/ComboBox/ComboBox.tsx

smhigley · 2023-02-21T23:44:47Z

/azp run

azure-pipelines · 2023-02-21T23:45:10Z

Azure Pipelines successfully started running 4 pipeline(s).

* master: (93 commits) chore: migrate to jest 27 (microsoft#26835) chore: make lint task run without need of build (microsoft#26872) chore(react-table): exports UseTableSelectionOptions (microsoft#26892) applying package updates fix(react-card): allow elements to grow to fill the available space (microsoft#26616) fix: Popover without focus trap should not be aria-hidden (microsoft#26932) applying package updates applying package updates fix(react-combobox): Remove _getAriaActiveDescendantValue, compute aria-activedescendantvalue in state, and update currentPendingValue when the options change (microsoft#26574) fix: v8 Combobox role and accname for non-hidden icon button (microsoft#26905) fix: Removing possible recursive loop in Coachmark (microsoft#26934) Combobox: Fix cursor jumping to the end of input (microsoft#26931) Fix missing icons on website (microsoft#26797) fix: Fix the width of Input's focus border with appearance=underline (microsoft#26881) chore: Clean up Input's interactive styles (microsoft#26865) Remove codeowners from change files (microsoft#26935) chore: add splitbutton error warning to docs, remove button ariaDescription example (microsoft#26904) docs: Remove testing code from MenuList example (microsoft#26929) chore: refactor SpinButton to use makeResetStyles (microsoft#26867) feat: Set overflow on positioned element when `autosize` is applied (microsoft#26868) ...

…r-component * feat/drawer-base-component: (141 commits) remove DrawerContainer feat: WIP add initial draft for Drawer and DrawerContainer chore: migrate to jest 27 (microsoft#26835) chore: make lint task run without need of build (microsoft#26872) chore(react-table): exports UseTableSelectionOptions (microsoft#26892) applying package updates fix(react-card): allow elements to grow to fill the available space (microsoft#26616) fix: Popover without focus trap should not be aria-hidden (microsoft#26932) applying package updates applying package updates fix(react-combobox): Remove _getAriaActiveDescendantValue, compute aria-activedescendantvalue in state, and update currentPendingValue when the options change (microsoft#26574) fix: v8 Combobox role and accname for non-hidden icon button (microsoft#26905) fix: Removing possible recursive loop in Coachmark (microsoft#26934) Combobox: Fix cursor jumping to the end of input (microsoft#26931) Fix missing icons on website (microsoft#26797) fix: Fix the width of Input's focus border with appearance=underline (microsoft#26881) chore: Clean up Input's interactive styles (microsoft#26865) Remove codeowners from change files (microsoft#26935) chore: add splitbutton error warning to docs, remove button ariaDescription example (microsoft#26904) docs: Remove testing code from MenuList example (microsoft#26929) ...

ivywei0125 · 2024-04-11T07:26:55Z

Hi @sopranopillow , I'm using "8.117.5" and I met the same issue about this currentPendingValueValidIndex
#25932
From which version, this fix is merged?

adding possible fix

3ede826

sopranopillow added Component: Combobox Fluent UI react (v8) Issues about @fluentui/react (v8) labels Feb 1, 2023

sopranopillow added this to the January Project Cycle Q1 2023 milestone Feb 1, 2023

sopranopillow self-assigned this Feb 1, 2023

sopranopillow mentioned this pull request Feb 1, 2023

[Bug]: Crash in Combobox when allowFreeform true and options are changed #25932

Closed

2 tasks

making _getAriaActiveDescendantValue update pending value and index

fd45e0b

sopranopillow marked this pull request as ready for review February 7, 2023 22:26

sopranopillow requested review from a team as code owners February 7, 2023 22:26

sopranopillow added 3 commits February 7, 2023 15:28

change file

c064daf

updating comment

2eea970

changing to state based solution

44f5e47

sopranopillow added 2 commits February 8, 2023 15:19

update api

78cc213

Merge branch 'master' of https://www.github.com/microsoft/fluentui in…

c8580dd

…to combobox/fix

msft-fluent-ui-bot added the PR: API Modified label Feb 8, 2023

smhigley and others added 4 commits February 10, 2023 12:00

fix errors

2478b73

restoring previous behavior

687080b

Merge branch 'master' of https://www.github.com/microsoft/fluentui in…

612ce88

…to combobox/fix

Merge branch 'master' of https://www.github.com/microsoft/fluentui in…

e680a08

…to combobox/fix

sopranopillow closed this Feb 14, 2023

sopranopillow reopened this Feb 14, 2023

khmakoto reviewed Feb 15, 2023

View reviewed changes

requested changes

4990603

Merge branch 'master' of https://www.github.com/microsoft/fluentui in…

5100a72

…to combobox/fix

sopranopillow requested review from khmakoto and smhigley February 17, 2023 18:10

khmakoto approved these changes Feb 17, 2023

View reviewed changes

Merge branch 'master' of https://www.github.com/microsoft/fluentui in…

54f7aa5

…to combobox/fix

sopranopillow enabled auto-merge (squash) February 21, 2023 01:04

smhigley approved these changes Feb 21, 2023

View reviewed changes

packages/react/src/components/ComboBox/ComboBox.tsx Outdated Show resolved Hide resolved

sopranopillow merged commit a11ac1f into microsoft:master Feb 22, 2023

sopranopillow deleted the combobox/fix branch February 27, 2023 16:46

smhigley mentioned this pull request Apr 5, 2023

fix: v8 ComboBox needs to update aria-activedescendant value #27457

Merged

khmakoto mentioned this pull request Jul 6, 2023

[Bug]: JS crash in combobox when the list is kept open and options list changes #26397

Closed

2 tasks

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

fix(react-combobox): Remove _getAriaActiveDescendantValue, compute aria-activedescendantvalue in state, and update currentPendingValue when the options change #26574

fix(react-combobox): Remove _getAriaActiveDescendantValue, compute aria-activedescendantvalue in state, and update currentPendingValue when the options change #26574

Uh oh!

sopranopillow commented Feb 1, 2023

Uh oh!

size-auditor bot commented Feb 1, 2023 •

edited

Loading

Uh oh!

fabricteam commented Feb 1, 2023 •

edited

Loading

Uh oh!

codesandbox-ci bot commented Feb 1, 2023 •

edited

Loading

Uh oh!

fabricteam commented Feb 1, 2023 •

edited

Loading

Uh oh!

fabricteam commented Feb 14, 2023 •

edited

Loading

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

smhigley commented Feb 21, 2023

Uh oh!

azure-pipelines bot commented Feb 21, 2023

Uh oh!

ivywei0125 commented Apr 11, 2024 •

edited

Loading

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

6 participants

fix(react-combobox): Remove _getAriaActiveDescendantValue, compute aria-activedescendantvalue in state, and update currentPendingValue when the options change #26574

fix(react-combobox): Remove _getAriaActiveDescendantValue, compute aria-activedescendantvalue in state, and update currentPendingValue when the options change #26574

Uh oh!

Conversation

sopranopillow commented Feb 1, 2023

Previous Behavior

New Behavior

Related Issue(s)

Uh oh!

size-auditor bot commented Feb 1, 2023 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Asset size changes

Uh oh!

fabricteam commented Feb 1, 2023 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

📊 Bundle size report

Uh oh!

codesandbox-ci bot commented Feb 1, 2023 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

fabricteam commented Feb 1, 2023 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Perf Analysis (@fluentui/react)

Uh oh!

fabricteam commented Feb 14, 2023 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

🕵 fluentuiv8 No visual regressions between this PR and main

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

smhigley commented Feb 21, 2023

Uh oh!

azure-pipelines bot commented Feb 21, 2023

Uh oh!

ivywei0125 commented Apr 11, 2024 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

6 participants

size-auditor bot commented Feb 1, 2023 •

edited

Loading

fabricteam commented Feb 1, 2023 •

edited

Loading

codesandbox-ci bot commented Feb 1, 2023 •

edited

Loading

fabricteam commented Feb 1, 2023 •

edited

Loading

Perf Analysis (`@fluentui/react`)

fabricteam commented Feb 14, 2023 •

edited

Loading

ivywei0125 commented Apr 11, 2024 •

edited

Loading