fix(client): toggle checkbox via wrapper onClick to prevent Link navigation
The issue: Radix UI Checkbox's onCheckedChange doesn't fire when e.preventDefault() is called in onClick (needed to block parent Link). Solution: Remove onClick/onCheckedChange from Checkbox, handle toggle manually in the wrapper div's onClick handler by calling onSelect directly with the inverted state.
This commit is contained in:
@@ -49,22 +49,23 @@ export const MeetingCard = forwardRef<HTMLDivElement, MeetingCardProps>(function
|
||||
onClick={(e) => {
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
if (meeting.state !== 'recording') {
|
||||
onSelect?.(meeting.id, !isSelected);
|
||||
}
|
||||
}}
|
||||
onKeyDown={(e) => {
|
||||
if (e.key === 'Enter' || e.key === ' ') {
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
if (meeting.state !== 'recording') {
|
||||
onSelect?.(meeting.id, !isSelected);
|
||||
}
|
||||
}
|
||||
}}
|
||||
>
|
||||
<Checkbox
|
||||
checked={isSelected}
|
||||
disabled={meeting.state === 'recording'}
|
||||
onCheckedChange={(checked) => onSelect?.(meeting.id, checked as boolean)}
|
||||
onClick={(e) => {
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
}}
|
||||
aria-label={`Select meeting: ${meeting.title}`}
|
||||
/>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user