Carbon: MultiSelect `initialSelectedItems` not updating on rerender, TextInput not accepting user input

[drewdistefano]

What package(s) are you using?

• [x] carbon-components
• [x] carbon-components-react

Detailed description

Describe in detail the issue you're having.
a. TextInput will not accept user input without workaround involving onChange props (see sandbox)
b. MultiSelect will not update selected items based on state without workaround involving key (see sandbox)

Is this issue related to a specific component?
a. TextInput
b. MultiSelect

What did you expect to happen? What happened instead? What would you like to
see changed?
a. I expected TextInput to get the value for value prop from state but still be editable by the user. Instead, although it responds to changes in state, its value is frozen. I would like TextInput to get value for value prop from state on render, but still allow this value to be changed via user input.
b. I expected InitialSelectedItems prop on MultiSelect to update on rerender. Instead, the selected values don't change once set, unless changed via user input. I would like MultiSelect to update this value on rerender, while still allowing the selected items to be changed by the user.

What browser are you working in?
Chrome

What version of the Carbon Design System are you using?
"carbon-components": "^10.6.2",
"carbon-components-react": "^7.6.2",

What offering/product do you work on? Any pressing ship or release dates we
should be aware of?
An internal tool for creating suggested matches (suggested matches authoring tool). Birthday cake release for this tool is EOM (Oct 31).

Steps to reproduce the issue

1. Open code sandbox https://codesandbox.io/s/codesandbox-sowwu?fontsize=14
2. Change the value in the TextInput
3. Observe that the value in TextInput can only change by updating state.
4. Observe that MultiSelect component with id = "1" updates its selected items while component with id = "2" doesn't. This is because of the implemented workaround, where MultiSelect with id = "1" is rebuilt on each rerender, as result of its key being updated.

Please create a reduced test case in CodeSandbox

• Style and vanilla JS:
  https://codesandbox.io/s/github/carbon-design-system/carbon/tree/master/packages/components/examples/codesandbox
• React:
  https://codesandbox.io/s/github/carbon-design-system/carbon/tree/master/packages/react/examples/codesandbox

https://codesandbox.io/s/codesandbox-sowwu?fontsize=14

Additional information

• Screenshots or code
• Notes: I tried to make the code sandbox self-explanatory via placeholder and labelText

[OmarSherif96]

Thanks @drewdistefano for posting this your work-around for the Multiselect issued fixed it for me.

[drewdistefano]

@OmarSherif96 You're very welcome!

[joshblack]

Hey there! 👋

For initialSelectedItems, the hope with the prop name is that it reveals that what is passed to the component only represents what is selected on the initial render. Renders after that will "desync" from what is provided in that initial value.

For TextInput, you can use it in a controlled or uncontrolled fashion. That is, the following two forms are valid:

<TextInput
  labelText="Label"
  defaultValue="Default value"
  onChange={event => {
    console.log(event.target.value);
  }}
/>

<TextInput
  value={value}
  onChange={event => {
    setValue(event.target.value);
  }}
/>

If you specify value, then it will be a controlled component. As a result, the value will be kept in state 👍 Hope this helps!