Use inert instead to disable the whole thing

Related: - DefinitelyTyped/DefinitelyTyped#60822 - facebook/react#24730
joonassandell · Jul 20, 2024 · 106f83f · 106f83f
1 parent 3774b73
commit 106f83f
Show file tree

Hide file tree

Showing 4 changed files with 7 additions and 3 deletions.
diff --git a/app/dynamic-pay-button/DynamicPayButton.tsx b/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' &&

diff --git a/app/dynamic-pay-button/PayButton.tsx b/app/dynamic-pay-button/PayButton.tsx
@@ -32,7 +32,6 @@ export const PayButton = ({ className }: PayButtonProps) => {
         },
         className,
       )}
-      disabled={success || loading}
       onClick={handleLoading}
     >
       <AnimateDimension

diff --git a/app/dynamic-pay-button/TabContent.tsx b/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*"

diff --git a/types/types.d.ts b/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?: '';
+  }
+}