Curious why Office Fabric Dropdown doesn't work with observables

[ptallett]

I don't think this is a bug in Mobx, rather a "bug" in Office Fabric.

https://github.com/OfficeDev/office-ui-fabric-react/issues/10870

@observable selectedKeys: string[];

<Dropdown placeholder="(All)" label="Plants" selectedKeys={this.selectedKeys} onChange={(e, item)=>this.onPlantChange(e, item)} multiSelect options={this.options} styles={{ dropdown: { width: 257 } }}/>

This doesn't work - the dropdown never lets you select any values.

Since the workaround is trivial (this.selectedKeys.slice()) I can live with this. However, I have used Mobx extensively and this is the first time its not worked for me, so I am curious to know what is causing this issue.

[danielkcz]

Sorry, without reproduction it's unlikely someone will want to dive into it.

[ptallett]

Repro

https://codesandbox.io/s/minimal-mobx-react-project-pf0mt?fontsize=14

[danielkcz]

Thanks. Your workaround is actually a correct solution 😆 This is common MobX gotcha. If you pass observable object/array/set/map there is no actual reading of its values happening and MobX cannot trigger a reaction. When you do .slice() it has to actually iterate over values and MobX can see changes to it and trigger re-renders.

Generally, the better solution is if child rendered components have an observer, but in your case, the 3rd library does not understand MobX, so you have to work around that on your side.

[lock[bot]]

This thread has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs or questions.