aalencar
commented
2 years ago I couldn't find a solution yet, but I found out why dropdown doesn't hold its value when submit is clicked.
@mturoci gave me some leads. form card and bond function might have something to do with it. After much examination, I didn't find anything there. I removed bond , turned form into a class component, and tinkered with componentDidUpdate, but the problem persisted.
Instead of checking why the dropdown was changing, I decided to investigate why the Slider component was not. Turns out that it was, but Fluent Slider's internal logic handles updates differently, not changing its value back to the default when props change. Also, contrarily to what was previously assumed, components are not being recreated when submit is clicked.
Based on that, I had to look into how Fluent's Dropdown logic works and the snippet bellow can help us understand what is going on.
// fluentui/packages/office-ui-fabric-react/src/components/Dropdown/Dropdown.base.tsx
public UNSAFE_componentWillReceiveProps(newProps: IDropdownProps): void {
// In controlled component usage where selectedKey is provided, update the selectedIndex
// state if the key or options change.
let selectedKeyProp: 'defaultSelectedKeys' | 'selectedKeys' | 'defaultSelectedKey' | 'selectedKey';
// this does a shallow compare (assumes options are pure), for the purposes of determining whether
// defaultSelectedKey/defaultSelectedKeys are respected.
const didOptionsChange = newProps.options !== this.props.options;
if (newProps.multiSelect) {
if (didOptionsChange && newProps.defaultSelectedKeys !== undefined) {
selectedKeyProp = 'defaultSelectedKeys';
} else {
selectedKeyProp = 'selectedKeys';
}
} else {
if (didOptionsChange && newProps.defaultSelectedKey !== undefined) {
selectedKeyProp = 'defaultSelectedKey';
} else {
selectedKeyProp = 'selectedKey';
}
}
if (
newProps[selectedKeyProp] !== undefined &&
(newProps[selectedKeyProp] !== this.props[selectedKeyProp] || didOptionsChange)
) {
this.setState({
selectedIndices: this._getSelectedIndexes(newProps.options, newProps[selectedKeyProp]),
});
}
if (
newProps.options !== this.props.options // preexisting code assumes purity of the options...
) {
this._sizePosCache.updateOptions(newProps.options);
}
}Pay attention to const didOptionsChange = newProps.options !== this.props.options. options in this case refers to the ui.dropdown choices arguments in our Wave app.
this.props.options: initial choices argument
newProps.options: choices argument provided when submit is clicked
Using @mturoci's repro code I notice that the didOptionChanges is always true. The main issue is the shallow comparison.
Even though the choices arguments in the Wave app have the same values, they are created in different places, holding different references, so when we compare them with !== (reference inequality) the result is true.
As you can see in the if inside the outermost else block, when didOptionChanges is true, selectedKeyProp is set to 'defaultSelectedKey' which will be used to fetch the value for the input box in the following if block.
I don't know how the references are being kept for objects and arrays between the Wave app and React, but I imagine it's a good place to explore possible root causes. @lo5 and @mturoci maybe can give me a hand with this one.
mturoci
via @psinger
Repro
Actual behavior
After changing dropdown value and hitting submit, dropdown value should respect user input, but is currently overwritten by the
valueattribute in the else block (2).Desired behavior
valueshould be initial value only and dropdown should then be fully controlled by the user.