@ionic/core 9.0.1-dev.11787248963.10a00c73 → 9.0.1-dev.11787949960.1e63841c

package/dist/collection/components/loading/loading.js

@@ -5,7 +5,7 @@ import { Host, h } from "@stencil/core";
 import { ENABLE_HTML_CONTENT_DEFAULT } from "../../utils/config";
 import { raf } from "../../utils/helpers";
 import { createLockController } from "../../utils/lock-controller";
-import { BACKDROP, cleanupRootFocusTrapAccessibility, createDelegateController, createTriggerController, dismiss, eventMethod, prepareOverlay, present, setOverlayId, } from "../../utils/overlays";
+import { BACKDROP, cleanupRootFocusTrapAccessibility, createDelegateController, createTriggerController, dismiss, eventMethod, prepareOverlay, present, restoreRootFocusTrapAccessibility, setOverlayId, } from "../../utils/overlays";
 import { sanitizeDOMString } from "../../utils/sanitization/index";
 import { getClassMap } from "../../utils/theme";
 import { config } from "../../global/config";
@@ -82,6 +82,10 @@ export class Loading {
     connectedCallback() {
         prepareOverlay(this.el);
         this.triggerChanged();
+        // Re-apply the root lock if moved without dismiss() being called
+        if (this.presented) {
+            restoreRootFocusTrapAccessibility(this.el);
+        }
     }
     componentWillLoad() {
         if (this.spinner === undefined) {
@@ -182,14 +186,14 @@ export class Loading {
          * Otherwise, don't set aria-labelledby.
          */
         const ariaLabelledBy = message !== undefined ? msgId : null;
-        return (h(Host, { key: '2d14122ff3081de73631a7fdd4affdd5c73b8618', role: "dialog", "aria-modal": "true", "aria-labelledby": ariaLabelledBy, tabindex: "-1", ...htmlAttributes, style: {
+        return (h(Host, { key: 'b4430bc66aedeca19d5645667cba73c169c4bd76', role: "dialog", "aria-modal": "true", "aria-labelledby": ariaLabelledBy, tabindex: "-1", ...htmlAttributes, style: {
                 zIndex: `${40000 + this.overlayIndex}`,
             }, onIonBackdropTap: this.onBackdropTap, class: {
                 ...getClassMap(this.cssClass),
                 [mode]: true,
                 'overlay-hidden': true,
                 'loading-translucent': this.translucent,
-            } }, h("ion-backdrop", { key: 'b7d5bb0d670a20c159d7f67327bf3b1489449188', visible: this.showBackdrop, tappable: this.backdropDismiss }), h("div", { key: '085ce92bd2004d323ab47eb472b83826e48dc619', tabindex: "0", "aria-hidden": "true" }), h("div", { key: '4ecd5bfc0bbd3da434d32f0f319f867a44c5e1f1', class: "loading-wrapper ion-overlay-wrapper" }, spinner && (h("div", { key: '5a4498e1421e09d01c0ee4312eae5272e95c3127', class: "loading-spinner" }, h("ion-spinner", { key: '1b3bc7d45d775195657ead3535f65e6b79f37e84', name: spinner, "aria-hidden": "true" }))), message !== undefined && this.renderLoadingMessage(msgId)), h("div", { key: 'bc7c5467b9f1c6ab957f79934e97acc713bdec37', tabindex: "0", "aria-hidden": "true" })));
+            } }, h("ion-backdrop", { key: 'dec0df942ae778c99ebd4dbf08d6c2a0a992639d', visible: this.showBackdrop, tappable: this.backdropDismiss }), h("div", { key: '71b2d5fc259666225047fc901648ada1efcd5d4b', tabindex: "0", "aria-hidden": "true" }), h("div", { key: '1d83dc3b57ee70c9e8c0f006c6fa576bd96ecded', class: "loading-wrapper ion-overlay-wrapper" }, spinner && (h("div", { key: 'd1cd127e044b8831e396b53122322c1db7e89904', class: "loading-spinner" }, h("ion-spinner", { key: '38c2580cf5659da612872f01801a5fbdc2c023ba', name: spinner, "aria-hidden": "true" }))), message !== undefined && this.renderLoadingMessage(msgId)), h("div", { key: '90e5e32ffe0df2c691f364149f43374e676bfaa3', tabindex: "0", "aria-hidden": "true" })));
     }
     static get is() { return "ion-loading"; }
     static get encapsulation() { return "scoped"; }

package/dist/collection/components/modal/modal.ios.css

@@ -77,7 +77,12 @@
   --max-width: auto;
   --height: 100%;
   --min-height: auto;
-  --max-height: auto;
+  /**
+   * Clamps a content-sized `--height` (auto, fit-content, ...) to the 
+   * overlay, giving the wrapper's flex children something to shrink 
+   * toward so `ion-content` scrolls instead of overflowing.
+   */
+  --max-height: 100%;
   --overflow: hidden;
   --border-radius: 0;
   --border-width: 0;
@@ -129,8 +134,14 @@ ion-backdrop {
 /**
  * The wrapper receives programmatic focus for screen readers but should not
  * show a visible focus ring, which is meant only for keyboard navigation.
+ *
+ * A flex layout is required for the wrapper to size itself to its content
+ * when the modal is content-sized (`--height` is auto, fit-content, ...).
+ * This makes it so that the content can scroll when it overflows the wrapper.
  */
 .modal-wrapper {
+  display: flex;
+  flex-direction: column;
   outline: none;
 }
 

package/dist/collection/components/modal/modal.js

@@ -8,7 +8,7 @@ import { raf, inheritAttributes, hasLazyBuild, getElementRoot } from "../../util
 import { createLockController } from "../../utils/lock-controller";
 import { printIonWarning } from "../../utils/logging/index";
 import { Style as StatusBarStyle, StatusBar } from "../../utils/native/status-bar";
-import { BACKDROP, cleanupRootFocusTrapAccessibility, createTriggerController, dismiss, eventMethod, FOCUS_TRAP_DISABLE_CLASS, GESTURE, prepareOverlay, present, setOverlayId, } from "../../utils/overlays";
+import { BACKDROP, cleanupRootFocusTrapAccessibility, createTriggerController, dismiss, eventMethod, FOCUS_TRAP_DISABLE_CLASS, GESTURE, prepareOverlay, present, restoreRootFocusTrapAccessibility, setOverlayId, } from "../../utils/overlays";
 import { getClassMap } from "../../utils/theme";
 import { deepReady, waitForMount } from "../../utils/transition/index";
 import { config } from "../../global/config";
@@ -43,6 +43,9 @@ export class Modal {
         this.inline = false;
         // Whether or not modal is being dismissed via gesture
         this.gestureAnimationDismissing = false;
+        // True from the first safe-area write in `present()` until the enter
+        // animation settles. A position-based read in that window is not the rest position.
+        this.isPresenting = false;
         this.presented = false;
         /** @internal */
         this.hasController = false;
@@ -279,6 +282,17 @@ export class Modal {
         const { el } = this;
         prepareOverlay(el);
         this.triggerChanged();
+        // A disconnect tears down state this presentation still needs and cannot
+        // tell a re-insert from a removal, so put it back.
+        if (this.presented || this.isPresenting) {
+            this.restoreSafeAreaOverrides();
+        }
+        // A relocation from `willPresent` reaches these before `present()` has
+        // applied the lock, so they apply it instead. Both are idempotent.
+        if (this.presented) {
+            restoreRootFocusTrapAccessibility(el);
+            this.initParentRemovalObserver();
+        }
     }
     disconnectedCallback() {
         this.triggerController.removeClickListener();
@@ -456,25 +470,33 @@ export class Modal {
         // Recalculate isSheetModal before safe-area setup because framework
         // bindings (e.g., Angular) may not have been applied when componentWillLoad ran.
         this.isSheetModal = this.breakpoints !== undefined && this.initialBreakpoint !== undefined;
-        // Set initial safe-area overrides before animation
-        this.setInitialSafeAreaOverrides();
+        this.isPresenting = true;
         const hasCardModal = presentingElement !== undefined;
-        /**
-         * We need to change the status bar at the
-         * start of the animation so that it completes
-         * by the time the card animation is done.
-         */
-        if (hasCardModal && getIonMode(this) === 'ios') {
-            // Cache the original status bar color before the modal is presented
-            this.statusBarStyle = await StatusBar.getStyle();
-            setCardStatusBarDark();
+        // Wrapped so a throw cannot strand `isPresenting`, which would suppress
+        // the position-based correction for the life of this instance.
+        try {
+            // Set initial safe-area overrides before animation
+            this.setInitialSafeAreaOverrides();
+            /**
+             * We need to change the status bar at the
+             * start of the animation so that it completes
+             * by the time the card animation is done.
+             */
+            if (hasCardModal && getIonMode(this) === 'ios') {
+                // Cache the original status bar color before the modal is presented
+                this.statusBarStyle = await StatusBar.getStyle();
+                setCardStatusBarDark();
+            }
+            await present(this, 'modalEnter', iosEnterAnimation, mdEnterAnimation, {
+                presentingEl: presentingElement,
+                currentBreakpoint: this.initialBreakpoint,
+                backdropBreakpoint: this.backdropBreakpoint,
+                expandToScroll: this.expandToScroll,
+            });
+        }
+        finally {
+            this.isPresenting = false;
         }
-        await present(this, 'modalEnter', iosEnterAnimation, mdEnterAnimation, {
-            presentingEl: presentingElement,
-            currentBreakpoint: this.initialBreakpoint,
-            backdropBreakpoint: this.backdropBreakpoint,
-            expandToScroll: this.expandToScroll,
-        });
         // Update safe-area based on actual position after animation
         this.updateSafeAreaOverrides();
         // Apply fullscreen safe-area padding if needed
@@ -984,6 +1006,9 @@ export class Modal {
             this.cachedOriginalParent.tagName === 'ION-APP') {
             return;
         }
+        // Both `present()` and a reconnect call this, so drop any existing
+        // observer. Below the guards, so a call that bails cannot leave none.
+        this.cleanupParentRemovalObserver();
         this.parentRemovalObserver = new MutationObserver((mutations) => {
             mutations.forEach((mutation) => {
                 if (mutation.type === 'childList' && mutation.removedNodes.length > 0) {
@@ -1062,6 +1087,9 @@ export class Modal {
         // Set the internal offset property with the resolved root safe-area-top value
         if (context.isSheetModal) {
             this.updateSheetOffsetTop();
+            // A restore after a DOM move runs this a second time for the same
+            // modal, so drop the previous subscription rather than stacking one.
+            this.unsubscribeRootSafeAreaTop?.();
             this.unsubscribeRootSafeAreaTop = onRootSafeAreaTopChange((safeAreaTop) => this.updateSheetOffsetTop(safeAreaTop));
         }
     }
@@ -1180,6 +1208,31 @@ export class Modal {
         const { contentEl } = this.findContentAndFooter();
         this.clearContentSafeAreaPadding(contentEl);
     }
+    /**
+     * Re-applies what `cleanupSafeAreaOverrides()` removed for a modal moved
+     * while presented. Anything needing no measurement goes on synchronously so
+     * the modal is never painted without safe-area. The position-based
+     * correction waits a frame for the layout pass it reads.
+     */
+    restoreSafeAreaOverrides() {
+        this.setInitialSafeAreaOverrides();
+        this.applyFullscreenSafeArea();
+        raf(() => {
+            // A dismiss or another move can land first, and a read before the enter
+            // animation settles is not the rest position. `present()` redoes it.
+            if (!this.presented || !this.el.isConnected || this.isPresenting) {
+                return;
+            }
+            // A hidden subtree carries `display: none`, so there is no box and the
+            // read would write the safe-area for a modal touching no edge. The
+            // prediction applied above holds until the modal is shown again.
+            const { width, height } = this.el.getBoundingClientRect();
+            if (width === 0 && height === 0) {
+                return;
+            }
+            this.updateSafeAreaOverrides();
+        });
+    }
     render() {
         const { handle, isSheetModal, presentingElement, htmlAttributes, handleBehavior, inheritedAttributes, focusTrap, expandToScroll, } = this;
         const showHandle = handle !== false && isSheetModal;
@@ -1187,7 +1240,7 @@ export class Modal {
         const isCardModal = presentingElement !== undefined && mode === 'ios';
         const isHandleCycle = handleBehavior === 'cycle';
         const isSheetModalWithHandle = isSheetModal && showHandle;
-        return (h(Host, { key: 'a471c293319cb6ee5ffb7ffafec0b8413e4289de', "no-router": true,
+        return (h(Host, { key: '7c9c736052c5a788cf31040b6b2386dd9ea7454b', "no-router": true,
             // Allow the modal to be navigable when the handle is focusable
             tabIndex: isHandleCycle && isSheetModalWithHandle ? 0 : -1, ...htmlAttributes, style: {
                 zIndex: `${20000 + this.overlayIndex}`,
@@ -1200,7 +1253,7 @@ export class Modal {
                 'overlay-hidden': true,
                 [FOCUS_TRAP_DISABLE_CLASS]: focusTrap === false,
                 ...getClassMap(this.cssClass),
-            }, onIonBackdropTap: this.onBackdropTap, onIonModalDidPresent: this.onLifecycle, onIonModalWillPresent: this.onLifecycle, onIonModalWillDismiss: this.onLifecycle, onIonModalDidDismiss: this.onLifecycle, onFocus: this.onModalFocus }, h("ion-backdrop", { key: 'f67934afd4ddad64623856fb641cb6db846df428', ref: (el) => (this.backdropEl = el), visible: this.showBackdrop, tappable: this.backdropDismiss, part: "backdrop" }), mode === 'ios' && h("div", { key: 'a23f5cb6cf60c8f717c1dd556bce375829c80a43', class: "modal-shadow" }), h("div", { key: '51eb6cd1070e4b7e49840a78dc7437238c867a01',
+            }, onIonBackdropTap: this.onBackdropTap, onIonModalDidPresent: this.onLifecycle, onIonModalWillPresent: this.onLifecycle, onIonModalWillDismiss: this.onLifecycle, onIonModalDidDismiss: this.onLifecycle, onFocus: this.onModalFocus }, h("ion-backdrop", { key: '01b5b5765fb3a32393c736065c824bf760728823', ref: (el) => (this.backdropEl = el), visible: this.showBackdrop, tappable: this.backdropDismiss, part: "backdrop" }), mode === 'ios' && h("div", { key: '40fa7727a0923f7d7461dd027f1511a6a148d84a', class: "modal-shadow" }), h("div", { key: '9af934b607f60795bd5bff7bee6eacfc9b14fa35',
             /*
               role and aria-modal must be used on the
               same element. They must also be set inside the
@@ -1213,9 +1266,9 @@ export class Modal {
               without the tabindex focus() would be a no-op and screen readers
               may not properly announce the dialog and its content when it opens.
             */
-            role: "dialog", ...inheritedAttributes, "aria-modal": "true", tabIndex: -1, class: "modal-wrapper ion-overlay-wrapper", part: "content", ref: (el) => (this.wrapperEl = el) }, showHandle && (h("button", { key: 'f49a144642b5c227c0c2b00b33f4c7e37a2bf088', class: "modal-handle",
+            role: "dialog", ...inheritedAttributes, "aria-modal": "true", tabIndex: -1, class: "modal-wrapper ion-overlay-wrapper", part: "content", ref: (el) => (this.wrapperEl = el) }, showHandle && (h("button", { key: 'df84a6806413b13efc5b03c862edde83151579a7', class: "modal-handle",
             // Prevents the handle from receiving keyboard focus when it does not cycle
-            tabIndex: !isHandleCycle ? -1 : 0, "aria-label": "Activate to adjust the size of the dialog overlaying the screen", onClick: isHandleCycle ? this.onHandleClick : undefined, part: "handle", ref: (el) => (this.dragHandleEl = el) })), h("slot", { key: 'e781c0d5881762c6b61aa432721a38b49580ff64', onSlotchange: this.onSlotChange }))));
+            tabIndex: !isHandleCycle ? -1 : 0, "aria-label": "Activate to adjust the size of the dialog overlaying the screen", onClick: isHandleCycle ? this.onHandleClick : undefined, part: "handle", ref: (el) => (this.dragHandleEl = el) })), h("slot", { key: '072d3929ec6f25481946b184d8ac24219011e783', onSlotchange: this.onSlotChange }))));
     }
     static get is() { return "ion-modal"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/modal/modal.md.css

@@ -77,7 +77,12 @@
   --max-width: auto;
   --height: 100%;
   --min-height: auto;
-  --max-height: auto;
+  /**
+   * Clamps a content-sized `--height` (auto, fit-content, ...) to the 
+   * overlay, giving the wrapper's flex children something to shrink 
+   * toward so `ion-content` scrolls instead of overflowing.
+   */
+  --max-height: 100%;
   --overflow: hidden;
   --border-radius: 0;
   --border-width: 0;
@@ -129,8 +134,14 @@ ion-backdrop {
 /**
  * The wrapper receives programmatic focus for screen readers but should not
  * show a visible focus ring, which is meant only for keyboard navigation.
+ *
+ * A flex layout is required for the wrapper to size itself to its content
+ * when the modal is content-sized (`--height` is auto, fit-content, ...).
+ * This makes it so that the content can scroll when it overflows the wrapper.
  */
 .modal-wrapper {
+  display: flex;
+  flex-direction: column;
   outline: none;
 }
 

package/dist/collection/components/picker-column/picker-column.js

@@ -20,6 +20,12 @@ export class PickerColumn {
         this.isColumnVisible = false;
         this.canExitInputMode = true;
         this.updateValueTextOnScroll = false;
+        this.isUserScroll = false;
+        /**
+         * The haptics for the wheel picker are an iOS-only feature. As a result,
+         * they should be disabled on Android.
+         */
+        this.enableHaptics = false;
         this.ariaLabel = null;
         this.isActive = false;
         /**
@@ -51,6 +57,12 @@ export class PickerColumn {
                      */
                     this.canExitInputMode = canExitInputMode;
                     this.updateValueTextOnScroll = false;
+                    /**
+                     * This scroll takes over from whatever the user was doing, so an outside
+                     * press must not commit an option the column is only passing through.
+                     */
+                    this.isUserScroll = false;
+                    this.stopWatchingForOutsidePress();
                     scrollEl.scroll({
                         top,
                         left: 0,
@@ -105,6 +117,117 @@ export class PickerColumn {
             }
             this.isActive = state;
         };
+        this.clearScrollEndTimeout = () => {
+            if (this.scrollEndTimeout) {
+                clearTimeout(this.scrollEndTimeout);
+                this.scrollEndTimeout = undefined;
+            }
+        };
+        /**
+         * Resets the idle timer that commits the centered option.
+         */
+        this.resetScrollEndTimeout = () => {
+            this.clearScrollEndTimeout();
+            this.scrollEndTimeout = setTimeout(this.settle, SCROLL_END_DELAY);
+        };
+        /**
+         * Capture so the column still commits if an application's own pointerdown
+         * handler stops the event before it reaches the document.
+         */
+        this.watchForOutsidePress = () => {
+            doc?.addEventListener('pointerdown', this.onPointerDownOutside, { capture: true });
+        };
+        this.stopWatchingForOutsidePress = () => {
+            doc?.removeEventListener('pointerdown', this.onPointerDownOutside, { capture: true });
+        };
+        /**
+         * Resets everything the current scroll interaction is holding, so nothing
+         * pending on it can commit later.
+         */
+        this.discardScroll = () => {
+            this.stopWatchingForOutsidePress();
+            this.clearScrollEndTimeout();
+            this.scrollEndCallback = undefined;
+            this.centeredOption = undefined;
+            this.haltedAtScrollTop = undefined;
+            this.isScrolling = false;
+            this.isUserScroll = false;
+            this.canExitInputMode = true;
+        };
+        /**
+         * Commits the option that is currently centered under the highlight and ends
+         * the scroll interaction.
+         */
+        this.settle = () => {
+            const { centeredOption } = this;
+            this.clearScrollEndTimeout();
+            this.stopWatchingForOutsidePress();
+            this.isUserScroll = false;
+            this.isScrolling = false;
+            this.updateValueTextOnScroll = true;
+            this.enableHaptics && hapticSelectionEnd();
+            /**
+             * Certain tasks (such as those that
+             * cause re-renders) should only be done
+             * once scrolling has finished, otherwise
+             * flickering may occur.
+             */
+            const { scrollEndCallback } = this;
+            if (scrollEndCallback) {
+                scrollEndCallback();
+                this.scrollEndCallback = undefined;
+            }
+            /**
+             * Reset this flag as the
+             * next scroll interaction could
+             * be a scroll from the user. In this
+             * case, we should exit input mode.
+             */
+            this.canExitInputMode = true;
+            if (centeredOption !== undefined) {
+                // Cleared here so a later scroll that centers nothing cannot fall back on it.
+                this.centeredOption = undefined;
+                if (centeredOption.isConnected) {
+                    this.setValue(centeredOption.value);
+                }
+            }
+        };
+        /**
+         * Commits the option the user can see when they press anything outside of the
+         * column during a scroll they started. This runs on pointerdown rather than
+         * click so the value is up to date by the time an application's own click
+         * handler (a Save button, for example) reads it.
+         */
+        this.onPointerDownOutside = (ev) => {
+            const { centeredOption, parentEl, scrollEl } = this;
+            if (!this.isScrolling) {
+                return;
+            }
+            /**
+             * The column can live in another component's Shadow DOM, where a document
+             * listener sees the target retargeted to the outer host. The composed path
+             * is the only reliable way to tell a press on the column apart.
+             */
+            const path = ev.composedPath();
+            /**
+             * A press anywhere in the parent picker counts as inside, so reaching for a
+             * sibling wheel leaves this column coasting.
+             */
+            if (path.includes(this.el) || (parentEl != null && path.includes(parentEl))) {
+                return;
+            }
+            /**
+             * Landing on the centered option halts the in-flight momentum scroll, so the
+             * committed value and the option the user is left looking at agree. The
+             * option list can be replaced mid-scroll, and a detached option has no
+             * offset to center on.
+             */
+            if (centeredOption !== undefined && centeredOption.isConnected) {
+                this.centerPickerItemInView(centeredOption, false, false);
+                this.haltedAtScrollTop = scrollEl?.scrollTop;
+            }
+            this.settle();
+        };
         /**
          * When the column scrolls, the component
          * needs to determine which item is centered
@@ -112,27 +235,42 @@ export class PickerColumn {
          * the item object.
          */
         this.initializeScrollListener = () => {
-            /**
-             * The haptics for the wheel picker are
-             * an iOS-only feature. As a result, they should
-             * be disabled on Android.
-             */
-            const enableHaptics = isPlatform('ios');
+            this.enableHaptics = isPlatform('ios');
             const { el, scrollEl } = this;
-            let timeout;
             let activeEl = this.activeItem;
             const scrollCallback = () => {
                 raf(() => {
-                    if (!scrollEl)
+                    /**
+                     * This frame cannot be cancelled, and moving the column disconnects it
+                     * without the observer reporting a change, so this checks live state.
+                     */
+                    if (!this.el.isConnected || !this.isColumnVisible || !scrollEl)
                         return;
-                    if (timeout) {
-                        clearTimeout(timeout);
-                        timeout = undefined;
+                    const { haltedAtScrollTop } = this;
+                    if (haltedAtScrollTop !== undefined) {
+                        /**
+                         * Still at the halted position, so this frame is the halt landing
+                         * rather than the wheel moving, and re-arming would start a second
+                         * commit cycle.
+                         */
+                        if (Math.abs(scrollEl.scrollTop - haltedAtScrollTop) <= HALT_TOLERANCE)
+                            return;
+                        this.haltedAtScrollTop = undefined;
                     }
+                    // Armed before the early returns below, so a scroll never ends uncommitted.
+                    this.resetScrollEndTimeout();
                     if (!this.isScrolling) {
-                        enableHaptics && hapticSelectionStart();
+                        this.enableHaptics && hapticSelectionStart();
                         this.isScrolling = true;
                     }
+                    /**
+                     * Only a user-driven scroll holds an uncommitted selection. Checked every
+                     * frame because the user can take hold of the wheel mid-scroll, and
+                     * re-adding the same listener is a no-op.
+                     */
+                    if (this.isUserScroll) {
+                        this.watchForOutsidePress();
+                    }
                     /**
                      * Select item in the center of the column
                      * which is the month/year that we want to select
@@ -192,18 +330,23 @@ export class PickerColumn {
                             newActiveElement = fallbackActiveElement;
                         }
                     }
-                    if (activeEl !== undefined) {
-                        this.setPickerItemActiveState(activeEl, false);
-                    }
+                    /**
+                     * A scroll can land with no selectable option centered, such as an
+                     * overscroll bounce briefly centering the empty padding rows. Keep the
+                     * current selection until an option is centered again.
+                     */
                     if (newActiveElement === undefined || newActiveElement.disabled) {
                         return;
                     }
+                    if (activeEl !== undefined) {
+                        this.setPickerItemActiveState(activeEl, false);
+                    }
                     /**
                      * If we are selecting a new value,
                      * we need to run haptics again.
                      */
                     if (newActiveElement !== activeEl) {
-                        enableHaptics && hapticSelectionChanged();
+                        this.enableHaptics && hapticSelectionChanged();
                         if (this.canExitInputMode) {
                             /**
                              * The native iOS wheel picker
@@ -235,32 +378,14 @@ export class PickerColumn {
                     if (this.updateValueTextOnScroll) {
                         this.assistiveFocusable?.setAttribute('aria-valuetext', this.getOptionValueText(newActiveElement));
                     }
-                    timeout = setTimeout(() => {
-                        this.isScrolling = false;
-                        this.updateValueTextOnScroll = true;
-                        enableHaptics && hapticSelectionEnd();
-                        /**
-                         * Certain tasks (such as those that
-                         * cause re-renders) should only be done
-                         * once scrolling has finished, otherwise
-                         * flickering may occur.
-                         */
-                        const { scrollEndCallback } = this;
-                        if (scrollEndCallback) {
-                            scrollEndCallback();
-                            this.scrollEndCallback = undefined;
-                        }
-                        /**
-                         * Reset this flag as the
-                         * next scroll interaction could
-                         * be a scroll from the user. In this
-                         * case, we should exit input mode.
-                         */
-                        this.canExitInputMode = true;
-                        this.setValue(newActiveElement.value);
-                    }, 250);
+                    this.centeredOption = newActiveElement;
                 });
             };
+            const userScrollCallback = () => {
+                this.isUserScroll = true;
+                // Taking hold of the wheel ends the halt even if it has not moved yet.
+                this.haltedAtScrollTop = undefined;
+            };
             /**
              * Wrap this in an raf so that the scroll callback
              * does not fire when component is initially shown.
@@ -269,8 +394,19 @@ export class PickerColumn {
                 if (!scrollEl)
                     return;
                 scrollEl.addEventListener('scroll', scrollCallback);
+                scrollEl.addEventListener('pointerdown', userScrollCallback);
+                scrollEl.addEventListener('wheel', userScrollCallback, { passive: true });
+                /**
+                 * A `pointerdown` fires once per touch, so a drag that pauses long enough
+                 * to commit would look like a scroll the column started. A `touchmove`
+                 * keeps arriving while the finger moves.
+                 */
+                scrollEl.addEventListener('touchmove', userScrollCallback, { passive: true });
                 this.destroyScrollListener = () => {
                     scrollEl.removeEventListener('scroll', scrollCallback);
+                    scrollEl.removeEventListener('pointerdown', userScrollCallback);
+                    scrollEl.removeEventListener('wheel', userScrollCallback);
+                    scrollEl.removeEventListener('touchmove', userScrollCallback);
                 };
             });
         };
@@ -455,6 +591,14 @@ export class PickerColumn {
             }
             else {
                 this.isColumnVisible = false;
+                /**
+                 * The pending timer still runs so it resets the scroll state, but the
+                 * option it would have committed is dropped. A column the user cannot
+                 * see should not change its value.
+                 */
+                this.stopWatchingForOutsidePress();
+                this.centeredOption = undefined;
+                this.haltedAtScrollTop = undefined;
                 if (this.destroyScrollListener) {
                     this.destroyScrollListener();
                     this.destroyScrollListener = undefined;
@@ -525,6 +669,13 @@ export class PickerColumn {
     connectedCallback() {
         this.ariaLabel = this.el.getAttribute('aria-label') ?? 'Select a value';
     }
+    disconnectedCallback() {
+        /**
+         * A pending settle would otherwise commit a value on a column that is no
+         * longer in the DOM.
+         */
+        this.discardScroll();
+    }
     get activeItem() {
         const { value } = this;
         const options = Array.from(this.el.querySelectorAll('ion-picker-column-option'));
@@ -542,14 +693,14 @@ export class PickerColumn {
     render() {
         const { color, disabled, isActive, numericInput } = this;
         const mode = getIonMode(this);
-        return (h(Host, { key: '78b46ad10d88ea1bb43ca8c36748767912f03224', class: createColorClasses(color, {
+        return (h(Host, { key: '60a893619d0b01fba53fbccef67a10d533a22657', class: createColorClasses(color, {
                 [mode]: true,
                 ['picker-column-active']: isActive,
                 ['picker-column-numeric-input']: numericInput,
                 ['picker-column-disabled']: disabled,
-            }) }, h("slot", { key: '761e501df77f7de896ffb3ebb99ebf88c5c3bf70', name: "prefix" }), h("div", { key: '9f4caaeef8ab704522a85f30876d371712f47c5c', class: "picker-opts", ref: (el) => {
+            }) }, h("slot", { key: '79f1e047f89c5ec916ed02efaac56ef3f73b8969', name: "prefix" }), h("div", { key: 'c45c86e88353a196ff38159f40f390bc27852c9e', class: "picker-opts", ref: (el) => {
                 this.scrollEl = el;
-            }, role: "slider", tabindex: this.disabled ? undefined : 0, "aria-label": this.ariaLabel, "aria-valuemin": 0, "aria-valuemax": 0, "aria-valuenow": 0, "aria-valuetext": this.getOptionValueText(this.activeItem), "aria-orientation": "vertical", onKeyDown: (ev) => this.onKeyDown(ev) }, h("div", { key: '9d3533436aba6c61c93f65f84a077fba832194a0', class: "picker-item-empty", "aria-hidden": "true" }, "\u00A0"), h("div", { key: '3f18d3a47361f06f55321b65fdf5742a61722b26', class: "picker-item-empty", "aria-hidden": "true" }, "\u00A0"), h("div", { key: 'eac0d20ab8c533ef829875e323e93e1ee2067d6d', class: "picker-item-empty", "aria-hidden": "true" }, "\u00A0"), h("slot", { key: '92e25989ef41cf6f910c73238e1a0a5ac03f1c1f' }), h("div", { key: '33a84644ebdc84108b44a8e3a129b54e824939c8', class: "picker-item-empty", "aria-hidden": "true" }, "\u00A0"), h("div", { key: '128ad61a3a68c7ff2d2e44a6e968424fcc608a15', class: "picker-item-empty", "aria-hidden": "true" }, "\u00A0"), h("div", { key: '6e4d59a4f75befcbbf47279a263f28a69b12dbbd', class: "picker-item-empty", "aria-hidden": "true" }, "\u00A0")), h("slot", { key: '3c6621b64438792a3024c90e3d9916a0a3614506', name: "suffix" })));
+            }, role: "slider", tabindex: this.disabled ? undefined : 0, "aria-label": this.ariaLabel, "aria-valuemin": 0, "aria-valuemax": 0, "aria-valuenow": 0, "aria-valuetext": this.getOptionValueText(this.activeItem), "aria-orientation": "vertical", onKeyDown: (ev) => this.onKeyDown(ev) }, h("div", { key: 'e02d76752f5d3dd4cd2846fbc28645f1508a4b49', class: "picker-item-empty", "aria-hidden": "true" }, "\u00A0"), h("div", { key: 'd577bcbadc530970b2781692b050811633625c5a', class: "picker-item-empty", "aria-hidden": "true" }, "\u00A0"), h("div", { key: 'c89e78c3a896bc1f55b922d01df16fdbb1259bdd', class: "picker-item-empty", "aria-hidden": "true" }, "\u00A0"), h("slot", { key: '6c597ff899692597432ee2aa0b42de53b86deed4' }), h("div", { key: '91686ed94f14c47647836ed4d63e54b5c54ee3b9', class: "picker-item-empty", "aria-hidden": "true" }, "\u00A0"), h("div", { key: '2ff058c6d0e8cef4e143c2d848f9a52684579af1', class: "picker-item-empty", "aria-hidden": "true" }, "\u00A0"), h("div", { key: 'bc7386bec6fced36e44084a7a137b3fe6506c996', class: "picker-item-empty", "aria-hidden": "true" }, "\u00A0")), h("slot", { key: '8835fd3f4e025bce964e6f05984c9aaadc20d7fb', name: "suffix" })));
     }
     static get is() { return "ion-picker-column"; }
     static get encapsulation() { return "shadow"; }
@@ -773,3 +924,16 @@ export class PickerColumn {
     }
 }
 const PICKER_ITEM_ACTIVE_CLASS = 'option-active';
+/**
+ * How long the column must be idle before the centered option is treated as
+ * the user's selection. Replaceable by the `scrollend` event once that is
+ * supported everywhere (https://caniuse.com/?search=scrollend).
+ */
+const SCROLL_END_DELAY = 250;
+/**
+ * How far, in pixels, the column may report from where it was halted and still
+ * count as having stayed there. Centering targets a position between two snap
+ * points, so mandatory snapping corrects it by half the column height less
+ * three option heights: 2px at the default sizes.
+ */
+const HALT_TOLERANCE = 2;