From 6ac1577a782134601ff751e58c230b5fad79b826 Mon Sep 17 00:00:00 2001
From: David Porter <david@oneblink.io>
Date: Wed, 25 Feb 2026 16:10:04 +1100
Subject: [PATCH] AP-7332 # fixed disabled on `Clickable` not disabling click
 function

---
 CHANGELOG.md                 |  1 +
 src/components/Clickable.tsx | 22 +++++++++++++---------
 2 files changed, 14 insertions(+), 9 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 6eb13b801..c5748efa1 100644
--- a/CHANGELOG.md
+++ b/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
 
diff --git a/src/components/Clickable.tsx b/src/components/Clickable.tsx
index 08da3b8f9..5ae7167b9 100644
--- a/src/components/Clickable.tsx
+++ b/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}
     />
   )
 }