Office Fabric: Enabling user to re-select the same row in DetailsList

Question

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?

Answer 1

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>