[Select] When we have Select inside Dialog, `closed` event bubbling trouble

[k-paxian]

<vwc-dialog @closed="..." >
  <vwc-select @closed="..." >
      <vwc-list-item />
      <vwc-list-item />
      <vwc-list-item />
  </vwc-select>
</vwc-dialog>

While we have opened Dialog:

Select has closed event emitted each time the select is closed with or w/o selection https://vivid.vonage.com/?path=/story/components-select-introduction--introduction This event is emitted with the bubbling allowed flag, so it bubbles up to the Dialog element and triggers a handler of the same named closed assigned to Dialog.

We would like to avoid such collision. Potential solutions would be:

• Give them different event types, to not rely on the same event type (contract break, which is unwanted, But good hint for the Vivid 3.x)
• Allow to configure bubbling aspect of event emitted from any component not only Select, platform wide thinking 🤔

Surely we could control that edge case from the business code, doing e.stopPropagation() on Select element but due to inconsistency of the people working on different parts of the system, the knowledge about this pitfall is not consistent across the teams and each team facing this issue has to go this whole investigation process from scratch, spending valuable time 😄

[yinonov]

~~I wouldn't necessarily label this as bug, but rather a pitfall as described. Indeed this causes pain and deviated from starting version 3. Events, if any, will only fire for author's convenience (if needed for business logic outside the component) and are not state triggers. Question is whether this issue is tolerable in version 2.x as it DOES have a workaround (even if inconvenient) and, now, an option to upgrade component to stop this behaviour all together~~

Such discussion was raised previously but prefixing events to their own scope deviated from native behaviour. In vivid 3.x we should explore events options.

How do we usually handle the common scenario of a bubbling click event?

[k-paxian]

I'd assume real world use cases has so rare efficient usage of the bubbling mechanism to leave it turned ON by default. So I'd vote for the default policy of having bubbling disabled for all the events emitted by the vivid components + having an option to turn it ON individually when this need will be really good grounded.

[yinonov]

bubbles and compose are false by default. I agree, unless explicitly required, events should not propagate.

vonage/vivid-3#893