Merge branch 'feature-8.7' into FW-6539

Author: brandyscarney

CHANGELOG.md

@@ -3,6 +3,18 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [8.6.2](https://github.com/ionic-team/ionic-framework/compare/v8.6.1...v8.6.2) (2025-06-18)
+
+
+### Bug Fixes
+
+* **picker-column:** fallback to elementFromPoint for iOS 16 Shadow DOM bug ([#30479](https://github.com/ionic-team/ionic-framework/issues/30479)) ([6ae2907](https://github.com/ionic-team/ionic-framework/commit/6ae29077424434f3523d75426f3328765a4797f4)), closes [#29672](https://github.com/ionic-team/ionic-framework/issues/29672)
+* **range:** improve focus and blur handling for dual knobs ([#30482](https://github.com/ionic-team/ionic-framework/issues/30482)) ([6811fe5](https://github.com/ionic-team/ionic-framework/commit/6811fe5cc88f132f998476a3f4b956ce21122631))
+
+
+
+
+
 ## [8.6.1](https://github.com/ionic-team/ionic-framework/compare/v8.6.0...v8.6.1) (2025-06-11)
 
 

core/CHANGELOG.md

@@ -3,6 +3,18 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [8.6.2](https://github.com/ionic-team/ionic-framework/compare/v8.6.1...v8.6.2) (2025-06-18)
+
+
+### Bug Fixes
+
+* **picker-column:** fallback to elementFromPoint for iOS 16 Shadow DOM bug ([#30479](https://github.com/ionic-team/ionic-framework/issues/30479)) ([6ae2907](https://github.com/ionic-team/ionic-framework/commit/6ae29077424434f3523d75426f3328765a4797f4)), closes [#29672](https://github.com/ionic-team/ionic-framework/issues/29672)
+* **range:** improve focus and blur handling for dual knobs ([#30482](https://github.com/ionic-team/ionic-framework/issues/30482)) ([6811fe5](https://github.com/ionic-team/ionic-framework/commit/6811fe5cc88f132f998476a3f4b956ce21122631))
+
+
+
+
+
 ## [8.6.1](https://github.com/ionic-team/ionic-framework/compare/v8.6.0...v8.6.1) (2025-06-11)
 
 

core/package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "@ionic/core",
-  "version": "8.6.1",
+  "version": "8.6.2",
   "description": "Base components for Ionic",
   "keywords": [
     "ionic",

core/package.json

@@ -376,7 +376,27 @@ export class PickerColumn implements ComponentInterface {
          * elementsFromPoint can returns multiple elements
          * so find the relevant picker column option if one exists.
          */
-        const newActiveElement = elementsAtPoint.find((el) => el.tagName === 'ION-PICKER-COLUMN-OPTION');
+        let newActiveElement = elementsAtPoint.find((el) => el.tagName === 'ION-PICKER-COLUMN-OPTION');
+
+        /**
+         * TODO(FW-6594): Remove this workaround when iOS 16 is no longer
+         * supported.
+         *
+         * If `elementsFromPoint` failed to find the active element (a known
+         * issue on iOS 16 when elements are in a Shadow DOM and the
+         * referenceNode is the document), a fallback to `elementFromPoint`
+         * is used. While `elementsFromPoint` returns all elements,
+         * `elementFromPoint` returns only the top-most, which is sufficient
+         * for this use case and appears to handle Shadow DOM retargeting
+         * more reliably in this specific iOS bug.
+         */
+        if (newActiveElement === undefined) {
+          const fallbackActiveElement = referenceNode.elementFromPoint(centerX, centerY);
+
+          if (fallbackActiveElement?.tagName === 'ION-PICKER-COLUMN-OPTION') {
+            newActiveElement = fallbackActiveElement as HTMLIonPickerColumnOptionElement;
+          }
+        }
 
         if (activeEl !== undefined) {
           this.setPickerItemActiveState(activeEl, false);

core/src/components/picker-column/picker-column.tsx

@@ -639,6 +639,51 @@ export class Range implements ComponentInterface {
     }
   };
 
+  private onKnobFocus = (knob: KnobName) => {
+    if (!this.hasFocus) {
+      this.hasFocus = true;
+      this.ionFocus.emit();
+    }
+
+    // Manually manage ion-focused class for dual knobs
+    if (this.dualKnobs && this.el.shadowRoot) {
+      const knobA = this.el.shadowRoot.querySelector('.range-knob-a');
+      const knobB = this.el.shadowRoot.querySelector('.range-knob-b');
+
+      // Remove ion-focused from both knobs first
+      knobA?.classList.remove('ion-focused');
+      knobB?.classList.remove('ion-focused');
+
+      // Add ion-focused only to the focused knob
+      const focusedKnobEl = knob === 'A' ? knobA : knobB;
+      focusedKnobEl?.classList.add('ion-focused');
+    }
+  };
+
+  private onKnobBlur = () => {
+    // Check if focus is moving to another knob within the same range
+    // by delaying the reset to allow the new focus to register
+    setTimeout(() => {
+      const activeElement = this.el.shadowRoot?.activeElement;
+      const isStillFocusedOnKnob = activeElement && activeElement.classList.contains('range-knob-handle');
+
+      if (!isStillFocusedOnKnob) {
+        if (this.hasFocus) {
+          this.hasFocus = false;
+          this.ionBlur.emit();
+        }
+
+        // Remove ion-focused from both knobs when focus leaves the range
+        if (this.dualKnobs && this.el.shadowRoot) {
+          const knobA = this.el.shadowRoot.querySelector('.range-knob-a');
+          const knobB = this.el.shadowRoot.querySelector('.range-knob-b');
+          knobA?.classList.remove('ion-focused');
+          knobB?.classList.remove('ion-focused');
+        }
+      }
+    }, 0);
+  };
+
   /**
    * Returns true if content was passed to the "start" slot
    */
@@ -813,6 +858,8 @@ export class Range implements ComponentInterface {
           min,
           max,
           inheritedAttributes,
+          onKnobFocus: this.onKnobFocus,
+          onKnobBlur: this.onKnobBlur,
         })}
 
         {this.dualKnobs &&
@@ -828,6 +875,8 @@ export class Range implements ComponentInterface {
             min,
             max,
             inheritedAttributes,
+            onKnobFocus: this.onKnobFocus,
+            onKnobBlur: this.onKnobBlur,
           })}
       </div>
     );
@@ -908,11 +957,27 @@ interface RangeKnob {
   pinFormatter: PinFormatter;
   inheritedAttributes: Attributes;
   handleKeyboard: (name: KnobName, isIncrease: boolean) => void;
+  onKnobFocus: (knob: KnobName) => void;
+  onKnobBlur: () => void;
 }
 
 const renderKnob = (
   rtl: boolean,
-  { knob, value, ratio, min, max, disabled, pressed, pin, handleKeyboard, pinFormatter, inheritedAttributes }: RangeKnob
+  {
+    knob,
+    value,
+    ratio,
+    min,
+    max,
+    disabled,
+    pressed,
+    pin,
+    handleKeyboard,
+    pinFormatter,
+    inheritedAttributes,
+    onKnobFocus,
+    onKnobBlur,
+  }: RangeKnob
 ) => {
   const start = rtl ? 'right' : 'left';
 
@@ -941,6 +1006,8 @@ const renderKnob = (
           ev.stopPropagation();
         }
       }}
+      onFocus={() => onKnobFocus(knob)}
+      onBlur={onKnobBlur}
       class={{
         'range-knob-handle': true,
         'range-knob-a': knob === 'A',

core/src/components/range/range.tsx

@@ -80,6 +80,10 @@ <h2>Pin</h2>
         lower: '10',
         upper: '90',
       };
+
+      dualKnobs.addEventListener('ionFocus', () => {
+        console.log('Dual Knob ionFocus', dualKnobs.value);
+      });
     </script>
   </body>
 </html>