search

microsoft / fluentui

Fluent UI web represents a collection of utilities, React components, and web components for building web applications.
https://react.fluentui.dev
Other
18.34k stars 2.72k forks source link

Multi-select drop-down breaking on changing/filtering options #11698

Closed bhaveshbhati closed 4 years ago

bhaveshbhati commented 4 years ago

Environment Information

Describe the issue:

On updating the options in props of the multi select dropdown, the _sizePosCache is not getting updated again. This is causing the component to break with the following error Unexpected: Option at index ${index} is not a selectable element.

Looking at the code in the Dropdown.base.tsx , why are we updating the cache in componentWillRecieveProps only for single select and not multi select ?

public UNSAFE_componentWillReceiveProps(newProps: IDropdownProps): void { ........... Some code ............

if ( newProps.options !== this.props.options && // preexisting code assumes purity of the options... !newProps.multiSelect // only relevant in single selection ) { this._sizePosCache.updateOptions(newProps.options); }

}

Actual behavior:

Component is breaking down with the error mentioned above.

Expected behavior:

Component should render correctly with the new options in the props.

If applicable, please provide a codepen repro:

  1. Go to https://codepen.io/0gravity/pen/zYxaeLQ
  2. Select Broccoli
  3. Click on updateOptions , basically removed one or two options.
  4. Again open the dropdown. See the page goes blank. Check the console for logs.

Priorities and help requested (not applicable if asking question):

Are you willing to submit a PR to fix? (Yes, No) No

Requested priority: (Blocking, High, Normal, Low) Blocking/High

Products/sites affected: (if applicable) M365 Security and Compliance portal.

xugao commented 4 years ago

@bhaveshbhati - i can repro the issue. will get it fix asap

msft-github-bot commented 4 years ago

:tada:This issue was addressed in #11707, which has now been successfully released as office-ui-fabric-react@v7.82.2.:tada:

Handy links: