[#271] only clear errors for the changed field

src/client/backup/remote/AddBackup.tsx

@@ -15,7 +15,7 @@ import {encrypt, EncryptResponse} from '../../gateways/SecurityGateway'
 import styles from './add-backup.scss'
 import {isHttp} from '../../domain/Url'
 import {RemoteLocationLogo} from './RemoteLocationLogo'
-import {firstError, FormErrors} from '../../common/forms/Validation'
+import {firstError, FormErrors, removeErrorFromState} from '../../common/forms/Validation'
 import {ErrorMessages} from '../../common/Messages'
 
 type Fields = 'url' | 'accessToken'
@@ -102,12 +102,13 @@ export function AddBackup(): ReactElement {
       </div>
       <Input value={url}
              onChange={({target}) => {
-               setValidationErrors([])
+               setValidationErrors(removeErrorFromState<Fields>('url'))
                setUrl(target.value)
              }}
              autoComplete='url'
-             error={firstError('url', validationErrors)}
-             disabled={adding}>
+             error={firstError<Fields>('url', validationErrors)}
+             disabled={adding}
+             data-locator='url'>
         <span className={styles.label}>URL</span>
       </Input>
       <Input className={cn(styles.id, {[styles.gitHubLabOnly]: isCustomServer})}
@@ -123,10 +124,10 @@ export function AddBackup(): ReactElement {
       <Password className={cn({[styles.gitHubLabOnly]: isCustomServer})}
                 value={accessToken}
                 onChange={({target}) => {
-                  setValidationErrors([])
+                  setValidationErrors(removeErrorFromState<Fields>('accessToken'))
                   setAccessToken(target.value)
                 }}
-                error={firstError('accessToken', validationErrors)}
+                error={firstError<Fields>('accessToken', validationErrors)}
                 disabled={adding || isCustomServer}
                 aria-hidden={isCustomServer}
                 data-locator='access-token'>

src/client/common/forms/Validation.ts

@@ -1,8 +1,16 @@
-export type FormErrors<Fields> = Array<{
+export type FormErrors<Fields extends string> = Array<{
   readonly field: Fields;
   readonly message: string;
 }>
 
-export function firstError(field: string, errors: Readonly<FormErrors<unknown>>): string {
+export function firstError<Fields extends string>(field: Fields, errors: Readonly<FormErrors<Fields>>): string {
   return errors.find((e) => e.field === field)?.message ?? ''
 }
+
+export function removeError<Fields extends string>(field: Fields, errors: Readonly<FormErrors<Fields>>): Readonly<FormErrors<Fields>> {
+  return errors.filter((e) => e.field !== field)
+}
+
+export function removeErrorFromState<Fields extends string>(field: Fields): (errors: Readonly<FormErrors<Fields>>) => Readonly<FormErrors<Fields>> {
+  return (errors: Readonly<FormErrors<Fields>>) => removeError<Fields>(field, errors)
+}

test/client/backup/remote/RemoteBackups.test.tsx

@@ -97,3 +97,25 @@ it('should not be able to add a remote GitHub gist backup with a blank access to
     expect(queryByText('Please enter an access token')).toBeInTheDocument()
   })
 })
+
+it('should only clear errors for the changed field on type', async () => {
+  const {getByText, getByLabelText, queryByText, getByTestId} = render(<RemoteBackups/>)
+
+  userEvent.click(getByText('Add location'))
+
+  userEvent.selectOptions(getByLabelText('Where'), 'github')
+  userEvent.clear(getByLabelText('URL'))
+  userEvent.click(within(getByTestId('modal')).getByText('Add location'))
+
+  await waitFor(() => {
+    expect(queryByText('Please enter the URL')).toBeInTheDocument()
+    expect(queryByText('Please enter an access token')).toBeInTheDocument()
+  })
+
+  await userEvent.type(getByTestId('url'), 'h')
+
+  await waitFor(() => {
+    expect(queryByText('Please enter the URL')).not.toBeInTheDocument()
+    expect(queryByText('Please enter an access token')).toBeInTheDocument()
+  })
+})