Should interactive elements provide a way to stop event propagation?

[arabello]

I was wondering if bento should provide an API to stop event propagation for interactive elements. Is it a pattern that a design systems should support?

I have a clickable Card container with a Switch component. Without a stop propagation in place, clicking on the Switch will trigger the Card click. Even though this specific case could be arguable, I feel that propagation management can be useful for a bento consumer.

My current solution is to simply wrap the interactive component with a Box handling the propagation

<Box onClick={(e) => e.stopPropagation()}>
  <Switch
   {...}
    value={includeInReport}
    onChange={setIncludeInReport}
  />
</Box>

Should bento provide a more integrated API to support it? For example, interactive components could have a stopPropagation prop specifying the event type to block.

<Switch
   {...}
    value={includeInReport}
    onChange={setIncludeInReport}
    stopProgation="click"
  />

or a dedicated component replicating the Box approach

<StopPropagation eventType="click">
  <Switch
     {...}
      value={includeInReport}
      onChange={setIncludeInReport}
      stopProgation
    />
</StopPropagation>

[gabro]

In general, we may consider to add more control over the underlying events.

In this specific case, we're delegating the handling of that click to react-aria, which should already stop propagation by default.

See https://github.com/adobe/react-spectrum/blob/main/packages/%40react-aria/toggle/src/useToggle.ts#L54

So I'm not sure why you're seeing that behavior since stopping propagation should be the default.

[gabro]

Actually, no, that's obvious: react-aria is stopping the "change" event, but what you are seeing is the "click" event.

I see three ways forward:

• stop the event propagation of clicks for interactive components by the default (this is already the case with all components using usePress like Button)
• expose the onClick event on Switch/Checkbox/etc so that you can stop the event propagation directly (this is what other libraries seem to be doing, e.g. https://mui.com/material-ui/react-switch/)
• do nothing and recommend the workaround you found

I need to think about it a bit