Better tab dropdown handling

src-web/components/core/Dropdown.tsx

@@ -20,24 +20,30 @@ export type DropdownItem =
 export interface DropdownProps {
   children: ReactElement<HTMLAttributes<HTMLButtonElement>>;
   items: DropdownItem[];
+  ignoreClick?: boolean;
 }
 
-export function Dropdown({ children, items }: DropdownProps) {
+export function Dropdown({ children, items, ignoreClick }: DropdownProps) {
   const [open, setOpen] = useState<boolean>(false);
   const ref = useRef<HTMLButtonElement>(null);
-  const child = useMemo(
-    () =>
-      cloneElement(Children.only(children) as never, {
-        ref,
-        'aria-haspopup': 'true',
-        onClick: (e: MouseEvent<HTMLButtonElement>) => {
+  const child = useMemo(() => {
+    const existingChild = Children.only(children);
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    const props: any = {
+      ...existingChild.props,
+      ref,
+      'aria-haspopup': 'true',
+      onClick:
+        existingChild.props?.onClick ??
+        ((e: MouseEvent<HTMLButtonElement>) => {
+          console.log('CLICK INSIDE');
           e.preventDefault();
           e.stopPropagation();
           setOpen((o) => !o);
-        },
-      }),
-    [children],
-  );
+        }),
+    };
+    return cloneElement(existingChild, props);
+  }, [children]);
 
   const handleClose = useCallback(() => {
     setOpen(false);

src-web/components/core/Tabs/Tabs.tsx

@@ -41,7 +41,7 @@ export const Tabs = memo(function Tabs({
     for (const tab of tabs ?? []) {
       const v = tab.getAttribute('data-tab');
       if (v === value) {
-        tab.setAttribute('tabindex', '0');
+        tab.setAttribute('tabindex', '-1');
         tab.setAttribute('data-state', 'active');
       } else {
         tab.setAttribute('data-state', 'inactive');
@@ -67,7 +67,7 @@ export const Tabs = memo(function Tabs({
         <HStack space={1}>
           {tabs.map((t) => {
             const isActive = t.value === value;
-            if (t.options && isActive) {
+            if (t.options) {
               return (
                 <RadioDropdown
                   key={t.value}
@@ -78,7 +78,7 @@ export const Tabs = memo(function Tabs({
                   <Button
                     color="custom"
                     size="sm"
-                    onClick={(e) => e.stopPropagation()}
+                    onClick={isActive ? undefined : () => handleTabChange(t.value)}
                     className={classnames(
                       isActive ? 'bg-gray-100 text-gray-900' : 'text-gray-600 hover:text-gray-900',
                     )}
@@ -88,21 +88,6 @@ export const Tabs = memo(function Tabs({
                   </Button>
                 </RadioDropdown>
               );
-            } else if (t.options && !isActive) {
-              return (
-                <Button
-                  key={t.value}
-                  color="custom"
-                  size="sm"
-                  onClick={() => handleTabChange(t.value)}
-                  className={classnames(
-                    isActive ? 'bg-gray-100 text-gray-900' : 'text-gray-600 hover:text-gray-900',
-                  )}
-                >
-                  {t.options.items.find((i) => i.value === t.options?.value)?.label ?? ''}
-                  <Icon icon="triangleDown" className="-mr-1.5 opacity-40" />
-                </Button>
-              );
             } else {
               return (
                 <Button