[Bug]: Crash in Combobox when allowFreeform true and options are changed #25932
Description
Library
React / v8 (@fluentui/react)
System Info
Commit 3c754611eccb854647820ce5b5fd8b5f6b0cf1c0 introduced a bug causing a crash in the ComboBox component when allowFreeform is set to true, and the user of the Combobox is asynchronously filtering/populating the ComboBox options using the user input.
Uncaught TypeError: Cannot read properties of undefined (reading 'id')
at ComboBoxInternal._getAriaActiveDescendantValue (ComboBox.tsx:2368:1)
at ComboBoxInternal._this._renderComboBoxWrapper (ComboBox.tsx:624:1)
at ComboBoxInternal.renderI have added on comment on the MR that introduced the crash: 3c75461#r92388055
The line to blame is
descendantText = options[currentPendingValueValidIndex].id ?? this._id + '-list' + currentPendingValueValidIndex;
`currentPendingValueValidIndex` is checked to see if it is -1, but not checked to ensure it is within the bounds of the options array. As a consequence, if the options are changed after `_processInputChangeWithFreeform` has executed, such that `currentPendingValueValidIndex` is greater than the length of the options array, the component will crash.
Are you reporting Accessibility issue?
None
Reproduction
https://codesandbox.io/s/react-fiddle-forked-yujk10?file=/src/index.tsx
Bug Description
Actual Behavior
If options are changed based on the ComboBox text, ComboBox crashes.
Expected Behavior
ComboBox shouldn't crash
Logs
TypeError
options[currentPendingValueValidIndex] is undefined
$csb$eval/ComboBoxInternal.prototype._getAriaActiveDescendantValue@https://yujk10.csb.app/node_modules/
fluentui/react/lib-commonjs/components/ComboBox/ComboBox.js:1689:13
ComboBoxInternal/_this._renderComboBoxWrapper@https://yujk10.csb.app/node_modules/
fluentui/react/lib-commonjs/components/ComboBox/ComboBox.js:202:877
$csb$eval/ComboBoxInternal.prototype.render@https://yujk10.csb.app/node_modules/
fluentui/react/lib-commonjs/components/ComboBox/ComboBox.js:942:36
finishClassComponent
https://yujk10.csb.app/node_modules/react-dom/cjs/react-dom.development.js:17485:31
updateClassComponent
https://yujk10.csb.app/node_modules/react-dom/cjs/react-dom.development.js:17435:44
beginWork
https://yujk10.csb.app/node_modules/react-dom/cjs/react-dom.development.js:19073:16
callCallback
https://yujk10.csb.app/node_modules/react-dom/cjs/react-dom.development.js:3945:14
invokeGuardedCallbackDev
https://yujk10.csb.app/node_modules/react-dom/cjs/react-dom.development.js:3994:16
invokeGuardedCallback
https://yujk10.csb.app/node_modules/react-dom/cjs/react-dom.development.js:4056:31
beginWork$1
https://yujk10.csb.app/node_modules/react-dom/cjs/react-dom.development.js:23964:28
performUnitOfWork
https://yujk10.csb.app/node_modules/react-dom/cjs/react-dom.development.js:22776:12
workLoopSync
https://yujk10.csb.app/node_modules/react-dom/cjs/react-dom.development.js:22707:22
renderRootSync
https://yujk10.csb.app/node_modules/react-dom/cjs/react-dom.development.js:22670:7
performSyncWorkOnRoot
https://yujk10.csb.app/node_modules/react-dom/cjs/react-dom.development.js:22293:18
flushSyncCallbackQueueImpl/<
https://yujk10.csb.app/node_modules/react-dom/cjs/react-dom.development.js:11327:26
unstable_runWithPriority
https://yujk10.csb.app/node_modules/scheduler/cjs/scheduler.development.js:468:12
runWithPriority$1
https://yujk10.csb.app/node_modules/react-dom/cjs/react-dom.development.js:11276:10
flushSyncCallbackQueueImpl
https://yujk10.csb.app/node_modules/react-dom/cjs/react-dom.development.js:11322:26
flushSyncCallbackQueue
https://yujk10.csb.app/node_modules/react-dom/cjs/react-dom.development.js:11309:3
flushPassiveEffectsImpl
https://yujk10.csb.app/node_modules/react-dom/cjs/react-dom.development.js:23620:3
unstable_runWithPriority
https://yujk10.csb.app/node_modules/scheduler/cjs/scheduler.development.js:468:12
runWithPriority$1
https://yujk10.csb.app/node_modules/react-dom/cjs/react-dom.development.js:11276:10
flushPassiveEffects
https://yujk10.csb.app/node_modules/react-dom/cjs/react-dom.development.js:23447:14
flushDiscreteUpdates
https://yujk10.csb.app/node_modules/react-dom/cjs/react-dom.development.js:22356:3
finishEventHandler
https://yujk10.csb.app/node_modules/react-dom/cjs/react-dom.development.js:3714:5
batchedEventUpdates
https://yujk10.csb.app/node_modules/react-dom/cjs/react-dom.development.js:3748:5
dispatchEventForPluginEventSystem
https://yujk10.csb.app/node_modules/react-dom/cjs/react-dom.development.js:8507:22
attemptToDispatchEvent
https://yujk10.csb.app/node_modules/react-dom/cjs/react-dom.development.js:6005:36
dispatchEvent
https://yujk10.csb.app/node_modules/react-dom/cjs/react-dom.development.js:5924:41
unstable_runWithPriority
https://yujk10.csb.app/node_modules/scheduler/cjs/scheduler.development.js:468:12
runWithPriority$1
https://yujk10.csb.app/node_modules/react-dom/cjs/react-dom.development.js:11276:10
discreteUpdates$1
https://yujk10.csb.app/node_modules/react-dom/cjs/react-dom.development.js:22413:14
discreteUpdates
https://yujk10.csb.app/node_modules/react-dom/cjs/react-dom.development.js:3756:12
dispatchDiscreteEvent
https://yujk10.csb.app/node_modules/react-dom/cjs/react-dom.development.js:5889:18Requested priority
Blocking
Products/sites affected
Meetingflow.com
Are you willing to submit a PR to fix?
yes
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.