@octane-xplat/patches 0.9.0 → 0.10.0

package/patches/@nativescript__core@9.1.3-next.2.patch

@@ -1,3 +1,15 @@
+diff --git a/application/application.windows.js b/application/application.windows.js
+index 599c126890de6173fbfadc4cca4bb061e311f749..21b1b14884cc61d2e931416c4121883c1ffba4e5 100644
+--- a/application/application.windows.js
++++ b/application/application.windows.js
+@@ -338,6 +338,7 @@ function updateAccessibilityProperties(view) {
+     if (!view || !view.nativeViewProtected) {
+         return;
+     }
++    Microsoft.UI.Xaml.Automation.AutomationProperties.SetName(view.nativeViewProtected, view.accessibilityLabel ?? '');
+ }
+ setA11yUpdatePropertiesCallback(updateAccessibilityProperties);
+ const applicationEvents = [Application.orientationChangedEvent, Application.systemAppearanceChangedEvent];
 diff --git a/css/css-tree-parser.js b/css/css-tree-parser.js
 index 0c13e7e67a8eb306248d738bb73189b772b4a409..7ce38a9ba8f1f9aef709136b46f8e5b2435ba714 100644
 --- a/css/css-tree-parser.js
@@ -47,6 +59,247 @@ index 3ac4f618f307864cb95b70cd01f4ecdc42c9d9e4..1906ed1457de195a799c9e938136f078
  export interface StyleSheet {
      rules: Rule[];
  }
+diff --git a/ui/core/properties/index.js b/ui/core/properties/index.js
+index 333ac76a172c54da8049ed6807439fa52d09a0aa..0974c33b80b8f25d0542487c7f231bdf2d6ec682 100644
+--- a/ui/core/properties/index.js
++++ b/ui/core/properties/index.js
+@@ -280,7 +280,7 @@ export class Property {
+         };
+         const property = this;
+         this.set = function (boxedValue, origin) {
+-            const reset = isResetValue(boxedValue);
++            const reset = boxedValue === unsetValue;
+             let value;
+             let wrapped;
+             if (reset) {
+@@ -446,7 +446,7 @@ export class CoercibleProperty extends Property {
+             target[propertyName] = originalValue;
+         };
+         this.set = function (boxedValue) {
+-            const reset = isResetValue(boxedValue);
++            const reset = boxedValue === unsetValue;
+             let value;
+             let wrapped;
+             if (reset) {
+@@ -542,7 +542,7 @@ export class InheritedProperty extends Property {
+             const that = this;
+             let unboxedValue;
+             let newValueSource;
+-            if (isResetValue(value)) {
++            if (value === unsetValue) {
+                 const parent = that.parent;
+                 // If value is not initial or unset and view has a parent that has non-default value, use it as the reset value.
+                 if (value !== 'initial' && parent && parent[sourceKey] !== 0 /* ValueSource.Default */) {
+diff --git a/ui/core/view/index.windows.d.ts b/ui/core/view/index.windows.d.ts
+index 8c55d09f9cf58714b8981ebbe33d5989e295a8b9..81555e90bee14d3b3ed47c925f3dc1b1de92300b 100644
+--- a/ui/core/view/index.windows.d.ts
++++ b/ui/core/view/index.windows.d.ts
+@@ -1,7 +1,8 @@
+ export * from './view-common';
+ export * from './view-helper';
+ export * from '../properties';
+-import { ViewCommon, originXProperty, originYProperty } from './view-common';
++import { ViewCommon, originXProperty, originYProperty, isEnabledProperty } from './view-common';
++import { accessibilityLabelProperty } from '../../../accessibility/accessibility-properties';
+ import type { CoreTypes } from '../../../core-types';
+ import { visibilityProperty, opacityProperty, backgroundInternalProperty, translateXProperty, translateYProperty, scaleXProperty, scaleYProperty, rotateProperty, rotateXProperty, rotateYProperty, perspectiveProperty, horizontalAlignmentProperty, verticalAlignmentProperty, paddingTopProperty, paddingRightProperty, paddingBottomProperty, paddingLeftProperty } from '../../styling/style-properties';
+ import { widthProperty, heightProperty, minWidthProperty, minHeightProperty, marginLeftProperty, marginTopProperty, marginRightProperty, marginBottomProperty } from '../../styling/style-properties';
+@@ -13,6 +14,8 @@ export declare function _ensureNativeTransforms(native: any): {
+     translate: any;
+ } | null;
+ export declare class View extends ViewCommon {
++    [isEnabledProperty.setNative]: (value: boolean) => void;
++    [accessibilityLabelProperty.setNative]: (_value: string) => void;
+     [backgroundInternalProperty.getDefault]: () => any;
+     [backgroundInternalProperty.setNative]: (value: any) => void;
+     [widthProperty.setNative]: (value: CoreTypes.PercentLengthType) => void;
+diff --git a/ui/core/view/index.windows.js b/ui/core/view/index.windows.js
+index 9adf9e78c4714b02c8fa53b45fc7c53e7f93a72d..20826905d88ff7a7634ae6f20325a3c2e0097ada 100644
+--- a/ui/core/view/index.windows.js
++++ b/ui/core/view/index.windows.js
+@@ -1,7 +1,9 @@
+ export * from './view-common';
+ export * from './view-helper';
+ export * from '../properties';
+-import { ViewCommon, originXProperty, originYProperty } from './view-common';
++import { ViewCommon, originXProperty, originYProperty, isEnabledProperty } from './view-common';
++import { accessibilityLabelProperty } from '../../../accessibility/accessibility-properties';
++import { updateA11yPropertiesCallback } from '../../../application/helpers-common';
+ import { visibilityProperty, opacityProperty, backgroundInternalProperty, translateXProperty, translateYProperty, scaleXProperty, scaleYProperty, rotateProperty, rotateXProperty, rotateYProperty, perspectiveProperty, horizontalAlignmentProperty, verticalAlignmentProperty, paddingTopProperty, paddingRightProperty, paddingBottomProperty, paddingLeftProperty } from '../../styling/style-properties';
+ import { widthProperty, heightProperty, minWidthProperty, minHeightProperty, marginLeftProperty, marginTopProperty, marginRightProperty, marginBottomProperty } from '../../styling/style-properties';
+ import { layout } from '../../../utils';
+@@ -645,6 +647,10 @@ export class View extends ViewCommon {
+         this._nativeBackgroundState = 'invalid';
+         this._percentWidth = null; // null = not set
+         this._percentHeight = null;
++        this._percentParent = null;
++        this._percentSizingGeneration = 0;
++        this._percentSizingPending = false;
++        this._percentParentChanged = () => this._schedulePercentSizing();
+         // Held SizeChanged delegate (prevents GC; see _ensureSizeWatch).
+         this._sizeChangedDelegate = null;
+         this._sizeWatchWired = false;
+@@ -1164,6 +1170,15 @@ export class View extends ViewCommon {
+         })
+             .catch(() => { });
+     }
++    [isEnabledProperty.setNative](value) {
++        const native = this.nativeViewProtected;
++        if (native && typeof native.IsEnabled !== 'undefined') {
++            native.IsEnabled = value;
++        }
++    }
++    [accessibilityLabelProperty.setNative](_value) {
++        updateA11yPropertiesCallback(this);
++    }
+     initNativeView() {
+         super.initNativeView();
+         // Size-dependent work (percent sizing, border/shadow/clip redraw) is wired ON DEMAND via
+@@ -1173,6 +1188,56 @@ export class View extends ViewCommon {
+             this._ensureSizeWatch();
+         }
+     }
++    onLoaded() {
++        super.onLoaded();
++        this._syncPercentParent();
++    }
++    onUnloaded() {
++        this._clearPercentParent();
++        super.onUnloaded();
++    }
++    _parentChanged(oldParent) {
++        super._parentChanged(oldParent);
++        this._syncPercentParent();
++    }
++    _clearPercentParent() {
++        this._percentSizingGeneration++;
++        this._percentSizingPending = false;
++        this._percentParent?.off(ViewCommon.layoutChangedEvent, this._percentParentChanged);
++        for (const eventName of ['paddingLeftChange', 'paddingRightChange', 'paddingTopChange', 'paddingBottomChange']) {
++            this._percentParent?.style.off(eventName, this._percentParentChanged);
++        }
++        this._percentParent = null;
++    }
++    _syncPercentParent() {
++        const parent = this.isLoaded && (this._percentWidth != null || this._percentHeight != null) && this.parent instanceof View ? this.parent : null;
++        if (parent !== this._percentParent) {
++            this._clearPercentParent();
++            this._percentParent = parent;
++            // Core Observable multiplexes listeners over the parent's existing deferred size watch.
++            parent?.on(ViewCommon.layoutChangedEvent, this._percentParentChanged);
++            for (const eventName of ['paddingLeftChange', 'paddingRightChange', 'paddingTopChange', 'paddingBottomChange']) {
++                parent?.style.on(eventName, this._percentParentChanged);
++            }
++        }
++        if (parent)
++            this._schedulePercentSizing();
++    }
++    _schedulePercentSizing() {
++        if (this._percentSizingPending)
++            return;
++        this._percentSizingPending = true;
++        const generation = this._percentSizingGeneration;
++        const ref = new WeakRef(this);
++        setTimeout(() => {
++            const owner = ref.deref();
++            if (!owner || generation !== owner._percentSizingGeneration)
++                return;
++            owner._percentSizingPending = false;
++            if (owner.isLoaded && owner._percentParent === owner.parent)
++                owner._applyPercentSizing();
++        }, 0);
++    }
+     // XAML lays views out natively, so core's own layout pass (and the bounds it records) never runs:
+     // read the bounds off the element. In device pixels relative to the parent, as on Android.
+     _getCurrentLayoutBounds() {
+@@ -1477,6 +1542,7 @@ export class View extends ViewCommon {
+         step();
+     }
+     disposeNativeView() {
++        this._clearPercentParent();
+         const nativeView = this.nativeViewProtected;
+         if (nativeView && this._sizeWatchWired) {
+             nativeView.SizeChanged = null;
+@@ -1484,6 +1550,8 @@ export class View extends ViewCommon {
+         // Reset so a recycled view re-wires on the next size-dependent property set.
+         this._sizeWatchWired = false;
+         this._sizeChangedDelegate = null;
++        this._lastLayoutW = NaN;
++        this._lastLayoutH = NaN;
+         // Its shadow and border overlays are siblings in the old parent.
+         this._viewCompositionHandler?.Free();
+         this._viewCompositionHandler = null;
+@@ -1554,18 +1622,22 @@ export class View extends ViewCommon {
+         }
+         try {
+             const parentNative = this.parent?.nativeViewProtected;
+-            const parentWidth = parentNative?.ActualWidth || 0;
+-            const parentHeight = parentNative?.ActualHeight || 0;
++            const parentStyle = this.parent?.style;
++            // Percentages refer to the content box, including when the parent owns native padding.
++            const parentWidth = Math.max(0, (parentNative?.ActualWidth || 0) - (toXamlLength(parentStyle?.paddingLeft) || 0) - (toXamlLength(parentStyle?.paddingRight) || 0));
++            const parentHeight = Math.max(0, (parentNative?.ActualHeight || 0) - (toXamlLength(parentStyle?.paddingTop) || 0) - (toXamlLength(parentStyle?.paddingBottom) || 0));
+             // Only apply when parent has a real layout size. Using Window.Bounds as fallback when
+             // parent is 0 causes nested height="100%" views to overflow the container and cover
+             // sibling rows; LayoutUpdated fires again once the parent is properly sized.
+-            if (this._percentWidth != null && parentWidth > 0) {
++            if (this._percentWidth != null && parentNative?.ActualWidth > 0) {
+                 const w = parentWidth * (this._percentWidth);
+-                nativeView.Width = isFinite(w) ? w : NaN;
++                if (Math.abs(nativeView.Width - w) >= 0.01 || !isFinite(nativeView.Width))
++                    nativeView.Width = isFinite(w) ? w : NaN;
+             }
+-            if (this._percentHeight != null && parentHeight > 0) {
++            if (this._percentHeight != null && parentNative?.ActualHeight > 0) {
+                 const h = parentHeight * (this._percentHeight);
+-                nativeView.Height = isFinite(h) ? h : NaN;
++                if (Math.abs(nativeView.Height - h) >= 0.01 || !isFinite(nativeView.Height))
++                    nativeView.Height = isFinite(h) ? h : NaN;
+             }
+         }
+         catch (_e) { }
+@@ -1586,10 +1658,12 @@ export class View extends ViewCommon {
+             const pct = value.value;
+             if (this.parent instanceof View && this.parent._setChildPercentSize(this, true, pct)) {
+                 this._percentWidth = null;
++                this._syncPercentParent();
+                 this.nativeViewProtected.Width = NaN;
+                 return;
+             }
+             this._percentWidth = pct;
++            this._syncPercentParent();
+             this._ensureSizeWatch(); // re-apply percent when the parent resizes
+             this.nativeViewProtected.Width = NaN;
+             if (pct >= 1) {
+@@ -1613,6 +1687,7 @@ export class View extends ViewCommon {
+             return;
+         }
+         this._percentWidth = null;
++        this._syncPercentParent();
+         if (this.parent instanceof View)
+             this.parent._setChildPercentSize(this, true, null);
+         // Clear any previously set flex-basis so the C++ widget falls back to DesiredSize.
+@@ -1631,10 +1706,12 @@ export class View extends ViewCommon {
+             const pct = value.value;
+             if (this.parent instanceof View && this.parent._setChildPercentSize(this, false, pct)) {
+                 this._percentHeight = null;
++                this._syncPercentParent();
+                 this.nativeViewProtected.Height = NaN;
+                 return;
+             }
+             this._percentHeight = pct;
++            this._syncPercentParent();
+             this._ensureSizeWatch(); // re-apply percent when the parent resizes
+             this.nativeViewProtected.Height = NaN;
+             if (pct >= 1) {
+@@ -1657,6 +1734,7 @@ export class View extends ViewCommon {
+             return;
+         }
+         this._percentHeight = null;
++        this._syncPercentParent();
+         if (this.parent instanceof View)
+             this.parent._setChildPercentSize(this, false, null);
+         this.nativeViewProtected.Height = toXamlLength(value);
 diff --git a/ui/core/view-base/index.d.ts b/ui/core/view-base/index.d.ts
 index 170ceb1c65bbf17cffb1c648f2cc5c7c21065115..6941110802e2ade9b4d48a172dbb95801bba96d1 100644
 --- a/ui/core/view-base/index.d.ts
@@ -83,6 +336,190 @@ index 5f54440b3a3e0a36ddc0139d49db5cbcd6695b75..580061c78ae9326f733f7ea5ebd0dbf9
      /**
       * Core logic for removing a child view from this instance. Used by the framework to handle lifecycle events more centralized. Do not use outside the UI Stack implementation.
       */
+diff --git a/ui/editable-text-base/index.windows.d.ts b/ui/editable-text-base/index.windows.d.ts
+index 33d2058f382c3c83512209b2e18623a8c653454b..79f0f50310533b9d681fc14017db49909e01c653 100644
+--- a/ui/editable-text-base/index.windows.d.ts
++++ b/ui/editable-text-base/index.windows.d.ts
+@@ -2,8 +2,10 @@ export * from './editable-text-base-common';
+ import { EditableTextBase as EditableTextBaseCommon, autofillTypeProperty, keyboardTypeProperty, returnKeyTypeProperty, editableProperty, autocapitalizationTypeProperty, autocorrectProperty, hintProperty, placeholderColorProperty, maxLengthProperty } from './editable-text-base-common';
+ import { textProperty } from '../text-base';
+ import { Color } from '../../color';
++import { isEnabledProperty } from '../core/view/view-common';
+ export * from './editable-text-base-common';
+ export declare abstract class EditableTextBase extends EditableTextBaseCommon {
++    [isEnabledProperty.setNative]: (_value: boolean) => void;
+     [textProperty.setNative]: (value: string | symbol) => void;
+     [keyboardTypeProperty.getDefault]: () => string;
+     [keyboardTypeProperty.setNative]: (_value: string) => void;
+@@ -18,9 +20,17 @@ export declare abstract class EditableTextBase extends EditableTextBaseCommon {
+     [maxLengthProperty.setNative]: (value: number) => void;
+     nativeViewProtected: Microsoft.UI.Xaml.Controls.TextBox | Microsoft.UI.Xaml.Controls.PasswordBox;
+     private _changeFromCode;
+-    private _textChangeDelegate;
++    private _inputNative;
++    private _inputDisposers;
++    private _focused;
+     initNativeView(): void;
++    onLoaded(): void;
++    onUnloaded(): void;
++    disposeNativeView(): void;
++    private _notifyFocus;
++    private _detachInputListeners;
+     _attachTextChangeListener(): void;
++    protected _updateInputEnabled(): void;
+     private _onNativeTextChanged;
+     dismissSoftInput(): void;
+     focus(): boolean;
+diff --git a/ui/editable-text-base/index.windows.js b/ui/editable-text-base/index.windows.js
+index 1ea9d7502e405266a5369b10eee7b5ce971c7649..0496d481a8bfc9570ca591d8376b2a802f0227dc 100644
+--- a/ui/editable-text-base/index.windows.js
++++ b/ui/editable-text-base/index.windows.js
+@@ -2,47 +2,83 @@ export * from './editable-text-base-common';
+ import { EditableTextBase as EditableTextBaseCommon, autofillTypeProperty, keyboardTypeProperty, returnKeyTypeProperty, editableProperty, autocapitalizationTypeProperty, autocorrectProperty, hintProperty, placeholderColorProperty, maxLengthProperty } from './editable-text-base-common';
+ import { textProperty, resetSymbol } from '../text-base';
+ import { Color } from '../../color';
++import { isEnabledProperty } from '../core/view/view-common';
++import { subscribeNativeEvent } from '../gestures/pointer-events.windows';
+ export * from './editable-text-base-common';
+ export class EditableTextBase extends EditableTextBaseCommon {
+     constructor() {
+         super(...arguments);
+-        // Guards against the native TextChanged firing while we write text from JS (avoids loops).
+         this._changeFromCode = false;
+-        this._textChangeDelegate = null; // held so the handler isn't GC'd (would go dead)
++        this._inputNative = null;
++        this._inputDisposers = [];
++        this._focused = false;
+     }
+     initNativeView() {
+         super.initNativeView();
+         this._attachTextChangeListener();
++        this._updateInputEnabled();
++    }
++    onLoaded() {
++        super.onLoaded();
++        this._attachTextChangeListener();
++    }
++    onUnloaded() {
++        this._detachInputListeners();
++        super.onUnloaded();
++    }
++    disposeNativeView() {
++        this._detachInputListeners();
++        super.disposeNativeView();
++    }
++    _notifyFocus(focused) {
++        if (this._focused === focused)
++            return;
++        this._focused = focused;
++        this.notify({ eventName: focused ? EditableTextBaseCommon.focusEvent : EditableTextBaseCommon.blurEvent, object: this });
++    }
++    _detachInputListeners() {
++        this._inputNative = null;
++        for (const dispose of this._inputDisposers.splice(0))
++            dispose();
++        this._notifyFocus(false);
+     }
+-    // Wires the native text-change event so typing flows back into the framework (valueFormatter,
+-    // `textChange`). Re-callable because TextField swaps its native view on `secure`.
+     _attachTextChangeListener() {
+-        const nv = this.nativeViewProtected;
+-        if (!nv) {
++        const native = this.nativeViewProtected;
++        if (this._inputNative === native)
+             return;
+-        }
++        this._detachInputListeners();
++        if (!native || !this.isLoaded)
++            return;
++        this._inputNative = native;
+         const ref = new WeakRef(this);
+-        const asTextBox = nv;
+-        const asPassword = nv;
+-        if (typeof asTextBox.Text !== 'undefined') {
+-            this._textChangeDelegate = NSWinRT.asDelegate('Microsoft.UI.Xaml.Controls.TextChangedEventHandler', (sender) => {
++        const listen = (name, type, callback) => {
++            this._inputDisposers.push(subscribeNativeEvent(native, name, (sender) => {
+                 const owner = ref.deref();
+-                if (owner)
+-                    owner._onNativeTextChanged(sender.Text ?? '');
+-            });
+-            asTextBox.TextChanged = this._textChangeDelegate;
++                if (owner?.isLoaded && owner._inputNative === native && owner.nativeViewProtected === native)
++                    callback(owner, sender);
++            }, null, (handler) => NSWinRT.asDelegate(type, handler)));
++        };
++        if (typeof native.Text !== 'undefined') {
++            listen('TextChanged', 'Microsoft.UI.Xaml.Controls.TextChangedEventHandler', (owner, sender) => owner._onNativeTextChanged(sender.Text ?? ''));
+         }
+-        else if (typeof asPassword.Password !== 'undefined') {
+-            this._textChangeDelegate = NSWinRT.asDelegate('Microsoft.UI.Xaml.RoutedEventHandler', (sender) => {
+-                const owner = ref.deref();
+-                if (owner)
+-                    owner._onNativeTextChanged(sender.Password ?? '');
+-            });
+-            asPassword.PasswordChanged = this._textChangeDelegate;
++        else {
++            listen('PasswordChanged', 'Microsoft.UI.Xaml.RoutedEventHandler', (owner, sender) => owner._onNativeTextChanged(sender.Password ?? ''));
+         }
++        listen('GotFocus', 'Microsoft.UI.Xaml.RoutedEventHandler', (owner) => owner._notifyFocus(true));
++        listen('LostFocus', 'Microsoft.UI.Xaml.RoutedEventHandler', (owner) => owner._notifyFocus(false));
++    }
++    _updateInputEnabled() {
++        const native = this.nativeViewProtected;
++        if (!native)
++            return;
++        // PasswordBox has no readonly mode; disable it to protect the value.
++        native.IsEnabled = this.isEnabled && (typeof native.Password === 'undefined' || this.editable);
++    }
++    [isEnabledProperty.setNative](_value) {
++        this._updateInputEnabled();
+     }
+     _onNativeTextChanged(rawText) {
+-        if (this._changeFromCode) {
++        if (this._changeFromCode || !this.isEnabled || !this.editable) {
+             return;
+         }
+         let value = rawText;
+@@ -86,19 +122,20 @@ export class EditableTextBase extends EditableTextBaseCommon {
+         }
+     }
+     dismissSoftInput() {
+-        const nativeView = this.nativeViewProtected;
+-        if (nativeView) {
+-            // Toggling focusability is the only way to drop focus from a TextBox/PasswordBox.
+-            nativeView.IsEnabled = false;
+-            nativeView.IsEnabled = true;
++        const native = this.nativeViewProtected;
++        if (!native || !native.IsEnabled || native.FocusState === Microsoft.UI.Xaml.FocusState.Unfocused)
++            return;
++        native.IsEnabled = false;
++        try {
++            this._notifyFocus(false);
++        }
++        finally {
++            this._updateInputEnabled();
+         }
+     }
+     focus() {
+-        const result = super.focus();
+-        if (result && this.nativeViewProtected) {
+-            this.nativeViewProtected.Focus(Microsoft.UI.Xaml.FocusState.Programmatic);
+-        }
+-        return result;
++        const native = this.nativeViewProtected;
++        return !!(this.isLoaded && native?.IsEnabled && native.Focus(Microsoft.UI.Xaml.FocusState.Programmatic));
+     }
+     [keyboardTypeProperty.getDefault]() {
+         return '';
+@@ -118,6 +155,7 @@ export class EditableTextBase extends EditableTextBaseCommon {
+         if (typeof nativeView.IsReadOnly !== 'undefined') {
+             nativeView.IsReadOnly = !value;
+         }
++        this._updateInputEnabled();
+     }
+     [autocapitalizationTypeProperty.setNative](_value) { }
+     [autocorrectProperty.setNative](_value) { }
 diff --git a/ui/frame/frame-common.js b/ui/frame/frame-common.js
 index 8637cacf417baebce945c58681daa86ca83dce46..c06da239d58b6174652b120e024f853f58d2c13f 100644
 --- a/ui/frame/frame-common.js
@@ -163,6 +600,621 @@ index 9ded225f53e4c4af92166a3e019671a1a65a2db2..9a9f5d5f9f891c9bcf6035b0345f4bb2
  export function _popFromFrameStack(frame) {
      if (!frame._isInFrameStack) {
          return;
+diff --git a/ui/gestures/index.windows.d.ts b/ui/gestures/index.windows.d.ts
+index bf1d68d4b7c014d2bc129ca6cea0bc26c722ea9f..cbb3c5109305730bc3ad82513be86794f8e471d3 100644
+--- a/ui/gestures/index.windows.d.ts
++++ b/ui/gestures/index.windows.d.ts
+@@ -8,15 +8,7 @@ export declare function isHovered(view: View): boolean;
+ export declare class GesturesObserver extends GesturesObserverBase {
+     private _onTargetLoaded;
+     private _onTargetUnloaded;
+-    private _pointerPressedHandler;
+-    private _pointerMovedHandler;
+-    private _pointerReleasedHandler;
+-    private _rightTappedHandler;
+-    private _pointerPressedDelegate;
+-    private _pointerMovedDelegate;
+-    private _pointerReleasedDelegate;
+-    private _rightTappedDelegate;
+-    private _usingAddHandler;
++    private _disposers;
+     private _pointerDownMap;
+     private _lastUpTime;
+     private _tapTimeoutId;
+@@ -25,6 +17,7 @@ export declare class GesturesObserver extends GesturesObserverBase {
+     disconnect(): void;
+     private _detach;
+     private _attach;
++    private _onPointerCanceled;
+     androidOnTouchEvent(_motionEvent: any): void;
+     private _onPointerPressed;
+     private _onPointerMoved;
+diff --git a/ui/gestures/index.windows.js b/ui/gestures/index.windows.js
+index ba8319e96ef61748380875267b797e52cdfba252..fccc5ef84929e8c5fc10c2377eb68c5ab9245055 100644
+--- a/ui/gestures/index.windows.js
++++ b/ui/gestures/index.windows.js
+@@ -3,6 +3,7 @@ export * from './gestures-types';
+ export * from './touch-manager';
+ import { GesturesObserverBase, GestureTypes, GestureEvents, GestureStateTypes, toString } from './gestures-common';
+ import * as timer from '../../timer';
++import { subscribeNativeEvent } from './pointer-events.windows';
+ // Per-view hover tracking to enable CSS :hover pseudo-class.
+ const _hoverViews = new WeakSet();
+ let _routedEvents;
+@@ -19,8 +20,10 @@ function routedEvents() {
+                 rightTapped: UIElement.RightTappedEvent,
+                 entered: UIElement.PointerEnteredEvent,
+                 exited: UIElement.PointerExitedEvent,
++                canceled: UIElement.PointerCanceledEvent,
++                captureLost: UIElement.PointerCaptureLostEvent,
+             };
+-            _routedEvents = Object.values(events).every(Boolean) ? events : null;
++            _routedEvents = events;
+         }
+         catch (_e) {
+             _routedEvents = null;
+@@ -28,82 +31,62 @@ function routedEvents() {
+     }
+     return _routedEvents;
+ }
+-function _attachHoverHandlers(view) {
+-    const native = view.nativeViewProtected;
+-    if (!native || native.__ns_hover_attached)
+-        return;
+-    const onEnter = () => {
+-        if (_hoverViews.has(view))
+-            return;
+-        _hoverViews.add(view);
+-        try {
++// Hover belongs to the view, not whichever observer happened to attach last.
++const hoverOwners = new WeakMap();
++function _attachHoverHandlers(view, native) {
++    let owner = hoverOwners.get(view);
++    if (owner && owner.native !== native) {
++        owner.dispose();
++        hoverOwners.delete(view);
++        owner = undefined;
++    }
++    if (!owner) {
++        const onEnter = () => {
++            if (_hoverViews.has(view) || view.isEnabled === false)
++                return;
++            _hoverViews.add(view);
+             view._addVisualState?.('hover');
+-        }
+-        catch (_e) { }
+-        try {
+-            view.notify?.({ eventName: 'mouseEnter', object: view });
+-        }
+-        catch (_e) { }
+-    };
+-    const onLeave = () => {
+-        if (!_hoverViews.has(view))
+-            return;
+-        _hoverViews.delete(view);
+-        try {
++            view.notify({ eventName: 'mouseEnter', object: view });
++        };
++        const onLeave = () => {
++            if (!_hoverViews.has(view))
++                return;
++            _hoverViews.delete(view);
+             view._removeVisualState?.('hover');
+-        }
+-        catch (_e) { }
++            view.notify({ eventName: 'mouseLeave', object: view });
++        };
++        const entered = subscribeNativeEvent(native, 'PointerEntered', onEnter, routedEvents()?.entered, _wrapPointerHandler);
++        let exited;
+         try {
+-            view.notify?.({ eventName: 'mouseLeave', object: view });
++            exited = subscribeNativeEvent(native, 'PointerExited', onLeave, routedEvents()?.exited, _wrapPointerHandler);
+         }
+-        catch (_e) { }
+-    };
+-    const enterDelegate = _wrapPointerHandler(onEnter);
+-    const leaveDelegate = _wrapPointerHandler(onLeave);
+-    let usingAddHandler = false;
+-    try {
+-        const events = routedEvents();
+-        if (!events)
+-            throw new Error('RoutedEvent statics unavailable');
+-        native.AddHandler(events.entered, enterDelegate, true);
+-        native.AddHandler(events.exited, leaveDelegate, true);
+-        usingAddHandler = true;
+-    }
+-    catch (_e) {
+-        try {
+-            _assignPointerHandler(native, 'PointerEntered', enterDelegate);
+-            _assignPointerHandler(native, 'PointerExited', leaveDelegate);
++        catch (error) {
++            entered();
++            throw error;
+         }
+-        catch (_e2) { }
++        owner = { count: 0, native, dispose: () => {
++                try {
++                    entered();
++                }
++                finally {
++                    exited();
++                }
++                onLeave();
++            } };
++        hoverOwners.set(view, owner);
+     }
+-    native.__ns_hover_attached = true;
+-    native.__ns_hover_using_add_handler = usingAddHandler;
+-    native.__ns_hover_enter_fn = onEnter;
+-    native.__ns_hover_leave_fn = onLeave;
+-    native.__ns_hover_enter_delegate = enterDelegate;
+-    native.__ns_hover_leave_delegate = leaveDelegate;
+-}
+-function _detachHoverHandlers(view) {
+-    const native = view.nativeViewProtected;
+-    if (!native || !native.__ns_hover_attached)
+-        return;
+-    const events = routedEvents();
+-    if (native.__ns_hover_using_add_handler && events) {
+-        try {
+-            if (native.__ns_hover_enter_delegate)
+-                native.RemoveHandler(events.entered, native.__ns_hover_enter_delegate);
+-            if (native.__ns_hover_leave_delegate)
+-                native.RemoveHandler(events.exited, native.__ns_hover_leave_delegate);
++    owner.count++;
++    const retained = owner;
++    let disposed = false;
++    return () => {
++        if (disposed)
++            return;
++        disposed = true;
++        if (--retained.count === 0 && hoverOwners.get(view) === retained) {
++            hoverOwners.delete(view);
++            retained.dispose();
+         }
+-        catch (_e) { }
+-    }
+-    native.__ns_hover_attached = false;
+-    native.__ns_hover_using_add_handler = false;
+-    native.__ns_hover_enter_fn = null;
+-    native.__ns_hover_leave_fn = null;
+-    native.__ns_hover_enter_delegate = null;
+-    native.__ns_hover_leave_delegate = null;
+-    _hoverViews.delete(view);
++    };
+ }
+ /** Returns true if the view is currently in a hover state (mouse over). */
+ export function isHovered(view) {
+@@ -118,12 +101,6 @@ function _wrapPointerHandler(fn) {
+ function _wrapRightTappedHandler(fn) {
+     return NSWinRT.asDelegate('Microsoft.UI.Xaml.Input.RightTappedEventHandler', fn);
+ }
+-function _assignPointerHandler(native, prop, del) {
+-    native[prop] = del;
+-}
+-function _assignRightTappedHandler(native, del) {
+-    native.RightTapped = del;
+-}
+ function _executeCallback(observer, args) {
+     if (observer && observer.callback) {
+         observer.callback.call(observer.context, args);
+@@ -176,7 +153,7 @@ export class GesturesObserver extends GesturesObserverBase {
+         super(...arguments);
+         this._onTargetLoaded = null;
+         this._onTargetUnloaded = null;
+-        this._usingAddHandler = false;
++        this._disposers = [];
+         this._pointerDownMap = new Map();
+         this._lastUpTime = 0;
+         this._longPressTimeouts = new Map();
+@@ -196,14 +173,6 @@ export class GesturesObserver extends GesturesObserverBase {
+     }
+     disconnect() {
+         this._detach();
+-        this._pointerPressedHandler = null;
+-        this._pointerMovedHandler = null;
+-        this._pointerReleasedHandler = null;
+-        this._rightTappedHandler = null;
+-        this._pointerPressedDelegate = null;
+-        this._pointerMovedDelegate = null;
+-        this._pointerReleasedDelegate = null;
+-        this._rightTappedDelegate = null;
+         if (this.target) {
+             if (this._onTargetLoaded) {
+                 this.target.off('loaded', this._onTargetLoaded);
+@@ -217,40 +186,17 @@ export class GesturesObserver extends GesturesObserverBase {
+         super.disconnect();
+     }
+     _detach() {
+-        try {
+-            const native = (this.target && this.target.nativeViewProtected);
+-            if (native) {
+-                const events = routedEvents();
+-                if (this._usingAddHandler && events) {
+-                    try {
+-                        if (this._pointerPressedDelegate)
+-                            native.RemoveHandler(events.pressed, this._pointerPressedDelegate);
+-                        if (this._pointerMovedDelegate)
+-                            native.RemoveHandler(events.moved, this._pointerMovedDelegate);
+-                        if (this._pointerReleasedDelegate)
+-                            native.RemoveHandler(events.released, this._pointerReleasedDelegate);
+-                        if (this._rightTappedDelegate)
+-                            native.RemoveHandler(events.rightTapped, this._rightTappedDelegate);
+-                    }
+-                    catch (_e) { }
+-                }
+-                else {
+-                    native.PointerPressed = null;
+-                    native.PointerMoved = null;
+-                    native.PointerReleased = null;
+-                    native.RightTapped = null;
+-                }
++        for (const dispose of this._disposers.splice(0).reverse()) {
++            try {
++                dispose();
+             }
++            catch (_) { }
+         }
+-        catch (_e) { }
+-        if (this.target) {
+-            _detachHoverHandlers(this.target);
+-        }
+-        this._usingAddHandler = false;
+         this._pointerDownMap.clear();
++        this._lastUpTime = 0;
+         this._longPressTimeouts.forEach((id) => timer.clearTimeout(id));
+         this._longPressTimeouts.clear();
+-        if (this._tapTimeoutId) {
++        if (this._tapTimeoutId != null) {
+             timer.clearTimeout(this._tapTimeoutId);
+             this._tapTimeoutId = null;
+         }
+@@ -258,70 +204,56 @@ export class GesturesObserver extends GesturesObserverBase {
+     _attach(target, type) {
+         this._detach();
+         const native = target.nativeViewProtected;
+-        if (!native) {
++        if (!native)
+             return;
+-        }
+-        // Kept across load/unload: a view re-attaches each time it is shown again.
+-        if (!this._pointerPressedDelegate) {
+-            this._pointerPressedHandler = (s, e) => this._onPointerPressed(e || s);
+-            this._pointerReleasedHandler = (s, e) => this._onPointerReleased(e || s);
+-            this._pointerPressedDelegate = _wrapPointerHandler(this._pointerPressedHandler);
+-            this._pointerReleasedDelegate = _wrapPointerHandler(this._pointerReleasedHandler);
+-        }
+-        // Only touch observers report moves; for the others every mouse move would still call into JS.
+-        const wantsMoves = type === GestureTypes.touch;
+-        if (wantsMoves && !this._pointerMovedDelegate) {
+-            this._pointerMovedHandler = (s, e) => this._onPointerMoved(e || s);
+-            this._pointerMovedDelegate = _wrapPointerHandler(this._pointerMovedHandler);
+-        }
+-        // Use AddHandler with handledEventsToo=true so events fire even when Button (and other
+-        // controls) mark pointer events as handled internally.
+-        this._usingAddHandler = false;
++        const events = routedEvents();
++        const subscribe = (name, event, callback, wrap = _wrapPointerHandler) => {
++            this._disposers.push(subscribeNativeEvent(native, name, (sender, args) => callback(args || sender), event, wrap));
++        };
+         try {
+-            const events = routedEvents();
+-            if (!events)
+-                throw new Error('RoutedEvent statics unavailable');
+-            native.AddHandler(events.pressed, this._pointerPressedDelegate, true);
+-            if (wantsMoves)
+-                native.AddHandler(events.moved, this._pointerMovedDelegate, true);
+-            native.AddHandler(events.released, this._pointerReleasedDelegate, true);
+-            this._usingAddHandler = true;
++            subscribe('PointerPressed', events?.pressed, (args) => this._onPointerPressed(args));
++            subscribe('PointerMoved', events?.moved, (args) => this._onPointerMoved(args));
++            subscribe('PointerReleased', events?.released, (args) => this._onPointerReleased(args));
++            subscribe('PointerCanceled', events?.canceled, (args) => this._onPointerCanceled(args));
++            subscribe('PointerCaptureLost', events?.captureLost, (args) => this._onPointerCanceled(args));
++            if (type === GestureTypes.longPress) {
++                subscribe('RightTapped', events?.rightTapped, (args) => this._onRightTapped(args), _wrapRightTappedHandler);
++            }
++            this._disposers.push(_attachHoverHandlers(target, native));
+         }
+-        catch (_e) {
+-            // Fallback: plain property assignment (only one handler per event, can be overwritten).
+-            _assignPointerHandler(native, 'PointerPressed', this._pointerPressedDelegate);
+-            if (wantsMoves)
+-                _assignPointerHandler(native, 'PointerMoved', this._pointerMovedDelegate);
+-            _assignPointerHandler(native, 'PointerReleased', this._pointerReleasedDelegate);
++        catch (error) {
++            this._detach();
++            throw error;
+         }
+-        // RightTapped (mouse right-click) fires longPress for mouse/touchpad users.
+-        if (type === GestureTypes.longPress) {
+-            if (!this._rightTappedDelegate) {
+-                this._rightTappedHandler = (s, e) => this._onRightTapped(e || s);
+-                this._rightTappedDelegate = _wrapRightTappedHandler(this._rightTappedHandler);
+-            }
+-            try {
+-                if (this._usingAddHandler) {
+-                    native.AddHandler(routedEvents().rightTapped, this._rightTappedDelegate, true);
+-                }
+-                else {
+-                    _assignRightTappedHandler(native, this._rightTappedDelegate);
+-                }
++        target.notify({ eventName: GestureEvents.gestureAttached, object: target, type, view: target, windows: native });
++    }
++    _onPointerCanceled(e) {
++        try {
++            const id = extractPointerId(e);
++            if (!this._pointerDownMap.delete(id))
++                return;
++            const timeout = this._longPressTimeouts.get(id);
++            if (timeout != null)
++                timer.clearTimeout(timeout);
++            this._longPressTimeouts.delete(id);
++            this._lastUpTime = 0;
++            if (this.type === GestureTypes.touch) {
++                const relativeTo = this.target?.nativeViewProtected;
++                const point = extractPoint(e, relativeTo);
++                _executeCallback(this, {
++                    type: GestureTypes.touch, view: this.target, object: this.target, windows: e,
++                    eventName: toString(GestureTypes.touch), action: 'cancel',
++                    getPointerCount: () => 1, getActivePointers: () => [new WindowsPointer(id, e, relativeTo)],
++                    getAllPointers: () => [new WindowsPointer(id, e, relativeTo)], getX: () => point.x, getY: () => point.y,
++                });
+             }
+-            catch (_e) { }
+         }
+-        // Always attach hover handlers for CSS :hover and mouseEnter/mouseLeave events.
+-        _attachHoverHandlers(target);
+-        target.notify({
+-            eventName: GestureEvents.gestureAttached,
+-            object: target,
+-            type: type,
+-            view: target,
+-            windows: native,
+-        });
++        catch (_e) { }
+     }
+     androidOnTouchEvent(_motionEvent) { }
+     _onPointerPressed(e) {
++        if (this.target?.isEnabled === false)
++            return;
+         try {
+             const relativeTo = this.target?.nativeViewProtected ?? null;
+             const id = extractPointerId(e);
+@@ -333,6 +265,9 @@ export class GesturesObserver extends GesturesObserverBase {
+             this._pointerDownMap.set(id, { x: pt.x, y: pt.y, t: Date.now(), nativeTs });
+             if (this.type === GestureTypes.longPress) {
+                 const timeoutId = timer.setTimeout(() => {
++                    this._longPressTimeouts.delete(id);
++                    if (this.target?.isEnabled === false || !this._pointerDownMap.has(id))
++                        return;
+                     const args = {
+                         type: GestureTypes.longPress,
+                         view: this.target,
+@@ -349,6 +284,7 @@ export class GesturesObserver extends GesturesObserverBase {
+                 const args = {
+                     type: GestureTypes.touch,
+                     view: this.target,
++                    windows: e,
+                     ios: undefined,
+                     android: undefined,
+                     object: this.target,
+@@ -370,10 +306,20 @@ export class GesturesObserver extends GesturesObserverBase {
+             const relativeTo = this.target?.nativeViewProtected ?? null;
+             const id = extractPointerId(e);
+             const pt = extractPoint(e, relativeTo);
++            const start = this._pointerDownMap.get(id);
++            if (!start)
++                return;
++            if (Math.hypot(pt.x - start.x, pt.y - start.y) >= TAP_SLOP) {
++                const timeout = this._longPressTimeouts.get(id);
++                if (timeout != null)
++                    timer.clearTimeout(timeout);
++                this._longPressTimeouts.delete(id);
++            }
+             if (this.type === GestureTypes.touch) {
+                 const args = {
+                     type: GestureTypes.touch,
+                     view: this.target,
++                    windows: e,
+                     ios: undefined,
+                     android: undefined,
+                     object: this.target,
+@@ -396,6 +342,12 @@ export class GesturesObserver extends GesturesObserverBase {
+             const id = extractPointerId(e);
+             const pt = extractPoint(e, relativeTo);
+             const start = this._pointerDownMap.get(id);
++            if (!start)
++                return;
++            if (this.target?.isEnabled === false) {
++                this._onPointerCanceled(e);
++                return;
++            }
+             const now = Date.now();
+             // Use WinRT hardware timestamps when available so the tap-duration check reflects the actual
+             // gesture time, not V8 scheduling latency. When JS is busy (e.g. processing a navigation),
+@@ -426,56 +378,39 @@ export class GesturesObserver extends GesturesObserverBase {
+                 };
+                 _executeCallback(this, args);
+             }
+-            if (start) {
+-                const dx = pt.x - start.x;
+-                const dy = pt.y - start.y;
+-                const dist = Math.sqrt(dx * dx + dy * dy);
+-                if (dt < DOUBLE_TAP_TIMEOUT && dist < TAP_SLOP) {
+-                    if (this.target.getGestureObservers && this.target.getGestureObservers(GestureTypes.doubleTap) && this.target.getGestureObservers(GestureTypes.doubleTap).length) {
++            const distance = Math.hypot(pt.x - start.x, pt.y - start.y);
++            if (dt < DOUBLE_TAP_TIMEOUT && distance < TAP_SLOP) {
++                const args = {
++                    type: this.type, view: this.target, windows: e, object: this.target,
++                    eventName: toString(this.type), getPointerCount: () => 1,
++                    getX: () => pt.x, getY: () => pt.y,
++                };
++                if (this.type === GestureTypes.tap) {
++                    const doubleTap = this.target.getGestureObservers?.(GestureTypes.doubleTap)?.length;
++                    if (!doubleTap) {
++                        _executeCallback(this, args);
++                    }
++                    else if (this._lastUpTime && now - this._lastUpTime <= DOUBLE_TAP_TIMEOUT) {
++                        timer.clearTimeout(this._tapTimeoutId);
++                        this._tapTimeoutId = null;
++                        this._lastUpTime = 0;
++                    }
++                    else {
++                        this._lastUpTime = now;
+                         this._tapTimeoutId = timer.setTimeout(() => {
+-                            const args = {
+-                                type: GestureTypes.tap,
+-                                view: this.target,
+-                                windows: e,
+-                                object: this.target,
+-                                eventName: toString(GestureTypes.tap),
+-                                getPointerCount: () => 1,
+-                                getX: () => pt.x ?? 0,
+-                                getY: () => pt.y ?? 0,
+-                            };
+-                            _executeCallback(this, args);
++                            this._tapTimeoutId = null;
++                            if (this.target?.isEnabled !== false)
++                                _executeCallback(this, args);
+                         }, DOUBLE_TAP_TIMEOUT);
+                     }
+-                    else {
+-                        const args = {
+-                            type: GestureTypes.tap,
+-                            view: this.target,
+-                            ios: undefined,
+-                            android: undefined,
+-                            object: this.target,
+-                            eventName: toString(GestureTypes.tap),
+-                            getPointerCount: () => 1,
+-                            getX: () => pt.x ?? 0,
+-                            getY: () => pt.y ?? 0,
+-                        };
++                }
++                else if (this.type === GestureTypes.doubleTap) {
++                    if (this._lastUpTime && now - this._lastUpTime <= DOUBLE_TAP_TIMEOUT) {
++                        this._lastUpTime = 0;
+                         _executeCallback(this, args);
+                     }
+-                    if (this.target.getGestureObservers && this.target.getGestureObservers(GestureTypes.doubleTap) && this.target.getGestureObservers(GestureTypes.doubleTap).length) {
+-                        const nowUp = Date.now();
+-                        if (this._lastUpTime && nowUp - this._lastUpTime <= DOUBLE_TAP_TIMEOUT) {
+-                            const args = {
+-                                type: GestureTypes.doubleTap,
+-                                view: this.target,
+-                                windows: e,
+-                                object: this.target,
+-                                eventName: toString(GestureTypes.doubleTap),
+-                                getPointerCount: () => 1,
+-                                getX: () => pt.x ?? 0,
+-                                getY: () => pt.y ?? 0,
+-                            };
+-                            _executeCallback(this, args);
+-                        }
+-                        this._lastUpTime = nowUp;
++                    else {
++                        this._lastUpTime = now;
+                     }
+                 }
+             }
+@@ -484,6 +419,8 @@ export class GesturesObserver extends GesturesObserverBase {
+         catch (_e) { }
+     }
+     _onRightTapped(e) {
++        if (this.target?.isEnabled === false)
++            return;
+         try {
+             const relativeTo = this.target?.nativeViewProtected ?? null;
+             const pt = extractPoint(e, relativeTo);
+@@ -507,4 +444,3 @@ export function observe(target, type, callback, context) {
+     observer.observe(type);
+     return observer;
+ }
+-//# sourceMappingURL=index.windows.js.map
+
+diff --git a/ui/gestures/pointer-events.windows.d.ts b/ui/gestures/pointer-events.windows.d.ts
+new file mode 100644
+index 0000000000000000000000000000000000000000..a355a6930792b05c64f66f9051ad927ba3784dde
+--- /dev/null
++++ b/ui/gestures/pointer-events.windows.d.ts
+@@ -0,0 +1,4 @@
++type Handler = (sender: any, args: any) => void;
++/** Share the bridge's replacement-only event property between independent owners. */
++export declare function subscribeNativeEvent(native: any, name: string, callback: Handler, routedEvent: any, wrap: (handler: Handler) => any): () => void;
++export {};
+diff --git a/ui/gestures/pointer-events.windows.js b/ui/gestures/pointer-events.windows.js
+new file mode 100644
+index 0000000000000000000000000000000000000000..f19ca9970f8f8f7ce8224f516a6bdcea740210bc
+--- /dev/null
++++ b/ui/gestures/pointer-events.windows.js
+@@ -0,0 +1,66 @@
++const nativeEvents = new WeakMap();
++/** Share the bridge's replacement-only event property between independent owners. */
++export function subscribeNativeEvent(native, name, callback, routedEvent, wrap) {
++    let events = nativeEvents.get(native);
++    if (!events) {
++        events = new Map();
++        nativeEvents.set(native, events);
++    }
++    let entry = events.get(name);
++    if (!entry) {
++        const subscribers = new Set();
++        const delegate = wrap((sender, args) => {
++            // Removal during dispatch takes effect immediately; new subscribers wait for the next event.
++            for (const subscription of Array.from(subscribers)) {
++                if (subscribers.has(subscription))
++                    subscription.callback(sender, args);
++            }
++        });
++        let detach;
++        try {
++            if (!routedEvent || typeof native.AddHandler !== 'function')
++                throw new Error('RoutedEvent unavailable');
++            native.AddHandler(routedEvent, delegate, true);
++            detach = () => native.RemoveHandler(routedEvent, delegate);
++        }
++        catch (error) {
++            // A bridge can fail after attaching. Remove that exact delegate before falling back.
++            if (routedEvent && typeof native.AddHandler === 'function') {
++                try {
++                    native.RemoveHandler(routedEvent, delegate);
++                }
++                catch (_) {
++                    // E_NOINTERFACE rejects the delegate projection before registration. For an
++                    // ambiguous failure, do not add a second listener if rollback also failed.
++                    const code = error?.hresult ?? error?.HResult ?? error?.code;
++                    const unsupported = (typeof code === 'number' && (code >>> 0) === 0x80004002) || /E_NOINTERFACE|80004002/i.test(String(error));
++                    if (!unsupported)
++                        throw error;
++                }
++            }
++            native[name] = delegate;
++            detach = () => { native[name] = null; };
++        }
++        entry = { subscribers, detach };
++        events.set(name, entry);
++    }
++    const subscription = { callback };
++    entry.subscribers.add(subscription);
++    let disposed = false;
++    return () => {
++        if (disposed)
++            return;
++        disposed = true;
++        entry.subscribers.delete(subscription);
++        if (!entry.subscribers.size) {
++            try {
++                entry.detach();
++            }
++            finally {
++                events.delete(name);
++                if (!events.size)
++                    nativeEvents.delete(native);
++            }
++        }
++    };
++}
 diff --git a/ui/layouts/flexbox-layout/flexbox-layout-common.js b/ui/layouts/flexbox-layout/flexbox-layout-common.js
 index 50c747a85135d761c1a646a007c4930f790fb0a3..8f3a627224cf903555574480a0cdeba74b1c3e35 100644
 --- a/ui/layouts/flexbox-layout/flexbox-layout-common.js
@@ -426,3 +1478,147 @@ index 66672f1fa5ccb31f06a83a2a21bfe1e5c668712f..1eb3676f0346d7ee21ab7ff1c1b78292
      onSelectedIndexChanged(oldIndex, newIndex) {
          // to be overridden in platform specific files
          this.notify({
+diff --git a/ui/text-field/index.windows.d.ts b/ui/text-field/index.windows.d.ts
+index a88815c17ff87271143e457f7e81e3c651ef0ab3..9c0c2a7db4dcd4bcb185e1e1c0f42cfa1aba53bb 100644
+--- a/ui/text-field/index.windows.d.ts
++++ b/ui/text-field/index.windows.d.ts
+@@ -14,10 +14,16 @@ export declare class TextField extends TextFieldBase {
+     [colorProperty.setNative]: (value: Color | null) => void;
+     nativeViewProtected: Microsoft.UI.Xaml.Controls.TextBox | Microsoft.UI.Xaml.Controls.PasswordBox;
+     private _isSecure;
+-    private _keyDownDelegate;
++    private _returnNative;
++    private _returnDisposer;
+     _attachTextChangeListener: () => void;
++    protected _updateInputEnabled: () => void;
+     createNativeView(): Microsoft.UI.Xaml.Controls.TextBox | Microsoft.UI.Xaml.Controls.PasswordBox;
+     initNativeView(): void;
+     private _neutralizeStateBackgrounds;
++    onLoaded(): void;
++    onUnloaded(): void;
++    disposeNativeView(): void;
++    private _detachReturnKeyListener;
+     _attachReturnKeyListener(): void;
+ }
+diff --git a/ui/text-field/index.windows.js b/ui/text-field/index.windows.js
+index 1dcaa390d7ad1a37fecc5e0edfaa0cd38380146e..be96ae1b112f9d084c2f9ef0db48fc3de84e4bb1 100644
+--- a/ui/text-field/index.windows.js
++++ b/ui/text-field/index.windows.js
+@@ -1,8 +1,10 @@
+ export * from './text-field-common';
+ import { TextFieldBase, secureProperty } from './text-field-common';
+ import { hintProperty, editableProperty, maxLengthProperty, keyboardTypeProperty, autocapitalizationTypeProperty } from '../editable-text-base/editable-text-base-common';
++import { textProperty } from '../text-base';
+ import { colorProperty } from '../styling/style-properties';
+ import { Color } from '../../color';
++import { subscribeNativeEvent } from '../gestures/pointer-events.windows';
+ import { nativeChildIndex } from '../core/view/native-children.windows';
+ const KEYBOARD_SCOPE = {
+     number: 29,
+@@ -31,7 +33,8 @@ export class TextField extends TextFieldBase {
+     constructor() {
+         super(...arguments);
+         this._isSecure = false;
+-        this._keyDownDelegate = null;
++        this._returnNative = null;
++        this._returnDisposer = null;
+     }
+     createNativeView() {
+         // `secure` is parsed before the native view is created; pick the correct control up-front.
+@@ -66,30 +69,38 @@ export class TextField extends TextFieldBase {
+         }
+         catch (_e) { }
+     }
++    onLoaded() {
++        super.onLoaded();
++        this._attachReturnKeyListener();
++    }
++    onUnloaded() {
++        this._detachReturnKeyListener();
++        super.onUnloaded();
++    }
++    disposeNativeView() {
++        this._detachReturnKeyListener();
++        super.disposeNativeView();
++    }
++    _detachReturnKeyListener() {
++        this._returnNative = null;
++        this._returnDisposer?.();
++        this._returnDisposer = null;
++    }
+     _attachReturnKeyListener() {
+-        const nv = this.nativeViewProtected;
+-        if (!nv) {
++        const native = this.nativeViewProtected;
++        if (this._returnNative === native)
++            return;
++        this._detachReturnKeyListener();
++        if (!native || !this.isLoaded)
+             return;
+-        }
+         const ref = new WeakRef(this);
+-        this._keyDownDelegate = NSWinRT.asDelegate('Microsoft.UI.Xaml.Input.KeyEventHandler', (_sender, e) => {
+-            if (e.Key === Windows.System.VirtualKey.Enter) {
+-                const owner = ref.deref();
+-                if (owner)
+-                    owner.notify({ eventName: TextFieldBase.returnPressEvent, object: owner });
++        this._returnNative = native;
++        this._returnDisposer = subscribeNativeEvent(native, 'KeyDown', (_sender, args) => {
++            const owner = ref.deref();
++            if (owner?.isLoaded && owner._returnNative === native && owner.nativeViewProtected === native && owner.isEnabled && owner.editable && args.Key === Windows.System.VirtualKey.Enter) {
++                owner.notify({ eventName: TextFieldBase.returnPressEvent, object: owner });
+             }
+-        });
+-        // AddHandler(KeyDownEvent) throws E_INVALIDARG (0x80070057) in the runtime's RoutedEvent
+-        // projection: an uncaught throw jams frame navigation. Fall back to instance KeyDown.
+-        try {
+-            nv.AddHandler(Microsoft.UI.Xaml.UIElement.KeyDownEvent, this._keyDownDelegate, true);
+-        }
+-        catch (_e) {
+-            try {
+-                nv.KeyDown = this._keyDownDelegate;
+-            }
+-            catch (_e2) { }
+-        }
++        }, null, (handler) => NSWinRT.asDelegate('Microsoft.UI.Xaml.Input.KeyEventHandler', handler));
+     }
+     // @ts-ignore: setNative is a symbol index whose value type is widened across properties.
+     [secureProperty.setNative](value) {
+@@ -99,7 +110,7 @@ export class TextField extends TextFieldBase {
+         this._isSecure = !!value;
+         const prev = this.nativeViewProtected;
+         // Carry the value across the swap from the JS model (source of truth), not off `prev`.
+-        const currentText = this.text ?? '';
++        const wasFocused = !!prev && prev.FocusState !== Microsoft.UI.Xaml.FocusState.Unfocused;
+         const newView = this._isSecure ? new Microsoft.UI.Xaml.Controls.PasswordBox() : new Microsoft.UI.Xaml.Controls.TextBox();
+         // Must swap in the ACTUAL visual parent (not the NS parent's nativeViewProtected).
+         // Using the NS parent's Border missed the real container and the swap silently no-op'd,
+@@ -129,15 +140,11 @@ export class TextField extends TextFieldBase {
+                 }
+             }
+         }
+-        this.nativeViewProtected = newView;
+-        if (this._isSecure) {
+-            newView.Password = currentText;
+-        }
+-        else {
+-            newView.Text = currentText;
+-        }
+-        this._attachTextChangeListener();
+-        this._attachReturnKeyListener();
++        this.disposeNativeView();
++        this.setNativeView(newView);
++        this[textProperty.setNative](this.text ?? '');
++        if (wasFocused)
++            this.focus();
+     }
+     [hintProperty.setNative](value) {
+         const nativeView = this.nativeViewProtected;
+@@ -151,6 +158,7 @@ export class TextField extends TextFieldBase {
+         if (typeof nativeView.IsReadOnly !== 'undefined') {
+             nativeView.IsReadOnly = !value;
+         }
++        this._updateInputEnabled();
+     }
+     // @ts-ignore: setNative is a symbol index whose value type is widened across properties.
+     [maxLengthProperty.setNative](value) {