From ba7e60e8669b1980b9a0c6267617894e16b4a2d4 Mon Sep 17 00:00:00 2001
From: Shawn Taylor <shawn@ionic.io>
Date: Mon, 5 Jun 2023 14:27:13 -0400
Subject: [PATCH] fix(select): prevent click event from firing twice (#27570)

Issue number: N/A

---------

<!-- 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. -->
The click event was firing twice.

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

- The click event fires once.

## Does this introduce a breaking change?

- [ ] Yes
- [x] No

<!-- If this introduces a breaking change, please describe the impact
and migration path for existing applications below. -->


## Other information

<!-- Any other information that is important to this PR such as
screenshots of how the component looks before and after the change. -->
You can use the test file to see that the event now fires once, and
before this change it fired twice. I couldn't figure out how to write an
automated test for this that fails before the change and passes after
the change. (Perhaps because of how Jest "clicks" elements? Not sure.)

Also, you can use the repro repo in the Jira ticket and update it to
`"@ionic/angular": "7.0.10-dev.11685472954.170be0cc",` and see that the
issue is fixed.
---
 core/src/components/select/select.scss         |  2 ++
 .../components/select/test/basic/index.html    | 18 ++++++++++++++++++
 2 files changed, 20 insertions(+)

diff --git a/core/src/components/select/select.scss b/core/src/components/select/select.scss
index ca43b77a83..a79524b949 100644
--- a/core/src/components/select/select.scss
+++ b/core/src/components/select/select.scss
@@ -224,6 +224,8 @@ button {
   cursor: inherit;
 
   box-sizing: border-box;
+
+  pointer-events: none;
 }
 
 .select-wrapper .select-placeholder {
diff --git a/core/src/components/select/test/basic/index.html b/core/src/components/select/test/basic/index.html
index 421dd4505f..ccf103c954 100644
--- a/core/src/components/select/test/basic/index.html
+++ b/core/src/components/select/test/basic/index.html
@@ -124,6 +124,19 @@
               <ion-select-option value="onions">Onions</ion-select-option>
             </ion-select>
           </ion-item>
+
+          <ion-item>
+            <ion-select
+              id="eventPropagation"
+              label="Stop Immediate Event Propagation"
+              placeholder="Select one"
+              interface="alert"
+            >
+              <ion-select-option value="apples">Apples</ion-select-option>
+              <ion-select-option value="oranges">Oranges</ion-select-option>
+              <ion-select-option value="pears">Pears</ion-select-option>
+            </ion-select>
+          </ion-item>
         </ion-list>
       </ion-content>
 
@@ -152,6 +165,11 @@
           message: '$1.50 charge for every topping',
         };
         customActionSheetSelect.interfaceOptions = customActionSheetOptions;
+
+        document.getElementById('eventPropagation').addEventListener('click', (evt) => {
+          evt.stopImmediatePropagation();
+          console.log('clicked');
+        });
       </script>
     </ion-app>
   </body>