From 81fa0c746cc428a6516eb07dfdfa85ade60e3a3e Mon Sep 17 00:00:00 2001
From: aaron roworth <aaronroworth@gmail.com>
Date: Wed, 10 Jul 2024 15:53:57 +1000
Subject: [PATCH] ON-41699 # added onBlur validation for `boolean`, `camera`,
 `checkboxes`, `files`, `location` and `radio` elements

---
 CHANGELOG.md                                |  4 ++++
 src/form-elements/FormElementBoolean.tsx    |  1 +
 src/form-elements/FormElementCamera.tsx     |  1 +
 src/form-elements/FormElementCheckBoxes.tsx | 10 ++++++++++
 src/form-elements/FormElementFiles.tsx      |  1 +
 src/form-elements/FormElementLocation.tsx   |  1 +
 src/form-elements/FormElementRadio.tsx      |  8 +++++++-
 src/form-elements/OptionButton.tsx          |  3 +++
 8 files changed, 28 insertions(+), 1 deletion(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 91dfecdc..eeb7aed3 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -7,6 +7,10 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## [Unreleased]
 
+### Added
+
+- onBlur validation for `boolean`, `camera`, `checkboxes`, `files`, `location` and `radio` elements
+
 ### Fixed
 
 - accessibility attributes for checkbox and radio labels
diff --git a/src/form-elements/FormElementBoolean.tsx b/src/form-elements/FormElementBoolean.tsx
index 67a2a64e..6aa0cccd 100644
--- a/src/form-elements/FormElementBoolean.tsx
+++ b/src/form-elements/FormElementBoolean.tsx
@@ -56,6 +56,7 @@ function FormElementBoolean({
               })
             }}
             aria-describedby={ariaDescribedby}
+            onBlur={setIsDirty}
           />
         }
       >
diff --git a/src/form-elements/FormElementCamera.tsx b/src/form-elements/FormElementCamera.tsx
index 0c354351..9556806c 100644
--- a/src/form-elements/FormElementCamera.tsx
+++ b/src/form-elements/FormElementCamera.tsx
@@ -362,6 +362,7 @@ function FormElementCamera({
                 onClick={openCamera}
                 disabled={element.readOnly || isLoading}
                 aria-describedby={ariaDescribedby}
+                onBlur={setIsDirty}
               >
                 Open Camera
               </button>
diff --git a/src/form-elements/FormElementCheckBoxes.tsx b/src/form-elements/FormElementCheckBoxes.tsx
index 61ce76f9..3a78d05c 100644
--- a/src/form-elements/FormElementCheckBoxes.tsx
+++ b/src/form-elements/FormElementCheckBoxes.tsx
@@ -154,6 +154,11 @@ function FormElementCheckboxes({
                         },
                       )}
                       aria-describedby={ariaDescribedby}
+                      onBlur={() => {
+                        if (index === filteredOptions.length - 1) {
+                          setIsDirty()
+                        }
+                      }}
                     />
                   )
                 })}
@@ -189,6 +194,11 @@ function FormElementCheckboxes({
                         inputProps={{
                           'aria-describedby': ariaDescribedby,
                         }}
+                        onBlur={() => {
+                          if (index === filteredOptions.length - 1) {
+                            setIsDirty()
+                          }
+                        }}
                       />{' '}
                       {option.label}
                     </label>
diff --git a/src/form-elements/FormElementFiles.tsx b/src/form-elements/FormElementFiles.tsx
index 3b7a03a6..7b45e9db 100644
--- a/src/form-elements/FormElementFiles.tsx
+++ b/src/form-elements/FormElementFiles.tsx
@@ -112,6 +112,7 @@ function FormElementFiles({
                     className="button ob-files__add-new-button"
                     onClick={handleAdd}
                     aria-describedby={ariaDescribedby}
+                    onBlur={setIsDirty}
                   >
                     <MaterialIcon className="icon-x-large">add</MaterialIcon>
                   </button>
diff --git a/src/form-elements/FormElementLocation.tsx b/src/form-elements/FormElementLocation.tsx
index 85c5fa03..b81fb100 100644
--- a/src/form-elements/FormElementLocation.tsx
+++ b/src/form-elements/FormElementLocation.tsx
@@ -189,6 +189,7 @@ function FormElementLocation({
                   className="is-primary button ob-button ob-button__edit ob-location__button ob-location__button-edit cypress-locate-button"
                   onClick={onLocate}
                   disabled={element.readOnly}
+                  onBlur={setIsDirty}
                 >
                   Locate
                 </button>
diff --git a/src/form-elements/FormElementRadio.tsx b/src/form-elements/FormElementRadio.tsx
index a7cdecb2..c4fd3f94 100644
--- a/src/form-elements/FormElementRadio.tsx
+++ b/src/form-elements/FormElementRadio.tsx
@@ -71,6 +71,7 @@ function FormElementRadio({
               className="ob-radio-container"
               aria-labelledby={`${id}-label`}
               aria-describedby={ariaDescribedby}
+              onBlur={setIsDirty}
             >
               {filteredOptions.map((option) => (
                 <div className="control" key={option.value}>
@@ -111,7 +112,7 @@ function FormElementRadio({
               aria-labelledby={`${id}-label`}
               aria-describedby={ariaDescribedby}
             >
-              {filteredOptions.map((option) => {
+              {filteredOptions.map((option, index) => {
                 const isSelected = value === option.value
                 return (
                   <div className="ob-button-radio-container" key={option.value}>
@@ -132,6 +133,11 @@ function FormElementRadio({
                           'is-light': !isSelected,
                         },
                       )}
+                      onBlur={() => {
+                        if (index === filteredOptions.length - 1) {
+                          setIsDirty()
+                        }
+                      }}
                     />
                   </div>
                 )
diff --git a/src/form-elements/OptionButton.tsx b/src/form-elements/OptionButton.tsx
index 98f952ae..e14f6bd0 100644
--- a/src/form-elements/OptionButton.tsx
+++ b/src/form-elements/OptionButton.tsx
@@ -10,6 +10,7 @@ type Props = {
   isSelected: boolean
   onClick: () => void
   className: string
+  onBlur?: () => void
   'aria-describedby'?: string
 }
 const OptionButton = ({
@@ -18,6 +19,7 @@ const OptionButton = ({
   isSelected,
   onClick,
   className,
+  onBlur,
   ...props
 }: Props) => {
   const buttonContrastColor = useContrastColor(option.colour)
@@ -33,6 +35,7 @@ const OptionButton = ({
       disabled={element.readOnly}
       onClick={onClick}
       aria-describedby={props['aria-describedby']}
+      onBlur={onBlur}
     >
       {option.label}
     </button>