For DetailsLists, "onActiveItemChanged" doesn't work well for opening up a modal dialog for that item as a second click on the same row (after closing the model dialolg) is ignored as the activeItem hasn't changed. "onItemInvoke" isn't great either as it only responds to a double click.
Is there a way to clear the active item?
Here are two solutions:
A: Force rebuild of DetailsList my iterating the key
1) Add state variable to parent component that holds a key value
state: ComponentState = {
dialogKey: 0
}
2) Add the key to the DetailsList
<DetailsList
key={this.state.dialogKey}
onActiveItemChanged={trainDialog => this.onOpenModel(item)}
...
/>
3) Increment the key when the model closes:
onCloseModal() {
this.setState({
dialogKey: this.state.dialogKey+1
})
}
This will force a rebuild of the DetailsList so a second click on the same for will trigger onActiveItemChanged
B: Add an onClick handler to the renderer for each column:
<span onClick={() => component.onOpenModel(action)}>Cell Content</span>