@ionic/core 9.0.2-dev.11788201761.1a20dc3a → 9.0.2-dev.11789078072.1cdaafd9

package/dist/collection/components/select/select.js

@@ -1,9 +1,9 @@
 /*!
  * (C) Ionic http://ionicframework.com - MIT License
  */
-import { Build, Host, h, forceUpdate } from "@stencil/core";
+import { Build, Host, h, forceUpdate, } from "@stencil/core";
 import { ENABLE_HTML_CONTENT_DEFAULT } from "../../utils/config";
-import { compareOptions, createNotchController, createStartContainerController, isOptionSelected, checkInvalidState, } from "../../utils/forms/index";
+import { compareOptions, createClickController, createNotchController, createStartContainerController, getSlottedClickContent, isOptionSelected, checkInvalidState, } from "../../utils/forms/index";
 import { focusVisibleElement, renderHiddenInput, inheritAttributes } from "../../utils/helpers";
 import { printIonWarning } from "../../utils/logging/index";
 import { actionSheetController, alertController, popoverController, modalController } from "../../utils/overlays";
@@ -109,41 +109,21 @@ export class Select {
          */
         this.required = false;
         this.onClick = (ev) => {
-            const target = ev.target;
-            const closestSlot = target.closest('[slot="start"], [slot="end"]');
-            if (target === this.el || closestSlot === null) {
-                this.setFocus();
-                this.open(ev);
-            }
-            else {
-                /**
-                 * Prevent clicks to the start/end slots from opening the select.
-                 * 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.preventDefault();
+            const slotted = getSlottedClickContent(ev, this.el);
+            /**
+             * Interactive slotted content, such as a button or a checkbox, handles its
+             * own click, so it should not open the select as well. Any other slotted
+             * content is decorative and behaves the same as clicking the select
+             * itself.
+             */
+            if (slotted !== null) {
+                const interactive = ev.target.closest(INTERACTIVE_SLOTTED_CONTENT);
+                if (interactive !== null && slotted.contains(interactive)) {
+                    return;
+                }
             }
+            this.setFocus();
+            this.open(ev);
         };
         this.onFocus = () => {
             this.hasFocus = true;
@@ -214,6 +194,7 @@ export class Select {
             return Build.isBrowser && getIonMode(this) === 'md' && this.fill === 'outline';
         });
         this.startContainerController.calculateStartContainerWidth();
+        this.clickController = createClickController(el);
         this.updateOverlayOptions();
         this.emitStyle();
         this.mutationO = watchForOptions(this.el, 'ion-select-option', async () => {
@@ -750,6 +731,18 @@ export class Select {
         };
         this.ionStyle.emit(style);
     }
+    /**
+     * The label wrapping the slots has no `for` attribute, so the browser
+     * forwards a click on slotted content to the label's first labelable
+     * descendant, the internal button. That forwarded click bubbles back out of
+     * the shadow root targeting the host, where it would be emitted a second
+     * time and open the select. The controller swallows it during the capture
+     * phase, leaving the click on the slotted content itself alone so slotted
+     * links, checkboxes and buttons keep their default behavior.
+     */
+    onClickCapture(ev) {
+        this.clickController?.handleClickCapture(ev);
+    }
     renderLabel() {
         const { label } = this;
         return (h("div", { class: {
@@ -947,7 +940,7 @@ export class Select {
         const hasOutlineFill = mode === 'md' && fill === 'outline';
         renderHiddenInput(true, el, name, parseValue(value), disabled);
         const labelShouldFloat = labelPlacement === 'stacked' || (labelPlacement === 'floating' && (hasValue || hasFocus || isExpanded));
-        return (h(Host, { key: 'b2f161e3706e139e61440cd13e162714b1b75d72', onClick: this.onClick, class: createColorClasses(this.color, {
+        return (h(Host, { key: '31585557ac49c439939b5a084867f5039dc2f1ce', onClick: this.onClick, class: createColorClasses(this.color, {
                 [mode]: true,
                 'in-item': inItem,
                 'in-item-color': hostContext('ion-item.ion-color', el),
@@ -965,7 +958,7 @@ export class Select {
                 [`select-justify-${justify}`]: justifyEnabled,
                 [`select-shape-${shape}`]: shape !== undefined,
                 [`select-label-placement-${labelPlacement}`]: true,
-            }) }, h("label", { key: '944a2eb468154a21260d181fdaf67828a71eb902', class: "select-wrapper", id: "select-label", onClick: this.onLabelClick, part: "wrapper" }, hasOutlineFill && this.renderOutlineContainer(), h("div", { key: '927200c53548b1bb4f52d6a167605b724a7b7d0d', class: "select-start", part: "start", ref: (el) => (this.startContainerEl = el) }, h("slot", { key: '6e14b95e9b95c116b16744d630600e90977782bc', name: "start" })), h("div", { key: '8451ed4300ac005963075be36a04ea8763bc0fdd', class: "select-control", part: "control" }, this.renderLabel(), h("div", { key: '207e7b63f3224a4870579365ac992da6784fb31f', class: "native-wrapper", ref: (el) => (this.nativeWrapperEl = el), part: "container" }, this.renderSelectText(), this.renderListbox(), !hasFloatingOrStackedLabel && this.renderSelectIcon())), h("div", { key: '5c17367d488db4d570f31b25e33560efa9011500', class: "select-end", part: "end" }, hasFloatingOrStackedLabel && this.renderSelectIcon(), h("slot", { key: '21fd8c0d9bee8cffef9ef6984cacd31e8f38211c', name: "end" })), shouldRenderHighlight && h("div", { key: '1fff767db9a1ec07b274ef65ff7ae8fb976e6ad2', class: "select-highlight" })), this.renderBottomContent()));
+            }) }, h("label", { key: '368f5f0c77550be6a743752dd1acbfe9915f0a3d', class: "select-wrapper", id: "select-label", onClick: this.onLabelClick, part: "wrapper" }, hasOutlineFill && this.renderOutlineContainer(), h("div", { key: '2e9039eaa15f398ebe54808ff659db89d3621681', class: "select-start", part: "start", ref: (el) => (this.startContainerEl = el) }, h("slot", { key: 'b83e362f89bd8cbc564ad7122778e3a0f08be66d', name: "start" })), h("div", { key: 'f55ac9fc3bbd9a4a3819a101a3780fc02ae8a8e0', class: "select-control", part: "control" }, this.renderLabel(), h("div", { key: 'e32984e57cda5cf341af8e354a2aef5a114827c0', class: "native-wrapper", ref: (el) => (this.nativeWrapperEl = el), part: "container" }, this.renderSelectText(), this.renderListbox(), !hasFloatingOrStackedLabel && this.renderSelectIcon())), h("div", { key: 'fc4cb7c392c46129afe709d9557ad9a10d72b564', class: "select-end", part: "end" }, hasFloatingOrStackedLabel && this.renderSelectIcon(), h("slot", { key: '6d65c92cdafe985a769fb3b41a58625077803eef', name: "end" })), shouldRenderHighlight && h("div", { key: '9a912c64d7cd77f074a069d126cd0bada1b71eed', class: "select-highlight" })), this.renderBottomContent()));
     }
     static get is() { return "ion-select"; }
     static get encapsulation() { return "shadow"; }
@@ -1611,6 +1604,15 @@ export class Select {
                 "methodName": "styleChanged"
             }];
     }
+    static get listeners() {
+        return [{
+                "name": "click",
+                "method": "onClickCapture",
+                "target": undefined,
+                "capture": true,
+                "passive": false
+            }];
+    }
 }
 const getOptionValue = (el) => {
     const value = el.value;
@@ -1851,3 +1853,30 @@ const extractOptionContent = (option, customHTMLEnabled) => {
 };
 let selectIds = 0;
 const OPTION_CLASS = 'select-interface-option';
+/**
+ * Slotted content that handles its own click, so clicking it should not also
+ * open the select.
+ *
+ * This deliberately does not reuse `focusableQueryString`. That selector
+ * answers whether an element can take focus right now, which is a different
+ * question: an ion-radio outside a radio group carries tabindex="-1" from the
+ * group's roving tabindex, and disabled controls are excluded, yet both still
+ * handle their own clicks.
+ */
+const INTERACTIVE_SLOTTED_CONTENT = [
+    'a[href]',
+    'button',
+    'input[type="checkbox"]',
+    'input[type="radio"]',
+    'ion-button',
+    'ion-checkbox',
+    'ion-radio',
+    'ion-toggle',
+    '[tabindex]:not([tabindex^="-"])',
+    /**
+     * Covers the remaining Ionic controls. The tags above are still listed
+     * because ion-checkbox and ion-radio only carry this class when they are
+     * outside an item, so a select inside an item would lose the match.
+     */
+    '.ion-focusable',
+].join(', ');

package/dist/collection/components/textarea/textarea.js

@@ -2,7 +2,7 @@
  * (C) Ionic http://ionicframework.com - MIT License
  */
 import { Build, Host, forceUpdate, h, writeTask, } from "@stencil/core";
-import { createNotchController, createStartContainerController, checkInvalidState } from "../../utils/forms/index";
+import { createClickController, createNotchController, createStartContainerController, checkInvalidState, } from "../../utils/forms/index";
 import { inheritAriaAttributes, debounceEvent, inheritAttributes, componentOnReady } from "../../utils/helpers";
 import { createSlotMutationController } from "../../utils/slot-mutation-controller";
 import { createColorClasses, hostContext } from "../../utils/theme";
@@ -189,11 +189,7 @@ export class Textarea {
      * Instead, the click event from the ion-textarea is emitted.
      */
     onClickCapture(ev) {
-        const nativeInput = this.nativeInput;
-        if (nativeInput && ev.target === nativeInput) {
-            ev.stopPropagation();
-            this.el.click();
-        }
+        this.clickController?.handleClickCapture(ev);
     }
     connectedCallback() {
         const { el } = this;
@@ -206,6 +202,7 @@ export class Textarea {
             return Build.isBrowser && getIonMode(this) === 'md' && this.fill === 'outline';
         });
         this.startContainerController.calculateStartContainerWidth();
+        this.clickController = createClickController(el, () => this.nativeInput);
         // Watch for class changes to update validation state
         if (Build.isBrowser && typeof MutationObserver !== 'undefined') {
             this.validationObserver = new MutationObserver(() => {
@@ -461,7 +458,7 @@ export class Textarea {
          * the textarea has a value or is focused.
          */
         const labelShouldFloat = labelPlacement === 'stacked' || (labelPlacement === 'floating' && (hasValue || hasFocus));
-        return (h(Host, { key: '78da9c96e6a29f19b237f268dd8bfd044afe27b6', class: createColorClasses(this.color, {
+        return (h(Host, { key: '0f01ed6565313c45beaea5e0aa429a86b9cfa1a0', class: createColorClasses(this.color, {
                 [mode]: true,
                 'has-value': hasValue,
                 'has-focus': hasFocus,
@@ -470,7 +467,7 @@ export class Textarea {
                 [`textarea-shape-${shape}`]: shape !== undefined,
                 [`textarea-label-placement-${labelPlacement}`]: true,
                 'textarea-disabled': disabled,
-            }) }, h("label", { key: 'c5ea3f26e01e66b857d3a1c88dbafbf2dbb81fdb', class: "textarea-wrapper", htmlFor: inputId, onClick: this.onLabelClick }, hasOutlineFill && this.renderOutlineContainer(), h("div", { key: '5a9d0efc8c13d9bd4ec4ceadf1bdb84205c47b3d', class: "textarea-start", ref: (el) => (this.startContainerEl = el) }, h("slot", { key: 'da08262e33f3a5b454847297338a74f07c5b60c9', name: "start" })), h("div", { key: '6461dc7381929eb83679ec07563b7bdf8bfc3f9f', class: "textarea-control" }, this.renderLabel(), h("div", { key: '8f7902a9e6040384d25d0e2061c04f6b49acf187', class: "native-wrapper", ref: (el) => (this.textareaWrapper = el) }, h("textarea", { key: '2149d8b2c23a164c536327c98d7a632e1e85428a', class: "native-textarea", ref: (el) => (this.nativeInput = el), id: inputId, disabled: disabled, autoCapitalize: this.autocapitalize, autoFocus: this.autofocus, enterKeyHint: this.enterkeyhint, inputMode: this.inputmode, minLength: this.minlength, maxLength: this.maxlength, name: this.name, placeholder: this.placeholder || '', readOnly: this.readonly, required: this.required, spellcheck: this.spellcheck, cols: this.cols, rows: this.rows, wrap: this.wrap, onInput: this.onInput, onChange: this.onChange, onBlur: this.onBlur, onFocus: this.onFocus, onKeyDown: this.onKeyDown, "aria-describedby": this.getHintTextID(), "aria-invalid": this.isInvalid ? 'true' : undefined, ...this.inheritedAttributes }, value))), h("div", { key: '84f5f42add89875c3f0cce734b512a9e7be81e03', class: "textarea-end" }, h("slot", { key: 'ea654d78013a00b8af33deb89d42c2b7f6c9cb99', name: "end" })), shouldRenderHighlight && h("div", { key: 'b72195d2606816b3b71e65214d78cef1740f4804', class: "textarea-highlight" })), this.renderBottomContent()));
+            }) }, h("label", { key: 'a59548c3d3bf66543fd6e06b5c3b6e649f963164', class: "textarea-wrapper", htmlFor: inputId, onClick: this.onLabelClick }, hasOutlineFill && this.renderOutlineContainer(), h("div", { key: '29055193d664d9fe84ba0340fdcbbc54fec0e403', class: "textarea-start", ref: (el) => (this.startContainerEl = el) }, h("slot", { key: '2cc122d9541ce7ae3c2309c27123b6c6c91cbfc7', name: "start" })), h("div", { key: 'c847a6fa1eaf6ef2b296415cd72bdd3aee9828a2', class: "textarea-control" }, this.renderLabel(), h("div", { key: 'f9205f82d6346daa86dc7e0f6e1eb221c76ed7b0', class: "native-wrapper", ref: (el) => (this.textareaWrapper = el) }, h("textarea", { key: '0bdb517fa5b3a44eeb3bb2ed1f9a8eab21a9a6a1', class: "native-textarea", ref: (el) => (this.nativeInput = el), id: inputId, disabled: disabled, autoCapitalize: this.autocapitalize, autoFocus: this.autofocus, enterKeyHint: this.enterkeyhint, inputMode: this.inputmode, minLength: this.minlength, maxLength: this.maxlength, name: this.name, placeholder: this.placeholder || '', readOnly: this.readonly, required: this.required, spellcheck: this.spellcheck, cols: this.cols, rows: this.rows, wrap: this.wrap, onInput: this.onInput, onChange: this.onChange, onBlur: this.onBlur, onFocus: this.onFocus, onKeyDown: this.onKeyDown, "aria-describedby": this.getHintTextID(), "aria-invalid": this.isInvalid ? 'true' : undefined, ...this.inheritedAttributes }, value))), h("div", { key: '1ce661b800ef12146bdb97fb193e22be227ea052', class: "textarea-end" }, h("slot", { key: 'aca5704db48fe8e0e784cf57f2978ae2d63b3edc', name: "end" })), shouldRenderHighlight && h("div", { key: 'd916816d44cbdb4bc9a05032c5490eaa9bf3ba47', class: "textarea-highlight" })), this.renderBottomContent()));
     }
     static get is() { return "ion-textarea"; }
     static get encapsulation() { return "scoped"; }

package/dist/collection/utils/forms/click-controller.js

@@ -0,0 +1,70 @@
+/*!
+ * (C) Ionic http://ionicframework.com - MIT License
+ */
+import { raf } from "../helpers";
+/**
+ * The content slotted into a form control's start or end slot that a click
+ * started on, or `null` when the click did not start on slotted content.
+ *
+ * The slotted element is compared against the host in case the form control
+ * itself is slotted into, for example, an item. Without that check a control
+ * carrying slot="start"/"end" would treat every click on itself as a slotted
+ * click.
+ */
+export const getSlottedClickContent = (ev, el) => {
+    const slotted = ev.target.closest('[slot="start"], [slot="end"]');
+    return slotted !== null && slotted !== el && el.contains(slotted) ? slotted : null;
+};
+/**
+ * Whether a click started on content slotted into a form control's start or
+ * end slot.
+ */
+const isSlottedClick = (ev, el) => getSlottedClickContent(ev, el) !== null;
+/**
+ * A utility for form components that wrap their content in a <label>, such as
+ * ion-input, ion-textarea and ion-select.
+ *
+ * Clicking slotted content also clicks that label, and the browser follows it
+ * with a click on the label's control. That second click would be emitted from
+ * the host as a duplicate, so the slotted click is remembered and the click
+ * that follows it is suppressed.
+ *
+ * Browsers skip the forwarding when the click lands on interactive content,
+ * such as a slotted button, so the slotted click is remembered for a frame
+ * rather than until a forwarded click that may never arrive.
+ *
+ * @internal
+ * @param el - The host element.
+ * @param getNativeInput - A callback returning the native form control the
+ * label points at, for components that have one. Those components emit the
+ * click from the host rather than the control, so the control's click is
+ * always stopped and re-dispatched from the host. Omit it for components whose
+ * label has no `for` attribute, such as ion-select, where the browser forwards
+ * to an internal control that already re-bubbles targeting the host.
+ */
+export const createClickController = (el, getNativeInput) => {
+    let hasSlottedClick = false;
+    const handleClickCapture = (ev) => {
+        if (isSlottedClick(ev, el)) {
+            hasSlottedClick = true;
+            raf(() => (hasSlottedClick = false));
+            return;
+        }
+        if (getNativeInput === undefined) {
+            if (hasSlottedClick) {
+                ev.stopPropagation();
+                hasSlottedClick = false;
+            }
+            return;
+        }
+        const nativeInput = getNativeInput();
+        if (nativeInput !== undefined && ev.target === nativeInput) {
+            ev.stopPropagation();
+            if (!hasSlottedClick) {
+                el.click();
+            }
+            hasSlottedClick = false;
+        }
+    };
+    return { handleClickCapture };
+};

package/dist/collection/utils/forms/index.js

@@ -5,4 +5,5 @@ export * from './notch-controller';
 export * from './start-container-controller';
 export * from './compare-with-utils';
 export * from './item-multiple-inputs';
+export * from './click-controller';
 export * from './validity';

package/dist/docs.json

@@ -1,5 +1,5 @@
 {
-  "timestamp": "2026-08-31T18:44:40",
+  "timestamp": "2026-09-10T22:09:45",
   "compiler": {
     "name": "@stencil/core",
     "version": "4.44.2",
@@ -31461,7 +31461,13 @@
           "docsTags": []
         }
       ],
-      "listeners": [],
+      "listeners": [
+        {
+          "event": "click",
+          "capture": true,
+          "passive": false
+        }
+      ],
       "styles": [
         {
           "name": "--background",

package/dist/esm/ion-input.entry.js

@@ -2,7 +2,7 @@
  * (C) Ionic http://ionicframework.com - MIT License
  */
 import { r as registerInstance, c as createEvent, i as forceUpdate, h, d as Host, g as getElement } from './index-C23AVPx9.js';
-import { c as createSlotMutationController, a as createNotchController, b as createStartContainerController } from './slot-mutation-controller-B5NpUZ-N.js';
+import { c as createSlotMutationController, a as createNotchController, b as createStartContainerController, d as createClickController } from './slot-mutation-controller-BVnANfIt.js';
 import { c as checkInvalidState } from './validity-DJztqcrH.js';
 import { d as debounceEvent, b as inheritAttributes, i as inheritAriaAttributes, c as componentOnReady } from './helpers-BSmc0nst.js';
 import { h as hostContext, c as createColorClasses } from './theme-byZM6qHV.js';
@@ -232,11 +232,7 @@ const Input = class {
      * Instead, the click event from the ion-input is emitted.
      */
     onClickCapture(ev) {
-        const nativeInput = this.nativeInput;
-        if (nativeInput && ev.target === nativeInput) {
-            ev.stopPropagation();
-            this.el.click();
-        }
+        this.clickController?.handleClickCapture(ev);
     }
     componentWillLoad() {
         this.inheritedAttributes = {
@@ -257,6 +253,7 @@ const Input = class {
             return getIonMode(this) === 'md' && this.fill === 'outline';
         });
         this.startContainerController.calculateStartContainerWidth();
+        this.clickController = createClickController(el, () => this.nativeInput);
         // Watch for class changes to update validation state
         if (typeof MutationObserver !== 'undefined') {
             this.validationObserver = new MutationObserver(() => {
@@ -532,7 +529,7 @@ const Input = class {
          * the input has a value or is focused.
          */
         const labelShouldFloat = labelPlacement === 'stacked' || (labelPlacement === 'floating' && (hasValue || hasFocus));
-        return (h(Host, { key: '9e9495b8f962372d526343ff76b80fb9700fce19', class: createColorClasses(this.color, {
+        return (h(Host, { key: '290cf987de670276bf40b9f19d35d3769d9c0540', class: createColorClasses(this.color, {
                 [mode]: true,
                 'has-value': hasValue,
                 'has-focus': hasFocus,
@@ -543,14 +540,14 @@ const Input = class {
                 'in-item': inItem,
                 'in-item-color': hostContext('ion-item.ion-color', this.el),
                 'input-disabled': disabled,
-            }) }, h("label", { key: '7121f34ed782caf7a7b82703b94fc9d6c78ce5ba', class: "input-wrapper", htmlFor: inputId, onClick: this.onLabelClick }, hasOutlineFill && this.renderOutlineContainer(), h("div", { key: '0c1f8526d86c8a2433c23873fa64b1edc0eafe29', class: "input-start", ref: (el) => (this.startContainerEl = el) }, h("slot", { key: 'a50323fde0fb12997c2324eded132908680ea450', name: "start" })), h("div", { key: '626360c4e115a5286baab49680b2a02cd39614c8', class: "input-control" }, this.renderLabel(), h("div", { key: '1cefd9d8cd6ed96fab7b58237f8f8b0c5e1be92e', class: "native-wrapper", onClick: this.onLabelClick }, h("input", { key: '3dee5302f3a685a848fedd7e1face5095e3ac64b', class: "native-input", ref: (input) => (this.nativeInput = input), id: inputId, disabled: disabled, autoCapitalize: this.autocapitalize, autoComplete: this.autocomplete, autoCorrect: this.autocorrect ? 'on' : 'off', autoFocus: this.autofocus, enterKeyHint: this.enterkeyhint, inputMode: this.inputmode, min: this.min, max: this.max, minLength: this.minlength, maxLength: this.maxlength, multiple: this.multiple, name: this.name, pattern: this.pattern, placeholder: this.placeholder || '', readOnly: readonly, required: this.required, spellcheck: this.spellcheck, step: this.step, type: this.type, value: value, onInput: this.onInput, onChange: this.onChange, onBlur: this.onBlur, onFocus: this.onFocus, onKeyDown: this.onKeydown, onCompositionstart: this.onCompositionStart, onCompositionend: this.onCompositionEnd, "aria-describedby": this.getHintTextID(), "aria-invalid": this.isInvalid ? 'true' : undefined, "aria-labelledby": this.getLabelledById(), ...this.inheritedAttributes }))), h("div", { key: '39fff82e00e63963fe5f17794900ace2a3faa208', class: "input-end" }, this.clearInput && !readonly && !disabled && (h("button", { key: '1fa86fdb5baf4a7cd531ee0fe767a42b44fb33fc', "aria-label": "reset", type: "button", class: "input-clear-icon", onPointerDown: (ev) => {
+            }) }, h("label", { key: '27f4bd671f6084a7e608e4f9442192c950879dc2', class: "input-wrapper", htmlFor: inputId, onClick: this.onLabelClick }, hasOutlineFill && this.renderOutlineContainer(), h("div", { key: '7827c61ffdd02952fc8cf2096f621b50fc51ec03', class: "input-start", ref: (el) => (this.startContainerEl = el) }, h("slot", { key: '1d8af52d3506742d87334b388859a8bf613e1be0', name: "start" })), h("div", { key: '927a412064538c00df98fabc06a32c564d05e984', class: "input-control" }, this.renderLabel(), h("div", { key: '05f80c0b11a7da57445f976bd2dbb557fa63c9bc', class: "native-wrapper", onClick: this.onLabelClick }, h("input", { key: 'cb6f5d81ba7c2a04cc4c9deb5d3f5bca8562b6db', class: "native-input", ref: (input) => (this.nativeInput = input), id: inputId, disabled: disabled, autoCapitalize: this.autocapitalize, autoComplete: this.autocomplete, autoCorrect: this.autocorrect ? 'on' : 'off', autoFocus: this.autofocus, enterKeyHint: this.enterkeyhint, inputMode: this.inputmode, min: this.min, max: this.max, minLength: this.minlength, maxLength: this.maxlength, multiple: this.multiple, name: this.name, pattern: this.pattern, placeholder: this.placeholder || '', readOnly: readonly, required: this.required, spellcheck: this.spellcheck, step: this.step, type: this.type, value: value, onInput: this.onInput, onChange: this.onChange, onBlur: this.onBlur, onFocus: this.onFocus, onKeyDown: this.onKeydown, onCompositionstart: this.onCompositionStart, onCompositionend: this.onCompositionEnd, "aria-describedby": this.getHintTextID(), "aria-invalid": this.isInvalid ? 'true' : undefined, "aria-labelledby": this.getLabelledById(), ...this.inheritedAttributes }))), h("div", { key: '82cd1b0458dcd491fd1a46b29764f2b79a969bc6', class: "input-end" }, this.clearInput && !readonly && !disabled && (h("button", { key: 'dfcf0ed81cf36fc61b8e12ed4605ac6b6eb50dad', "aria-label": "reset", type: "button", class: "input-clear-icon", onPointerDown: (ev) => {
                 /**
                  * This prevents mobile browsers from
                  * blurring the input when the clear
                  * button is activated.
                  */
                 ev.preventDefault();
-            }, onClick: this.clearTextInput }, h("ion-icon", { key: 'ced39304f97e56870f7480afa025ffe232010cfb', "aria-hidden": "true", icon: clearIconData }))), h("slot", { key: 'f4098769eef1cc5aa2074c369f757ccb94a98e1c', name: "end" })), shouldRenderHighlight && h("div", { key: '258fe6ff8f9f57836f2a3a0b6163bd2b7dbf0699', class: "input-highlight" })), this.renderBottomContent()));
+            }, onClick: this.clearTextInput }, h("ion-icon", { key: '11e2c866135f332e81b4637de178e1c5c7da0d38', "aria-hidden": "true", icon: clearIconData }))), h("slot", { key: 'afb0e75e7103b2bf925a9c7649c93eb1d5702670', name: "end" })), shouldRenderHighlight && h("div", { key: '1f305bba279e93685d7139acf0aff6bf4a77500c', class: "input-highlight" })), this.renderBottomContent()));
     }
     get el() { return getElement(this); }
     static get watchers() { return {

package/dist/esm/ion-select_3.entry.js

@@ -3,7 +3,7 @@
  */
 import { r as registerInstance, c as createEvent, e as config, f as printIonWarning, h, d as Host, g as getElement, i as forceUpdate } from './index-C23AVPx9.js';
 import { E as ENABLE_HTML_CONTENT_DEFAULT } from './config-DWCzVL3Y.js';
-import { c as createSlotMutationController, a as createNotchController, b as createStartContainerController } from './slot-mutation-controller-B5NpUZ-N.js';
+import { g as getSlottedClickContent, c as createSlotMutationController, a as createNotchController, b as createStartContainerController, d as createClickController } from './slot-mutation-controller-BVnANfIt.js';
 import { c as compareOptions, i as isOptionSelected } from './compare-with-utils-sObYyvOy.js';
 import { c as checkInvalidState } from './validity-DJztqcrH.js';
 import { b as inheritAttributes, a as renderHiddenInput, n as focusVisibleElement } from './helpers-BSmc0nst.js';
@@ -104,41 +104,21 @@ const Select = class {
          */
         this.required = false;
         this.onClick = (ev) => {
-            const target = ev.target;
-            const closestSlot = target.closest('[slot="start"], [slot="end"]');
-            if (target === this.el || closestSlot === null) {
-                this.setFocus();
-                this.open(ev);
-            }
-            else {
-                /**
-                 * Prevent clicks to the start/end slots from opening the select.
-                 * 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.preventDefault();
+            const slotted = getSlottedClickContent(ev, this.el);
+            /**
+             * Interactive slotted content, such as a button or a checkbox, handles its
+             * own click, so it should not open the select as well. Any other slotted
+             * content is decorative and behaves the same as clicking the select
+             * itself.
+             */
+            if (slotted !== null) {
+                const interactive = ev.target.closest(INTERACTIVE_SLOTTED_CONTENT);
+                if (interactive !== null && slotted.contains(interactive)) {
+                    return;
+                }
             }
+            this.setFocus();
+            this.open(ev);
         };
         this.onFocus = () => {
             this.hasFocus = true;
@@ -209,6 +189,7 @@ const Select = class {
             return getIonMode(this) === 'md' && this.fill === 'outline';
         });
         this.startContainerController.calculateStartContainerWidth();
+        this.clickController = createClickController(el);
         this.updateOverlayOptions();
         this.emitStyle();
         this.mutationO = watchForOptions(this.el, 'ion-select-option', async () => {
@@ -707,6 +688,18 @@ const Select = class {
         };
         this.ionStyle.emit(style);
     }
+    /**
+     * The label wrapping the slots has no `for` attribute, so the browser
+     * forwards a click on slotted content to the label's first labelable
+     * descendant, the internal button. That forwarded click bubbles back out of
+     * the shadow root targeting the host, where it would be emitted a second
+     * time and open the select. The controller swallows it during the capture
+     * phase, leaving the click on the slotted content itself alone so slotted
+     * links, checkboxes and buttons keep their default behavior.
+     */
+    onClickCapture(ev) {
+        this.clickController?.handleClickCapture(ev);
+    }
     renderLabel() {
         const { label } = this;
         return (h("div", { class: {
@@ -904,7 +897,7 @@ const Select = class {
         const hasOutlineFill = mode === 'md' && fill === 'outline';
         renderHiddenInput(true, el, name, parseValue(value), disabled);
         const labelShouldFloat = labelPlacement === 'stacked' || (labelPlacement === 'floating' && (hasValue || hasFocus || isExpanded));
-        return (h(Host, { key: 'b2f161e3706e139e61440cd13e162714b1b75d72', onClick: this.onClick, class: createColorClasses(this.color, {
+        return (h(Host, { key: '31585557ac49c439939b5a084867f5039dc2f1ce', onClick: this.onClick, class: createColorClasses(this.color, {
                 [mode]: true,
                 'in-item': inItem,
                 'in-item-color': hostContext('ion-item.ion-color', el),
@@ -922,7 +915,7 @@ const Select = class {
                 [`select-justify-${justify}`]: justifyEnabled,
                 [`select-shape-${shape}`]: shape !== undefined,
                 [`select-label-placement-${labelPlacement}`]: true,
-            }) }, h("label", { key: '944a2eb468154a21260d181fdaf67828a71eb902', class: "select-wrapper", id: "select-label", onClick: this.onLabelClick, part: "wrapper" }, hasOutlineFill && this.renderOutlineContainer(), h("div", { key: '927200c53548b1bb4f52d6a167605b724a7b7d0d', class: "select-start", part: "start", ref: (el) => (this.startContainerEl = el) }, h("slot", { key: '6e14b95e9b95c116b16744d630600e90977782bc', name: "start" })), h("div", { key: '8451ed4300ac005963075be36a04ea8763bc0fdd', class: "select-control", part: "control" }, this.renderLabel(), h("div", { key: '207e7b63f3224a4870579365ac992da6784fb31f', class: "native-wrapper", ref: (el) => (this.nativeWrapperEl = el), part: "container" }, this.renderSelectText(), this.renderListbox(), !hasFloatingOrStackedLabel && this.renderSelectIcon())), h("div", { key: '5c17367d488db4d570f31b25e33560efa9011500', class: "select-end", part: "end" }, hasFloatingOrStackedLabel && this.renderSelectIcon(), h("slot", { key: '21fd8c0d9bee8cffef9ef6984cacd31e8f38211c', name: "end" })), shouldRenderHighlight && h("div", { key: '1fff767db9a1ec07b274ef65ff7ae8fb976e6ad2', class: "select-highlight" })), this.renderBottomContent()));
+            }) }, h("label", { key: '368f5f0c77550be6a743752dd1acbfe9915f0a3d', class: "select-wrapper", id: "select-label", onClick: this.onLabelClick, part: "wrapper" }, hasOutlineFill && this.renderOutlineContainer(), h("div", { key: '2e9039eaa15f398ebe54808ff659db89d3621681', class: "select-start", part: "start", ref: (el) => (this.startContainerEl = el) }, h("slot", { key: 'b83e362f89bd8cbc564ad7122778e3a0f08be66d', name: "start" })), h("div", { key: 'f55ac9fc3bbd9a4a3819a101a3780fc02ae8a8e0', class: "select-control", part: "control" }, this.renderLabel(), h("div", { key: 'e32984e57cda5cf341af8e354a2aef5a114827c0', class: "native-wrapper", ref: (el) => (this.nativeWrapperEl = el), part: "container" }, this.renderSelectText(), this.renderListbox(), !hasFloatingOrStackedLabel && this.renderSelectIcon())), h("div", { key: 'fc4cb7c392c46129afe709d9557ad9a10d72b564', class: "select-end", part: "end" }, hasFloatingOrStackedLabel && this.renderSelectIcon(), h("slot", { key: '6d65c92cdafe985a769fb3b41a58625077803eef', name: "end" })), shouldRenderHighlight && h("div", { key: '9a912c64d7cd77f074a069d126cd0bada1b71eed', class: "select-highlight" })), this.renderBottomContent()));
     }
     get el() { return getElement(this); }
     static get watchers() { return {
@@ -1179,6 +1172,33 @@ const extractOptionContent = (option, customHTMLEnabled) => {
 };
 let selectIds = 0;
 const OPTION_CLASS = 'select-interface-option';
+/**
+ * Slotted content that handles its own click, so clicking it should not also
+ * open the select.
+ *
+ * This deliberately does not reuse `focusableQueryString`. That selector
+ * answers whether an element can take focus right now, which is a different
+ * question: an ion-radio outside a radio group carries tabindex="-1" from the
+ * group's roving tabindex, and disabled controls are excluded, yet both still
+ * handle their own clicks.
+ */
+const INTERACTIVE_SLOTTED_CONTENT = [
+    'a[href]',
+    'button',
+    'input[type="checkbox"]',
+    'input[type="radio"]',
+    'ion-button',
+    'ion-checkbox',
+    'ion-radio',
+    'ion-toggle',
+    '[tabindex]:not([tabindex^="-"])',
+    /**
+     * Covers the remaining Ionic controls. The tags above are still listed
+     * because ion-checkbox and ion-radio only carry this class when they are
+     * outside an item, so a select inside an item would lose the match.
+     */
+    '.ion-focusable',
+].join(', ');
 Select.style = {
     ios: selectIosCss(),
     md: selectMdCss()

package/dist/esm/ion-textarea.entry.js

@@ -2,7 +2,7 @@
  * (C) Ionic http://ionicframework.com - MIT License
  */
 import { r as registerInstance, c as createEvent, i as forceUpdate, w as writeTask, h, d as Host, g as getElement } from './index-C23AVPx9.js';
-import { c as createSlotMutationController, a as createNotchController, b as createStartContainerController } from './slot-mutation-controller-B5NpUZ-N.js';
+import { c as createSlotMutationController, a as createNotchController, b as createStartContainerController, d as createClickController } from './slot-mutation-controller-BVnANfIt.js';
 import { c as checkInvalidState } from './validity-DJztqcrH.js';
 import { d as debounceEvent, b as inheritAttributes, i as inheritAriaAttributes, c as componentOnReady } from './helpers-BSmc0nst.js';
 import { h as hostContext, c as createColorClasses } from './theme-byZM6qHV.js';
@@ -194,11 +194,7 @@ const Textarea = class {
      * Instead, the click event from the ion-textarea is emitted.
      */
     onClickCapture(ev) {
-        const nativeInput = this.nativeInput;
-        if (nativeInput && ev.target === nativeInput) {
-            ev.stopPropagation();
-            this.el.click();
-        }
+        this.clickController?.handleClickCapture(ev);
     }
     connectedCallback() {
         const { el } = this;
@@ -211,6 +207,7 @@ const Textarea = class {
             return getIonMode(this) === 'md' && this.fill === 'outline';
         });
         this.startContainerController.calculateStartContainerWidth();
+        this.clickController = createClickController(el, () => this.nativeInput);
         // Watch for class changes to update validation state
         if (typeof MutationObserver !== 'undefined') {
             this.validationObserver = new MutationObserver(() => {
@@ -466,7 +463,7 @@ const Textarea = class {
          * the textarea has a value or is focused.
          */
         const labelShouldFloat = labelPlacement === 'stacked' || (labelPlacement === 'floating' && (hasValue || hasFocus));
-        return (h(Host, { key: '78da9c96e6a29f19b237f268dd8bfd044afe27b6', class: createColorClasses(this.color, {
+        return (h(Host, { key: '0f01ed6565313c45beaea5e0aa429a86b9cfa1a0', class: createColorClasses(this.color, {
                 [mode]: true,
                 'has-value': hasValue,
                 'has-focus': hasFocus,
@@ -475,7 +472,7 @@ const Textarea = class {
                 [`textarea-shape-${shape}`]: shape !== undefined,
                 [`textarea-label-placement-${labelPlacement}`]: true,
                 'textarea-disabled': disabled,
-            }) }, h("label", { key: 'c5ea3f26e01e66b857d3a1c88dbafbf2dbb81fdb', class: "textarea-wrapper", htmlFor: inputId, onClick: this.onLabelClick }, hasOutlineFill && this.renderOutlineContainer(), h("div", { key: '5a9d0efc8c13d9bd4ec4ceadf1bdb84205c47b3d', class: "textarea-start", ref: (el) => (this.startContainerEl = el) }, h("slot", { key: 'da08262e33f3a5b454847297338a74f07c5b60c9', name: "start" })), h("div", { key: '6461dc7381929eb83679ec07563b7bdf8bfc3f9f', class: "textarea-control" }, this.renderLabel(), h("div", { key: '8f7902a9e6040384d25d0e2061c04f6b49acf187', class: "native-wrapper", ref: (el) => (this.textareaWrapper = el) }, h("textarea", { key: '2149d8b2c23a164c536327c98d7a632e1e85428a', class: "native-textarea", ref: (el) => (this.nativeInput = el), id: inputId, disabled: disabled, autoCapitalize: this.autocapitalize, autoFocus: this.autofocus, enterKeyHint: this.enterkeyhint, inputMode: this.inputmode, minLength: this.minlength, maxLength: this.maxlength, name: this.name, placeholder: this.placeholder || '', readOnly: this.readonly, required: this.required, spellcheck: this.spellcheck, cols: this.cols, rows: this.rows, wrap: this.wrap, onInput: this.onInput, onChange: this.onChange, onBlur: this.onBlur, onFocus: this.onFocus, onKeyDown: this.onKeyDown, "aria-describedby": this.getHintTextID(), "aria-invalid": this.isInvalid ? 'true' : undefined, ...this.inheritedAttributes }, value))), h("div", { key: '84f5f42add89875c3f0cce734b512a9e7be81e03', class: "textarea-end" }, h("slot", { key: 'ea654d78013a00b8af33deb89d42c2b7f6c9cb99', name: "end" })), shouldRenderHighlight && h("div", { key: 'b72195d2606816b3b71e65214d78cef1740f4804', class: "textarea-highlight" })), this.renderBottomContent()));
+            }) }, h("label", { key: 'a59548c3d3bf66543fd6e06b5c3b6e649f963164', class: "textarea-wrapper", htmlFor: inputId, onClick: this.onLabelClick }, hasOutlineFill && this.renderOutlineContainer(), h("div", { key: '29055193d664d9fe84ba0340fdcbbc54fec0e403', class: "textarea-start", ref: (el) => (this.startContainerEl = el) }, h("slot", { key: '2cc122d9541ce7ae3c2309c27123b6c6c91cbfc7', name: "start" })), h("div", { key: 'c847a6fa1eaf6ef2b296415cd72bdd3aee9828a2', class: "textarea-control" }, this.renderLabel(), h("div", { key: 'f9205f82d6346daa86dc7e0f6e1eb221c76ed7b0', class: "native-wrapper", ref: (el) => (this.textareaWrapper = el) }, h("textarea", { key: '0bdb517fa5b3a44eeb3bb2ed1f9a8eab21a9a6a1', class: "native-textarea", ref: (el) => (this.nativeInput = el), id: inputId, disabled: disabled, autoCapitalize: this.autocapitalize, autoFocus: this.autofocus, enterKeyHint: this.enterkeyhint, inputMode: this.inputmode, minLength: this.minlength, maxLength: this.maxlength, name: this.name, placeholder: this.placeholder || '', readOnly: this.readonly, required: this.required, spellcheck: this.spellcheck, cols: this.cols, rows: this.rows, wrap: this.wrap, onInput: this.onInput, onChange: this.onChange, onBlur: this.onBlur, onFocus: this.onFocus, onKeyDown: this.onKeyDown, "aria-describedby": this.getHintTextID(), "aria-invalid": this.isInvalid ? 'true' : undefined, ...this.inheritedAttributes }, value))), h("div", { key: '1ce661b800ef12146bdb97fb193e22be227ea052', class: "textarea-end" }, h("slot", { key: 'aca5704db48fe8e0e784cf57f2978ae2d63b3edc', name: "end" })), shouldRenderHighlight && h("div", { key: 'd916816d44cbdb4bc9a05032c5490eaa9bf3ba47', class: "textarea-highlight" })), this.renderBottomContent()));
     }
     get el() { return getElement(this); }
     static get watchers() { return {