Use inert instead to disable the whole thing

Related:
- DefinitelyTyped/DefinitelyTyped#60822
- facebook/react#24730

Author: joonassandell

app/dynamic-pay-button/DynamicPayButton.tsx

@@ -72,9 +72,9 @@ export const DynamicPayButton = () => {
           'has-[:focus-visible]:outline-black/30 dark:has-[:focus-visible]:outline-white/20':
             !open,
           'overflow-visible': overflow,
-          'pointer-events-none': loading,
         },
       )}
+      inert={loading ? '' : undefined}
       onAnimationComplete={variant => {
         variant === 'open' && inputRef.current?.focus({ preventScroll: true });
         variant === 'closed' &&

app/dynamic-pay-button/PayButton.tsx

@@ -32,7 +32,6 @@ export const PayButton = ({ className }: PayButtonProps) => {
         },
         className,
       )}
-      disabled={success || loading}
       onClick={handleLoading}
     >
       <AnimateDimension

app/dynamic-pay-button/TabContent.tsx

@@ -73,7 +73,6 @@ const TabContentCard = () => {
                   success,
               },
             )}
-            disabled={success || loading}
             maxLength={3}
             onChange={e => setCcv(e.target.value)}
             pattern="\d*"

types/types.d.ts

@@ -1,2 +1,8 @@
 declare module 'tailwindcss/lib/util/flattenColorPalette';
 declare module 'tailwindcss/lib/util/color';
+
+declare namespace React {
+  interface HTMLAttributes {
+    inert?: '';
+  }
+}