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

[sunilgkumar9488]

Library

React / v8 (@fluentui/react)

System Info

all the systems, and all browsers

Are you reporting Accessibility issue?

no

Reproduction

https://codepen.io/yonko_sunil/pen/zYLEXGE?editors=1111

Bug Description

Actual Behavior

when comboBox list is open and the options list passed to comboBox changes, the currentPendingValueValidIndex is going out of range and causes a JS crash.

Expected Behavior

currentPendingValueValidIndex should be updated according to the new set of options and avoid JS crash.

report steps:
In the demo link, I implemented custom search functionality within ComboBox.

1. open link: https://codepen.io/yonko_sunil/pen/zYLEXGE?editors=1111
2. keep the comboBox list open and search for Option12
3. the comboBox disappears due to js crash.

Logs

fluentui-react.js:1 Uncaught TypeError: Cannot read properties of undefined (reading 'id')
    at t._getAriaActiveDescendantValue (fluentui-react.js:1:428646)
    at o._renderComboBoxWrapper (fluentui-react.js:1:403304)
    at t.render (fluentui-react.js:1:416888)
    at finishClassComponent (react-dom.development.js:17295:33)
    at updateClassComponent (react-dom.development.js:17245:26)
    at beginWork (react-dom.development.js:18755:18)
    at HTMLUnknownElement.callCallback (react-dom.development.js:182:16)
    at Object.invokeGuardedCallbackDev (react-dom.development.js:231:18)
    at invokeGuardedCallback (react-dom.development.js:286:33)
    at beginWork$1 (react-dom.development.js:23338:9)
t._getAriaActiveDescendantValue @ fluentui-react.js:1
o._renderComboBoxWrapper @ fluentui-react.js:1
t.render @ fluentui-react.js:1
finishClassComponent @ react-dom.development.js:17295
updateClassComponent @ react-dom.development.js:17245
beginWork @ react-dom.development.js:18755
callCallback @ react-dom.development.js:182
invokeGuardedCallbackDev @ react-dom.development.js:231
invokeGuardedCallback @ react-dom.development.js:286
beginWork$1 @ react-dom.development.js:23338
performUnitOfWork @ react-dom.development.js:22292
workLoopSync @ react-dom.development.js:22265
performSyncWorkOnRoot @ react-dom.development.js:21891
(anonymous) @ react-dom.development.js:11224
unstable_runWithPriority @ react.development.js:2685
runWithPriority$1 @ react-dom.development.js:11174
flushSyncCallbackQueueImpl @ react-dom.development.js:11219
flushSyncCallbackQueue @ react-dom.development.js:11207
flushPendingDiscreteUpdates @ react-dom.development.js:21982
flushDiscreteUpdates @ react-dom.development.js:21962
finishEventHandler @ react-dom.development.js:761
batchedEventUpdates @ react-dom.development.js:795
dispatchEventForLegacyPluginEventSystem @ react-dom.development.js:3691
attemptToDispatchEvent @ react-dom.development.js:4390
dispatchEvent @ react-dom.development.js:4312
unstable_runWithPriority @ react.development.js:2685
runWithPriority$1 @ react-dom.development.js:11174
discreteUpdates$1 @ react-dom.development.js:22022
discreteUpdates @ react-dom.development.js:803
dispatchDiscreteEvent @ react-dom.development.js:4291
react-dom.development.js:19662 The above error occurred in the <t> component:
    in t (created by Context.Consumer)
    in CustomizedComboBox (created by ComboBox)
    in ComboBox (created by ComboBoxTogglesExample)
    in div (created by Stack)
    in Stack (created by ComboBoxTogglesExample)
    in ComboBoxTogglesExample (created by ComboBoxTogglesExampleWrapper)
    in div (created by ThemeProvider)
    in bc (created by ThemeProvider)
    in ThemeProvider (created by ComboBoxTogglesExampleWrapper)
    in ComboBoxTogglesExampleWrapper

Consider adding an error boundary to your tree to customize error handling behavior.
Visit https://fb.me/react-error-boundaries to learn more about error boundaries.
logCapturedError @ react-dom.development.js:19662
logError @ react-dom.development.js:19699
update.callback @ react-dom.development.js:20843
callCallback @ react-dom.development.js:12625
commitUpdateQueue @ react-dom.development.js:12646
commitLifeCycles @ react-dom.development.js:20018
commitLayoutEffects @ react-dom.development.js:22938
callCallback @ react-dom.development.js:182
invokeGuardedCallbackDev @ react-dom.development.js:231
invokeGuardedCallback @ react-dom.development.js:286
commitRootImpl @ react-dom.development.js:22676
unstable_runWithPriority @ react.development.js:2685
runWithPriority$1 @ react-dom.development.js:11174
commitRoot @ react-dom.development.js:22516
finishSyncRender @ react-dom.development.js:21942
performSyncWorkOnRoot @ react-dom.development.js:21928
(anonymous) @ react-dom.development.js:11224
unstable_runWithPriority @ react.development.js:2685
runWithPriority$1 @ react-dom.development.js:11174
flushSyncCallbackQueueImpl @ react-dom.development.js:11219
flushSyncCallbackQueue @ react-dom.development.js:11207
flushPendingDiscreteUpdates @ react-dom.development.js:21982
flushDiscreteUpdates @ react-dom.development.js:21962
finishEventHandler @ react-dom.development.js:761
batchedEventUpdates @ react-dom.development.js:795
dispatchEventForLegacyPluginEventSystem @ react-dom.development.js:3691
attemptToDispatchEvent @ react-dom.development.js:4390
dispatchEvent @ react-dom.development.js:4312
unstable_runWithPriority @ react.development.js:2685
runWithPriority$1 @ react-dom.development.js:11174
discreteUpdates$1 @ react-dom.development.js:22022
discreteUpdates @ react-dom.development.js:803
dispatchDiscreteEvent @ react-dom.development.js:4291
react-dom.development.js:242 Uncaught Error: A cross-origin error was thrown. React doesn't have access to the actual error object in development. See https://fb.me/react-crossorigin-error for more information.
    at Object.invokeGuardedCallbackDev (react-dom.development.js:242:21)
    at invokeGuardedCallback (react-dom.development.js:286:33)
    at beginWork$1 (react-dom.development.js:23338:9)
    at performUnitOfWork (react-dom.development.js:22292:14)
    at workLoopSync (react-dom.development.js:22265:24)
    at performSyncWorkOnRoot (react-dom.development.js:21891:11)
    at react-dom.development.js:11224:26
    at unstable_runWithPriority (react.development.js:2685:14)
    at runWithPriority$1 (react-dom.development.js:11174:12)
    at flushSyncCallbackQueueImpl (react-dom.development.js:11219:9)
invokeGuardedCallbackDev @ react-dom.development.js:242
invokeGuardedCallback @ react-dom.development.js:286
beginWork$1 @ react-dom.development.js:23338
performUnitOfWork @ react-dom.development.js:22292
workLoopSync @ react-dom.development.js:22265
performSyncWorkOnRoot @ react-dom.development.js:21891
(anonymous) @ react-dom.development.js:11224
unstable_runWithPriority @ react.development.js:2685
runWithPriority$1 @ react-dom.development.js:11174
flushSyncCallbackQueueImpl @ react-dom.development.js:11219
flushSyncCallbackQueue @ react-dom.development.js:11207
flushPendingDiscreteUpdates @ react-dom.development.js:21982
flushDiscreteUpdates @ react-dom.development.js:21962
finishEventHandler @ react-dom.development.js:761
batchedEventUpdates @ react-dom.development.js:795
dispatchEventForLegacyPluginEventSystem @ react-dom.development.js:3691
attemptToDispatchEvent @ react-dom.development.js:4390
dispatchEvent @ react-dom.development.js:4312
unstable_runWithPriority @ react.development.js:2685
runWithPriority$1 @ react-dom.development.js:11174
discreteUpdates$1 @ react-dom.development.js:22022
discreteUpdates @ react-dom.development.js:803
dispatchDiscreteEvent @ react-dom.development.js:4291

Requested priority

High

Products/sites affected

Excel Online app

Are you willing to submit a PR to fix?

no

Validations

• Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
• The provided reproduction is a minimal reproducible example of the bug.

[WhiteAdy]

Can confirm, I have this exact issue as well, I even updated to the latest version as of today (v8.105.0).

[khmakoto]

This seems to have been fixed by #26574 and released in version 8.106.1, I have confirmed that updating the codepen above to a version after that one no longer causes a crash.

@sunilgkumar9488 let us know if updating to a version after 8.106.1 fixes your issue.

[msft-fluent-ui-bot]

This issue has been automatically marked as stale because it has marked as requiring author feedback but has not had any activity for 4 days. It will be closed if no further activity occurs within 3 days of this comment. Thank you for your contributions to Fluent UI!

[khmakoto]

Closing since we never heard back from the author (seems like the bot failed to close this issue after the allotted time).