Fluentui: Issue in Detailed List - State not reflecting on UI immedietly

[keerthinath-ganjam]

Bug Report

Requested priority: Blocking

Describe the issue:

When a state is updated from the detailed view child component, the row gets updated only when we click out side the row. In the below Example, i have a toggle button Constant / Variable in each row, based on the user selection the second column gets rendered with text box/drop down. If i see the state by logging using console.log() statement, i can see the state been updated immediately when user changes the toggle, but UI is not reflected until he click outside the row.

Actual behavior:

UI not reflecting immediately when the state gets updated, it refreshes only when user clicks outside the row once

Expected behavior:

UI should reflect immediately when the state gets updated, it should update the row when the user changes the option

If applicable, please provide a codepen repro:

https://codepen.io/keerthinath/pen/RMyzBE?editors=0011

[KevinTCoughlin]

I could be wrong, but in debugging this it seems like the onRenderItemColumn callbacks execute before the inner click event is handled by a <Toggle/> and that inner click modifies state. So the render of the column is always of the previous state if inner state changed. Haven't reached a fix yet. Trying to see if there's a working example of this behavior elsewhere.

I was able to repro it on latest in the DetailsList.CustomColumns.Example by swapping one of the columns for a <Toggle/>.

[KevinTCoughlin]

Did some more digging.. it looks like a shallow comparison issue. Seems possible to workaround it for now by updating the entire Detail array like:

sourceMappingTypeChanged(checked, index) {
  ...
  this.setState({ Details: [].concat(Details) })
  ...
}

https://codepen.io/kevintcoughlin/pen/oqaEOK?editors=0011

Unsure about proper lib fix still

[keerthinath-ganjam]

Thanks @KevinTCoughlin its working with the workaround you suggested.

[dzearing]

@KevinTCoughlin Thanks for digging!!!

I'm not quite sure this is something we can fix without introducing additional perf impact. We clearly do not want to re-render rows when data hasn't changed, and if the items haven't changed to detailslist, we have no idea that something within mutated.

[aditima]

I agree with @dzearing. To me, the DetailsRow component is ideally a stateless one that is driven by item props coming from DetailsList.

@keerthinath-ganjam - in most real world scenarios, I imagine we'd want to persist the result of the toggle operation in the item data, and the workaround suggested by @KevinTCoughlin essentially does that. If your scenario demands a per-row state, we suggest you either use such a workaround, or override the DetailsRow component with your own and use the onRenderRow callback prop on DetailsList to use it.

[Spragalas]

You can have your custom MyCheckbox component which would track its state and it will render itself on his state change. Also I have onChange property, which is called from MyCheckbox onValue change, thus i can listen for changes in parent component

export class MyCheckbox extends React.Component<any, any>{
    constructor(props?) {
        super(props);
        this.state = { currentValue: this.props.value };
        this._onChange = this._onChange.bind(this);
    }

    private _onChange(newValue) {
        this.setState({ currentValue: newValue });
        this.props.onChange(newValue);
    }

    public render(): JSX.Element {
        return (
                    <Checkbox
                        checked={this.state.currentValue}
                        onChange={(_, value) => {
                            this._onChange(value);
                        }} />
        );
    }
}