ms-officeoffice-ui-fabricoffice-fabric

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


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?


Solution

  • 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>