Fluentui: DetailsList should use natural event bubbling to only invoke onActiveItemChanged after event propgates from child cells

[mattmazzola]

Currently the DetailsList exposes: onActiveItemChanged which can be used to perform generic action when the user clicks a row.

However, there is use case for having another button within a column which is special and does not change active selection such remove button. When the user clicks on this button I would like to be able to call event.stopPropagation to prevent the onActiveItemChanged from being invoked since I don't want that code being executed in this case..

This is not possible since the onActiveItemChanged even somehow gets triggered BEFORE the callback from the child cells. Regardless of the event.stopPropgation on either callbacks they will both always get called.

[mattmazzola]

Hmm, after looking further it seems the onActiveItemChange comes from some other Selection component which would make it difficult to change.

Perhaps the easy solution is to just have separate onItemClick callback that adds new functionality instead of worry about breaking changes with onActiveItemChange

[cschleiden]

What it you handle the button click yourself and stop propagation?

[mattmazzola]

Well the point of stopping propagation on my button (which is child cell in the DetailsList row) is to prevent the event from bubbling and reaching the parent row and triggering the larger onActiveItemChanged; however, this does not work. As described above, the onActiveItemChanged fires not only before, the child click but is also not able to be prevented. I believe there is some magic of overlaying div on top of the actual rows which enables the drag selection and that component is emitting the event instead of re-using the native click.

[Xitro]

I've got simillar problem like @mattmazzola. I believe there should be a way to stop selection change propagation or to disable selecting from certain columns - for example removing or flagging an item.

With parameter to columns I believe it would be even better UI/UX solution due to visual distinction (no hover, or internal button hover in that column)

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions to Fabric React!
Why am I receiving this notification?

[Faizan2304]

I've also got the similar problem like @mattmazzola. I believe @Xitro has a good point here.

[dzearing]

I believe you can do this by stopping propagation on focus.

The reason that it occurs before your click handler is that focus events occur first. That's the one keying off the onActiveItemChanged event. If you stopPropagation for focus, it won't fire.

Example here:

https://codepen.io/dzearing/pen/GwKpNq?editors=1011

I think we can close this, but if you have a better suggestion, please let us know.

[msft-github-bot]

This issue has been automatically marked as stale because it has been marked as requiring author feedback but has not had any activity for 5 days. It will be closed if no further activity occurs within 3 days of this comment. Thank you for your contributions to Fabric React!