[DataGrid] Use event.defaultMuiPrevented to prevent the default behavior

[m4theushw]

Breaking changes

• [DataGrid] Replace event.stopPropagation() with event.defaultMuiPrevented = true in all callback props.

  Previously, calling event.stopPropagation would stop the propagation of an event and also prevent its the default behavior from running. Now, these two actions can be controlled independently:

  • Set event.defaultMuiPrevented to true to prevent the default action of an event

  • Call event.stopPropagation to stop an event from propagating to parent elements

  <DataGrid
    onCellDoubleClick={(params, event) => {
  -   event.stopPropagation();
  +   event.defaultMuiPrevented = true;
    }}
  />

• [XGrid] Replace event.stopPropagation() with event.defaultMuiPrevented = true in all event listeners.

  apiRef.current.subscribeEvent('cellDoubleClick', (params, event) => {
  - event.stopPropagation();
  + event.defaultMuiPrevented = true;
  });

  For more information, check this page.

---

Closes #1403

Preview: https://deploy-preview-2179--material-ui-x.netlify.app/components/data-grid/events/#disabling-the-default-behavior

TODO

• Add section in https://material-ui.com/components/data-grid/events/
• Remove all event.isPropagationStopped()
• Improve the definition of MuiEvent
• List the breaking changes

[oliviertassinari]

Suggested change

	* @param {MuiEvent} event The event that caused this prop to be called.
	* @param {MuiEvent<React.SyntheticEvent>} event The event that caused this prop to be called.

? x the other

---

I would personally be fine if I had to do this in my codebase.:

(event as any).defaultMuiPrevented = true;

Suggested change

	* @param {MuiEvent} event The event that caused this prop to be called.
	* @param {React.SyntheticEvent} event The event that caused this prop to be called.

but I can understand if we don't like this idea 😆

[m4theushw]

We started to use this MuiEvent. Would be nice to keep it, because of the special property. Sometimes using it can lead to terrible typings when the event can be fired both by a synthetic event as well as by a native event, e.g. MuiEvent<React.MouseEvent | DocumentEventMap['click']>.

[m4theushw]

This page is not good. My idea is to remove the Pro badge from the page and move it to this section only. Then, add a new section only for the event props, e.g. onCellClick, explaining that they are like subscribing to events but with less granularity. For the catalog of events, I want to improve the docs generator to include a third column with the event prop that is mapped to each event name. I think that with our convention GRID_CELL_CLICK -> onCellClick I can discover the mappings. cc @oliviertassinari

[dtassone]

if we set event.defaultMuiPrevented = true; and then publish then it will be reset here and be published.
Why not check defaultMuiPrevented everywhere there isPropagationStopped

[m4theushw]

We still want the event to be published. Only the listeners should not run if event.defaultMuiPrevented is true.

[dtassone]

that could go out of this scope in a separate function. Not sure about redefining the handler as it changes the ref of the handler func potentially breaking immutability if (handler === otherHandler) 🤔

[m4theushw]

We don't have any place where we compare the handler that is actually passed to subscribeEvent. I mean, compare the handler with the one that is saved in the event emitter. The ref would not change.

Another approach would be to move the event.defaultMuiPrevented validation to the event emitter, which is a very low level way to do it.