AP-7332 # fixed disabled on Clickable not disabling click function

CHANGELOG.md

@@ -10,6 +10,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 ### Fixed
 
 - Lot / DP Numbers display for NSW Point V3 form element
+- disabled on `Clickable` not disabling click function
 
 ## [9.1.0] - 2026-02-23
 

src/components/Clickable.tsx

@@ -1,33 +1,37 @@
 import * as React from 'react'
 import clsx from 'clsx'
 
-export function Clickable(
-  props: React.ComponentProps<'div'> & {
-    disabled?: boolean
-  },
-) {
+export function Clickable({
+  disabled,
+  onClick,
+  ...props
+}: React.ComponentProps<'div'> & {
+  disabled?: boolean
+}) {
   const ref = React.useRef<HTMLDivElement>(null)
   return (
     <div
       {...props}
+      onClick={disabled ? undefined : onClick}
       role="button"
-      tabIndex={props.disabled ? -1 : 0}
+      tabIndex={disabled ? -1 : 0}
       ref={ref}
       onKeyDown={(event) => {
+        if (disabled) return
         if (
           ref.current === event.target &&
           (event.key === 'Enter' || event.key === ' ')
         ) {
-          props.onClick?.(
+          onClick?.(
             event as unknown as React.MouseEvent<HTMLDivElement, MouseEvent>,
           )
         }
         props.onKeyDown?.(event)
       }}
       className={clsx(props.className, {
-        'is-clickable': !props.disabled,
+        'is-clickable': !disabled,
       })}
-      aria-disabled={props.disabled}
+      aria-disabled={disabled}
     />
   )
 }