Fix Numberfield android focus lost (#2127)

Author: snowystinger

packages/@react-aria/button/src/useButton.ts

@@ -54,6 +54,8 @@ export function useButton(props: AriaButtonProps<ElementType>, ref: RefObject<an
     onPressChange,
     // @ts-ignore - undocumented
     preventFocusOnPress,
+    // @ts-ignore - undocumented
+    allowFocusWhenDisabled,
     // @ts-ignore
     onClick: deprecatedOnClick,
     href,
@@ -91,6 +93,9 @@ export function useButton(props: AriaButtonProps<ElementType>, ref: RefObject<an
   });
 
   let {focusableProps} = useFocusable(props, ref);
+  if (allowFocusWhenDisabled) {
+    focusableProps.tabIndex = isDisabled ? -1 : focusableProps.tabIndex;
+  }
   let buttonProps = mergeProps(focusableProps, pressProps);
   buttonProps = mergeProps(buttonProps, filterDOMProps(props, {labelable: true}));
 

packages/@react-aria/numberfield/src/useNumberField.ts

@@ -260,6 +260,7 @@ export function useNumberField(props: AriaNumberFieldProps, state: NumberFieldSt
     'aria-controls': inputId,
     excludeFromTabOrder: true,
     preventFocusOnPress: true,
+    allowFocusWhenDisabled: true,
     isDisabled: !state.canIncrement,
     onPressStart: onButtonPressStart
   });
@@ -271,6 +272,7 @@ export function useNumberField(props: AriaNumberFieldProps, state: NumberFieldSt
     'aria-controls': inputId,
     excludeFromTabOrder: true,
     preventFocusOnPress: true,
+    allowFocusWhenDisabled: true,
     isDisabled: !state.canDecrement,
     onPressStart: onButtonPressStart
   });

packages/@react-aria/spinbutton/src/useSpinButton.ts

@@ -167,6 +167,10 @@ export function useSpinButton(
     [onDecrement, minValue, value]
   );
 
+  let cancelContextMenu = (e) => {
+    e.preventDefault();
+  };
+
   return {
     spinButtonProps: {
       role: 'spinbutton',
@@ -182,14 +186,26 @@ export function useSpinButton(
       onBlur
     },
     incrementButtonProps: {
-      onPressStart: () => onIncrementPressStart(400),
-      onPressEnd: clearAsync,
+      onPressStart: () => {
+        onIncrementPressStart(400);
+        window.addEventListener('contextmenu', cancelContextMenu);
+      },
+      onPressEnd: () => {
+        clearAsync();
+        window.removeEventListener('contextmenu', cancelContextMenu);
+      },
       onFocus,
       onBlur
     },
     decrementButtonProps: {
-      onPressStart: () => onDecrementPressStart(400),
-      onPressEnd: clearAsync,
+      onPressStart: () => {
+        onDecrementPressStart(400);
+        window.addEventListener('contextmenu', cancelContextMenu);
+      },
+      onPressEnd: () => {
+        clearAsync();
+        window.removeEventListener('contextmenu', cancelContextMenu);
+      },
       onFocus,
       onBlur
     }