console warning message when using ComboBox

[konghu]

We are seeing this error message when using ComboBox component

An example of our use:

<ComboBox
						className="bx--select-input"
						autoFocus={autoFocus}
						placeholder={placeholder ? placeholder : ''}
						light
						onChange={this.handleChange}
						onBlur={this.handleBlur}
						items={this.visibleOptions || []}
						selectedItem={this.selectedOption || { label:'', value: '' }}
						{...attr}
					/>

[emyarod]

hey @konghu thanks for submitting this ticket! would you mind creating a reduced test case in Code Sandbox? it would help a lot with testing any potential fixes

[MichaelRowden]

@emyarod I've created a sandbox at https://codesandbox.io/s/ppnv5pon7
I too am experiencing this JS console warning and have included the reproduction steps below.

Reproduction Steps:

1. Go to a page with the ComboBox component such as https://codesandbox.io/s/ppnv5pon7 (do not use http://react.carbondesignsystem.com as the warning does not appear there)
2. Open the JS console
3. Open the ComboBox component
4. Click off the ComboBox component without making a selection
5. The JS console will have the warning of Warning: An update (setState, replaceState, or forceUpdate) was scheduled from inside an update function. Update functions should be pure, with zero side-effects. Consider using componentDidUpdate or a callback. (full warning message available below)

The warning seems to be generated around this code inside the handleOnInputValueChange function: https://github.com/IBM/carbon-components-react/blob/master/src/components/ComboBox/ComboBox.js#L189

Full Warning Message:

proxyConsole.js:72 Warning: An update (setState, replaceState, or forceUpdate) was scheduled from inside an update function. Update functions should be pure, with zero side-effects. Consider using componentDidUpdate or a callback.
function.console.(anonymous function)	@	proxyConsole.js:72
r.(anonymous function)	@	index.js:26
warningWithoutStack	@	react-dom.development.js:506
enqueueUpdate	@	react-dom.development.js:15993
enqueueSetState	@	react-dom.development.js:11140
Component.setState	@	react.development.js:335
internalSetState	@	downshift.cjs.js:896
setHighlightedIndex	@	downshift.cjs.js:848
(anonymous)	@	ComboBox.js:130
(anonymous)	@	downshift.cjs.js:944
getStateFromUpdate	@	react-dom.development.js:16073
processUpdateQueue	@	react-dom.development.js:16134
updateClassInstance	@	react-dom.development.js:11612
updateClassComponent	@	react-dom.development.js:14490
beginWork	@	react-dom.development.js:15440
performUnitOfWork	@	react-dom.development.js:19108
workLoop	@	react-dom.development.js:19148
renderRoot	@	react-dom.development.js:19231
performWorkOnRoot	@	react-dom.development.js:20138
performWork	@	react-dom.development.js:20050
performSyncWork	@	react-dom.development.js:20024
requestWork	@	react-dom.development.js:19893
scheduleWork	@	react-dom.development.js:19707
enqueueSetState	@	react-dom.development.js:11141
Component.setState	@	react.development.js:335
internalSetState	@	downshift.cjs.js:896
reset	@	downshift.cjs.js:1253
onMouseUp	@	downshift.cjs.js:683

[asudoh]

Saw that the issue happens in our Storybook (Combobox - Default), too, but it has to be a dev build (and thus not in react.carbondesignsystem.com). As the call stack tells, the issue seems to have something to do with Downshift calling onInputValueChange event handler during setState(), but we haven't had time to dig in further yet.

[stale]

We've marked this issue as stale because there hasn't been any activity for a couple of weeks. If there's no further activity on this issue in the next three days then we'll close it. Thanks for your contributions.

[dakahn]

@asudoh any further insight into this log message? 📜

[asudoh]

@dakahn No, unfortunately. Debugging requires knowledge of how Downshift works internally.

[carbon-bot]

Hi there! 👋 If you're wondering why this issue was moved, we're currently updating our repo structure so that every package is found in the same project.

This should not have any impact for you, but we wanted to give you a heads up in case you were wondering what is going on. If you have any questions, feel free to reach out to us on Slack or contact us at: [email protected]. Thanks!

[stale]

We've marked this issue as stale because there hasn't been any activity for a couple of weeks. If there's no further activity on this issue in the next three days then we'll close it. You can keep the conversation going with just a short comment. Thanks for your contributions.

[stale]

As there's been no activity since this issue was marked as stale, we are auto-closing it.

[asudoh]

Seems to be same as: #3637