From a2b25fa6155066ac18a5bd36b29787991a672283 Mon Sep 17 00:00:00 2001
From: Ahmad Yasser <ahmadnis123@gmail.com>
Date: Fri, 20 Feb 2026 05:41:54 -0500
Subject: [PATCH] fix: prevent deselecting active option in booker layout
 toggle (#27748)

* fix: prevent deselecting active option in ToggleGroup

Radix UI's single-type ToggleGroup allows deselection by default,
calling onValueChange("") when the active item is clicked.

Fix by converting to controlled mode with proper dual-mode support:
- Controlled (value prop): parent owns state, component just filters
  empty values from onValueChange. Parent can still reject changes.
- Uncontrolled (defaultValue prop): internal useState prevents
  deselection by only updating state for non-empty values.

* Update ToggleGroup.tsx

---------

Co-authored-by: Sahitya Chandra <sahityajb@gmail.com>
Co-authored-by: Eunjae Lee <hey@eunjae.dev>
---
 .../ui/components/form/toggleGroup/ToggleGroup.tsx | 14 +++++++++++++-
 1 file changed, 13 insertions(+), 1 deletion(-)

diff --git a/packages/ui/components/form/toggleGroup/ToggleGroup.tsx b/packages/ui/components/form/toggleGroup/ToggleGroup.tsx
index d314295eca..231c16cd50 100644
--- a/packages/ui/components/form/toggleGroup/ToggleGroup.tsx
+++ b/packages/ui/components/form/toggleGroup/ToggleGroup.tsx
@@ -1,5 +1,6 @@
 import * as RadixToggleGroup from "@radix-ui/react-toggle-group";
 import type { ReactNode } from "react";
+import { useState } from "react";
 
 import classNames from "@calcom/ui/classNames";
 
@@ -42,15 +43,26 @@ export const ToggleGroup = ({
   isFullWidth,
   orientation = "horizontal",
   customClassNames,
+  defaultValue,
   ...props
 }: ToggleGroupProps & { customClassNames?: string }) => {
+  const isControlled = props.value !== undefined;
+  const [uncontrolledValue, setUncontrolledValue] = useState(defaultValue ?? "");
+
   return (
     <>
       <RadixToggleGroup.Root
         type="single"
         {...props}
+        {...(isControlled ? { value: props.value } : { value: uncontrolledValue })}
         orientation={orientation}
-        onValueChange={onValueChange}
+        onValueChange={(value) => {
+          if (!value) return;
+          if (!isControlled) {
+            setUncontrolledValue(value);
+          }
+          onValueChange?.(value);
+        }}
         style={{
           // @ts-expect-error --toggle-group-shadow is not a valid CSS property but can be a variable
           "--toggle-group-shadow":