fix(ConnectWalletForm): don't disable inputs during validation (#744)

interledger · Nov 29, 2024 · 7f85a75 · 7f85a75
1 parent d50c8a7
commit 7f85a75
Show file tree

Hide file tree

Showing 3 changed files with 6 additions and 16 deletions.
diff --git a/src/popup/components/ConnectWalletForm.tsx b/src/popup/components/ConnectWalletForm.tsx
@@ -298,12 +298,7 @@ export const ConnectWalletForm = ({
         }}
       />
 
-      <fieldset
-        className={cn(
-          'space-y-2',
-          !walletAddressInfo?.assetCode && 'opacity-75',
-        )}
-      >
+      <fieldset className="space-y-2">
         <legend className="flex items-center px-2 font-medium leading-6 text-medium">
           {t('connectWallet_labelGroup_amount')}
         </legend>
@@ -318,7 +313,7 @@ export const ConnectWalletForm = ({
             }
             errorMessage={errors.amount?.message}
             errorHidden={true}
-            readOnly={!walletAddressInfo?.assetCode || isSubmitting}
+            readOnly={isSubmitting}
             onError={(err) => {
               setErrors((prev) => ({ ...prev, amount: toErrorInfo(err) }));
             }}
@@ -331,6 +326,7 @@ export const ConnectWalletForm = ({
             size="small"
             label={t('connectWallet_label_recurring')}
             defaultChecked={recurring}
+            disabled={isSubmitting}
             onChange={(ev) => {
               const value = ev.currentTarget.checked;
               setRecurring(value);

diff --git a/src/popup/components/ui/Input.tsx b/src/popup/components/ui/Input.tsx
@@ -16,10 +16,10 @@ const inputVariants = cva(
         default: 'border-base',
       },
       disabled: {
-        true: 'border-transparent bg-disabled text-disabled',
+        true: 'cursor-default border-transparent bg-disabled text-disabled',
       },
       readOnly: {
-        true: 'border-transparent bg-disabled text-disabled',
+        true: 'cursor-default border-transparent bg-disabled text-disabled',
       },
     },
     defaultVariants: {

diff --git a/tests/e2e/basic.spec.ts b/tests/e2e/basic.spec.ts
@@ -1,5 +1,5 @@
 import { test, expect } from './fixtures/base';
-import { fillPopup, getPopupFields } from './pages/popup';
+import { fillPopup } from './pages/popup';
 
 test.beforeEach(async ({ popup }) => {
   await popup.reload();
@@ -32,7 +32,6 @@ test('shows connect form if not connected', async ({ page, popup }) => {
 
 test.describe('should fail to connect if:', () => {
   test('invalid URL provided', async ({ background, popup, i18n }) => {
-    const inputFields = getPopupFields(popup, i18n);
     const connectButton = await fillPopup(popup, i18n, {
       walletAddressUrl: 'abc',
     });
@@ -41,8 +40,6 @@ test.describe('should fail to connect if:', () => {
     await expect(popup.locator('p.text-error')).toHaveText(
       i18n.getMessage('connectWallet_error_urlInvalidUrl'),
     );
-    await expect(inputFields.amount).not.toBeEditable();
-    await expect(inputFields.recurring).toBeEditable();
 
     expect(
       await background.evaluate(() => {
@@ -56,13 +53,10 @@ test.describe('should fail to connect if:', () => {
     popup,
     i18n,
   }) => {
-    const inputFields = getPopupFields(popup, i18n);
     const connectButton = await fillPopup(popup, i18n, {
       walletAddressUrl: 'https://example.com',
     });
 
-    await expect(inputFields.amount).not.toBeEditable();
-    await expect(inputFields.recurring).toBeEditable();
     await expect(connectButton).toBeDisabled();
     await expect(popup.locator('p.text-error')).toContainText(
       'not a valid wallet address',