Adding isClearable back in

NYPL · Dec 20, 2024 · 91f41a5 · 91f41a5
1 parent 35568c6
commit 91f41a5
Show file tree

Hide file tree

Showing 3 changed files with 14 additions and 2 deletions.
diff --git a/src/components/MyAccount/Settings/PasswordForm.tsx b/src/components/MyAccount/Settings/PasswordForm.tsx
@@ -56,6 +56,7 @@ const PasswordFormField = forwardRef<TextInputRefType, PasswordFormFieldProps>(
           onChange={handler}
           invalidText="Pin/passwords do not match."
           isInvalid={isInvalid}
+          isClearable
         />
       </Flex>
     )

diff --git a/src/components/MyAccount/Settings/SettingsInputForm.tsx b/src/components/MyAccount/Settings/SettingsInputForm.tsx
@@ -90,9 +90,9 @@ const SettingsInputForm = ({
     updatedInputs[index] = value
     setTempInputs(updatedInputs)
 
-    const firstInputEmpty = index === 0
+    const firstInput = index === 0
 
-    if (firstInputEmpty && (!value || !validateInput(value, updatedInputs))) {
+    if (firstInput && (!value || !validateInput(value, updatedInputs))) {
       setError(true)
     } else {
       const hasInvalidInput = updatedInputs.some(
@@ -127,6 +127,13 @@ const SettingsInputForm = ({
     setError(hasInvalidInput)
   }
 
+  const handleClearableCallback = (index) => {
+    const updatedInputs = [...tempInputs]
+    updatedInputs[index] = ""
+    setTempInputs(updatedInputs)
+    setError(true)
+  }
+
   const cancelEditing = () => {
     setTempInputs([...inputs])
     setIsEditing(false)
@@ -224,6 +231,8 @@ const SettingsInputForm = ({
                     invalidText={formUtils.errorMessage}
                     onChange={(e) => handleInputChange(e, index)}
                     isRequired
+                    isClearable
+                    isClearableCallback={() => handleClearableCallback(index)}
                   />
                   {index == 0 && <div style={{ width: "57px" }}> </div>}
                   {index !== 0 && (

diff --git a/src/components/MyAccount/Settings/UsernameForm.tsx b/src/components/MyAccount/Settings/UsernameForm.tsx
@@ -129,6 +129,8 @@ const UsernameForm = ({ patron, usernameState }: UsernameFormProps) => {
           isInvalid={error && !validateUsername(tempUsername)}
           showHelperInvalidText={true}
           onChange={handleInputChange}
+          isClearable
+          isClearableCallback={() => setError(true)}
         />
         <Button
           aria-label="Delete username from your account"