use global listeners in spin button (#2839)

Author: snowystinger

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

@@ -16,6 +16,7 @@ import {HTMLAttributes, useCallback, useEffect, useRef} from 'react';
 import {InputBase, RangeInputBase, Validation, ValueBase} from '@react-types/shared';
 // @ts-ignore
 import intlMessages from '../intl/*.json';
+import {useGlobalListeners} from '@react-aria/utils';
 import {useMessageFormatter} from '@react-aria/i18n';
 
 
@@ -173,6 +174,8 @@ export function useSpinButton(
     e.preventDefault();
   };
 
+  let {addGlobalListener, removeAllGlobalListeners} = useGlobalListeners();
+
   return {
     spinButtonProps: {
       role: 'spinbutton',
@@ -190,23 +193,23 @@ export function useSpinButton(
     incrementButtonProps: {
       onPressStart: () => {
         onIncrementPressStart(400);
-        window.addEventListener('contextmenu', cancelContextMenu);
+        addGlobalListener(window, 'contextmenu', cancelContextMenu);
       },
       onPressEnd: () => {
         clearAsync();
-        window.removeEventListener('contextmenu', cancelContextMenu);
+        removeAllGlobalListeners();
       },
       onFocus,
       onBlur
     },
     decrementButtonProps: {
       onPressStart: () => {
         onDecrementPressStart(400);
-        window.addEventListener('contextmenu', cancelContextMenu);
+        addGlobalListener(window, 'contextmenu', cancelContextMenu);
       },
       onPressEnd: () => {
         clearAsync();
-        window.removeEventListener('contextmenu', cancelContextMenu);
+        removeAllGlobalListeners();
       },
       onFocus,
       onBlur