fix(toggle): prevent click event from firing twice (#23146)

resolves #23041

Author: willmartian

core/src/components/toggle/test/basic/index.html

@@ -76,6 +76,11 @@
           <ion-toggle slot="start" style="--border-radius: 0px;--handle-border-radius: 0px;" checked></ion-toggle>
         </ion-item>
 
+        <ion-item>
+          <ion-label>Stop Immediate Event Propagation</ion-label>
+          <ion-toggle slot="start" checked id="eventPropagation"></ion-toggle>
+        </ion-item>
+
       </ion-list>
 
 
@@ -121,6 +126,11 @@
         var isTrue = el[prop] ? false : true;
         el[prop] = isTrue;
       }
+
+      document.getElementById('eventPropagation').addEventListener('click', (evt) => {
+        evt.stopImmediatePropagation();
+        console.log('clicked');
+      });
     </script>
 
   </ion-app>

core/src/components/toggle/toggle.scss

@@ -53,6 +53,8 @@ label {
   align-items: center;
 
   opacity: 0;
+
+  pointer-events: none;
 }
 
 input {