DetailsList component is not taking into account selection property - reactjs

Question

I have created the following sample application to try and simplify as much as possible an issue I am having as part of a larger application I am working on.
The issue has to do with the selection property of the DetailsList component in office-ui-fabric-react.
I have included the main components of the sample application below to try and illustrate my issue.
App.tsx
import * as React from 'react';
import './App.css';
import { ClickedItemsList } from './ClickedItemsList';
import { GenerateItemButton } from './GenerateItemButton';
import { ItemSelectionStore } from './ItemSelectionStore';
class App extends React.Component {
public itemSelectionStore: ItemSelectionStore = new ItemSelectionStore();
public render() {
return (
<div>
<GenerateItemButton store={this.itemSelectionStore} />
<ClickedItemsList store={this.itemSelectionStore} />
</div>
);
}
}
export default App;
ItemSelectionStore.tsx
import * as React from 'react';
import './App.css';
import { ClickedItemsList } from './ClickedItemsList';
import { GenerateItemButton } from './GenerateItemButton';
import { ItemSelectionStore } from './ItemSelectionStore';
class App extends React.Component {
public itemSelectionStore: ItemSelectionStore = new ItemSelectionStore();
public render() {
return (
<div>
<GenerateItemButton store={this.itemSelectionStore} />
<ClickedItemsList store={this.itemSelectionStore} />
</div>
);
}
}
export default App;
GenerateItemButton.tsx
import * as React from 'react';
import { ItemSelectionStore } from './ItemSelectionStore';
export interface IGenerateItemButtonProps {
store: ItemSelectionStore
}
export class GenerateItemButton extends React.Component<IGenerateItemButtonProps> {
public render() {
return (
<button onClick={this.handleClick}/>
)
}
private handleClick = () =>
this.props.store.onAddItemButtonClicked();
}
ClickedItemList
import { observer } from 'mobx-react';
import {CheckboxVisibility, DetailsList, IColumn, IObjectWithKey, Selection, SelectionMode } from 'office-ui-fabric-react/lib/DetailsList';
import * as React from 'react';
import { ItemSelectionStore } from './ItemSelectionStore';
export interface IClickedItemsListProps {
store: ItemSelectionStore
}
#observer
export class ClickedItemsList extends React.Component<IClickedItemsListProps> {
private columns: IColumn[] = [{ key: 'key', name: 'Extracted key', fieldName: 'key', minWidth: 150 }];
public render() {
const { store } = this.props;
const selectedItems = store.selectedItems;
// creating items to display
const itemsToDisplay: IObjectWithKey[] = [];
selectedItems.forEach(k => itemsToDisplay.push({'key': k}));
// creating selection
const selection = new Selection();
selection.setItems(itemsToDisplay);
selection.setAllSelected(true);
return (
<DetailsList
items={itemsToDisplay}
selectionPreservedOnEmptyClick={true}
columns={this.columns}
checkboxVisibility={CheckboxVisibility.always}
selectionMode={SelectionMode.multiple}
selection={selection}
/>
)
}
}
When a user clicks on the button a random string is added to a list of items which are dynamically displayed by the ClickedItemsList component.
The items appear as they should on every click but I am having trouble with the selection property.
I want all items added to the list to also be in a selected state but my sample application fails to do so and all items simply appear in a non selected state.
Thoughts ?