ON-41699 # added onBlur validation for boolean, camera, `checkbox…

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

src/form-elements/FormElementBoolean.tsx

@@ -56,6 +56,7 @@ function FormElementBoolean({
  })
  }}
  aria-describedby={ariaDescribedby}
+ onBlur={setIsDirty}
  />
  }
  >

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>

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>

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>

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>

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>
  )

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>