Add buttons disabled on edit of other fields

NYPL · Dec 16, 2024 · 0cc96cb · 0cc96cb
1 parent 040aabf
commit 0cc96cb
Show file tree

Hide file tree

Showing 2 changed files with 4 additions and 1 deletion.
diff --git a/src/components/MyAccount/Settings/AddButton.tsx b/src/components/MyAccount/Settings/AddButton.tsx
@@ -4,18 +4,20 @@ import { forwardRef } from "react"
 type AddButtonProps = {
   inputType?: string
   label: string
+  isDisabled?: boolean
   onClick: () => void
 }
 
 const AddButton = forwardRef<HTMLButtonElement, AddButtonProps>(
-  ({ inputType, label, onClick }, ref) => {
+  ({ inputType, label, isDisabled, onClick }, ref) => {
     return (
       <Button
         ref={ref}
         id={inputType ? `add-${inputType}-button` : "add-button"}
         buttonType="text"
         onClick={onClick}
         size="large"
+        isDisabled={isDisabled}
         sx={{
           justifyContent: "flex-start",
           width: { base: "100%", md: "300px" },

diff --git a/src/components/MyAccount/Settings/SettingsInputForm.tsx b/src/components/MyAccount/Settings/SettingsInputForm.tsx
@@ -301,6 +301,7 @@ const SettingsInputForm = ({
           // User has no phone or email.
           <Box sx={{ marginTop: { base: "unset", lg: "-xs" } }}>
             <AddButton
+              isDisabled={editingField !== ""}
               inputType={inputType}
               onClick={() => {
                 setIsEditing(true)