-
Notifications
You must be signed in to change notification settings - Fork 327
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Unify value behavior #1154
Comments
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. Instead of checking why the dropdown was changing, I decided to investigate why the 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
Using @mturoci's repro code I notice that the Even though the As you can see in the 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. |
I'm currently looking into other components to check if they have the same issue. If so, we'd have to come up with a more generic approach that solves the problem on a higher level in the component tree. |
Supports setting
|
@marek-mihok can you please finish this once you are back from vacation? You can either make a single PR or multiple smaller ones, whatever suits you. |
Co-authored-by: Martin Turoci <[email protected]>
Co-authored-by: Martin Turoci <[email protected]>
via @psinger
Repro
Actual behavior
After changing dropdown value and hitting submit, dropdown value should respect user input, but is currently overwritten by the
value
attribute in the else block (2).Desired behavior
value
should be initial value only and dropdown should then be fully controlled by the user.The text was updated successfully, but these errors were encountered: