From aed7a03532b88628a4358c8cbae1a1cbb861462b Mon Sep 17 00:00:00 2001
From: Liam DeBeasi <liamdebeasi@users.noreply.github.com>
Date: Wed, 17 Jan 2024 12:07:11 -0500
Subject: [PATCH] fix(select): click handlers on slotted content fire (#28839)

Issue number: resolves #28818

---------

<!-- Please do not submit updates to dependencies unless it fixes an
issue. -->

<!-- Please try to limit your pull request to one type (bugfix, feature,
etc). Submit multiple pull requests if needed. -->

## What is the current behavior?
<!-- Please describe the current behavior that you are modifying. -->

Select has logic in place to prevent the overlay from opening when
clicking the slotted content. As part of this, we need to deal with the
`<label>` element dispatching another click that then bubbles up and
causes the overlay to open when clicking the slotted content. We
currently deal with this by calling `preventDefault` which prevents this
extra event from being dispatched only when clicking the slotted
content.

We also call `stopPropagation`. This code is not necessary, and in most
cases should not have any adverse effects on developer applications.
However, this does impact React applications due to how React handles
events. When a developer places `onClick` on a slotted element, a native
"click" listener is not immediately applied to that element. Instead,
React adds a native "click" listener to the root element of an
application. When that listener's callback fires, React will dispatch a
synthetic click event on the slotted element. Since we are calling
`stopPropagation`, the click event never bubbles up to this root node's
listener. As a result, the synthetic event is never dispatched on the
slotted element, and the developed `onClick` callback never fires.

## What is the new behavior?
<!-- Please describe the behavior or changes that are being added by
this PR. -->

- Select no longer prevents events from bubbling. The existing
`event.preventDefault` is sufficient to prevent the label from
dispatching another click (thereby causing the select overlay to open)
when clicking the slotted content.

## Does this introduce a breaking change?

- [ ] Yes
- [x] No

<!--
  If this introduces a breaking change:
1. Describe the impact and migration path for existing applications
below.
  2. Update the BREAKING.md file with the breaking change.
3. Add "BREAKING CHANGE: [...]" to the commit description when merging.
See
https://github.com/ionic-team/ionic-framework/blob/main/.github/CONTRIBUTING.md#footer
for more information.
-->


## Other information

<!-- Any other information that is important to this PR such as
screenshots of how the component looks before and after the change. -->

Dev build: `7.6.5-dev.11705430252.1023daf3`
---
 core/src/components/select/select.tsx         | 21 +++++++++++++-
 .../components/select/test/select.spec.tsx    | 28 +++++++++++++++++++
 2 files changed, 48 insertions(+), 1 deletion(-)

diff --git a/core/src/components/select/select.tsx b/core/src/components/select/select.tsx
index b4ed9aed43..9fe26349bb 100644
--- a/core/src/components/select/select.tsx
+++ b/core/src/components/select/select.tsx
@@ -776,8 +776,27 @@ export class Select implements ComponentInterface {
        * We ensure the target isn't this element in case the select is slotted
        * in, for example, an item. This would prevent the select from ever
        * being opened since the element itself has slot="start"/"end".
+       *
+       * Clicking a slotted element also causes a click
+       * on the <label> element (since it wraps the slots).
+       * Clicking <label> dispatches another click event on
+       * the native form control that then bubbles up to this
+       * listener. This additional event targets the host
+       * element, so the select overlay is opened.
+       *
+       * When the slotted elements are clicked (and therefore
+       * the ancestor <label> element) we want to prevent the label
+       * from dispatching another click event.
+       *
+       * Do not call stopPropagation() because this will cause
+       * click handlers on the slotted elements to never fire in React.
+       * When developers do onClick in React a native "click" listener
+       * is added on the root element, not the slotted element. When that
+       * native click listener fires, React then dispatches the synthetic
+       * click event on the slotted element. However, if stopPropagation
+       * is called then the native click event will never bubble up
+       * to the root element.
        */
-      ev.stopPropagation();
       ev.preventDefault();
     }
   };
diff --git a/core/src/components/select/test/select.spec.tsx b/core/src/components/select/test/select.spec.tsx
index 4e7bedb626..1cfd4e8bb8 100644
--- a/core/src/components/select/test/select.spec.tsx
+++ b/core/src/components/select/test/select.spec.tsx
@@ -69,3 +69,31 @@ describe('ion-select', () => {
     expect(slotEl).toBe(null);
   });
 });
+
+describe('select: slot interactivity', () => {
+  test('should not prevent click handlers from firing', async () => {
+    // https://github.com/ionic-team/ionic-framework/issues/28818
+    const divSpy = jest.fn();
+    const buttonSpy = jest.fn();
+
+    const page = await newSpecPage({
+      components: [Select],
+      template: () => (
+        <div onClick={divSpy}>
+          <ion-select label="Label Prop Text">
+            <button slot="end" onClick={buttonSpy}>
+              Button
+            </button>
+          </ion-select>
+        </div>
+      ),
+    });
+
+    const button = page.body.querySelector('button')!;
+
+    await button.click();
+
+    expect(buttonSpy).toHaveBeenCalled();
+    expect(divSpy).toHaveBeenCalled();
+  });
+});