fix(SelectableCard): event propagation

.changeset/mighty-windows-dream.md

@@ -0,0 +1,5 @@
+---
+"@ultraviolet/ui": minor
+---
+
+`SelectableCard`: add "stopPropagation" in the children for keyboard events

packages/ui/src/components/SelectableCard/__stories__/Examples.stories.tsx

@@ -5,6 +5,7 @@ import { Row } from '../../Row'
 import { SelectInput } from '../../SelectInput'
 import { Stack } from '../../Stack'
 import { Text } from '../../Text'
+import { TextArea } from '../../TextArea'
 import { SelectableCard } from '..'
 import fr from './assets/fr.svg'
 import nl from './assets/nl.svg'
@@ -24,6 +25,9 @@ export const Examples: StoryFn = args => {
     'label-27': false,
     'label-28': false,
   })
+  const [value5, onChange5] = useState({
+    'label-29': false,
+  })
 
   return (
     <Stack flex={1} gap={8}>
@@ -312,6 +316,21 @@ export const Examples: StoryFn = args => {
           value="label-28"
         />
       </Row>
+      <SelectableCard
+        {...args}
+        checked={value5['label-29']}
+        label="With an input in the children"
+        name="label-29" // fixed: match the state key
+        onChange={
+          event =>
+            onChange5({ ...value5, 'label-29': event.currentTarget.checked }) // fixed: spread value5
+        }
+        showTick
+        type="checkbox"
+        value="label-29" // fixed: match the state key
+      >
+        <TextArea label="" onChange={() => {}} />
+      </SelectableCard>
     </Stack>
   )
 }

packages/ui/src/components/SelectableCard/index.tsx

@@ -313,6 +313,7 @@ export const SelectableCard = forwardRef(
                   type === 'checkbox' && isComplexChildren
                 }
                 data-has-label={!!label && showTick}
+                onKeyDown={event => event.stopPropagation()}
                 ref={childrenRef}
                 width="100%"
               >