close on select false for favorites

apps/web/src/components/features/dropdowns/SaveToDashboardDropdown.tsx

@@ -89,7 +89,12 @@ export const useSaveToDashboardDropdownContent = ({
           value: dashboard.id,
           label: dashboard.name || 'New dashboard',
           selected: selectedDashboards.some((d) => d === dashboard.id),
-          onClick: () => onClickItem(dashboard),
+          closeOnSelect: false,
+          onClick: (e) => {
+            e.stopPropagation();
+            e.preventDefault();
+            onClickItem(dashboard);
+          },
           link: createBusterRoute({
             route: BusterRoutes.APP_DASHBOARD_ID,
             dashboardId: dashboard.id

apps/web/src/components/features/list/FavoriteStar.tsx

@@ -81,7 +81,8 @@ export const useFavoriteStar = ({
     return userFavorites?.some((favorite) => favorite.id === id);
   }, [userFavorites, id]);
 
-  const onFavoriteClick = useMemoizedFn(async (e?: React.MouseEvent<HTMLButtonElement>) => {
+  const onFavoriteClick = useMemoizedFn(
+    async (e?: React.MouseEvent<HTMLButtonElement> | React.MouseEvent<HTMLDivElement>) => {
       e?.stopPropagation();
       e?.preventDefault();
       if (!isFavorited) {
@@ -95,7 +96,8 @@ export const useFavoriteStar = ({
       }
 
       return await removeItemFromFavorite([id]);
-  });
+    }
+  );
 
   return useMemo(
     () => ({

apps/web/src/components/features/metrics/ThreeDotMenu.tsx

@@ -63,7 +63,8 @@ export const useFavoriteMetricSelectMenu = ({ metricId }: { metricId: string })
       label: isFavorited ? 'Remove from favorites' : 'Add to favorites',
       value: 'add-to-favorites',
       icon: isFavorited ? <StarFilled /> : <Star />,
-      onClick: onFavoriteClick
+      onClick: onFavoriteClick,
+      closeOnSelect: false
     }),
     [isFavorited, onFavoriteClick]
   );

apps/web/src/components/ui/dropdown/Dropdown.stories.tsx

@@ -15,10 +15,6 @@ const meta: Meta<typeof Dropdown> = {
     layout: 'centered'
   },
   argTypes: {
-    closeOnSelect: {
-      control: 'boolean',
-      defaultValue: true
-    },
     align: {
       control: 'select',
       options: ['start', 'center', 'end'],

apps/web/src/components/ui/dropdown/Dropdown.tsx

@@ -31,7 +31,8 @@ export interface DropdownItem<T = string> {
   secondaryLabel?: string;
   value: T;
   shortcut?: string;
-  onClick?: () => void;
+  onClick?: (e: React.MouseEvent<HTMLDivElement>) => void;
+  closeOnSelect?: boolean; //default is true
   icon?: React.ReactNode;
   disabled?: boolean;
   loading?: boolean;
@@ -52,7 +53,6 @@ export interface DropdownProps<T = string> extends DropdownMenuProps {
   items: DropdownItems<T>;
   selectType?: 'single' | 'multiple' | 'none';
   menuHeader?: string | React.ReactNode; //if string it will render a search box
-  closeOnSelect?: boolean;
   onSelect?: (value: T) => void;
   align?: 'start' | 'center' | 'end';
   side?: 'top' | 'right' | 'bottom' | 'left';
@@ -81,7 +81,6 @@ export const DropdownBase = <T,>({
   selectType = 'none',
   menuHeader,
   contentClassName = '',
-  closeOnSelect = true,
   onSelect,
   children,
   align = 'start',
@@ -114,7 +113,6 @@ export const DropdownBase = <T,>({
           items={items}
           selectType={selectType}
           menuHeader={menuHeader}
-          closeOnSelect={closeOnSelect}
           onSelect={onSelect}
           showIndex={showIndex}
           emptyStateText={emptyStateText}
@@ -135,7 +133,6 @@ export const DropdownContent = <T,>({
   items,
   selectType,
   menuHeader,
-  closeOnSelect = true,
   showIndex = false,
   emptyStateText = 'No items found',
   footerContent,
@@ -198,7 +195,7 @@ export const DropdownContent = <T,>({
       if (!disabled && onSelect) {
         onSelect(item.value);
         // Close the dropdown if closeOnSelect is true
-        if (closeOnSelect) {
+        if (item.closeOnSelect !== false) {
           const dropdownTrigger = document.querySelector('[data-state="open"][role="menu"]');
           if (dropdownTrigger) {
             const closeEvent = new KeyboardEvent('keydown', { key: 'Escape', bubbles: true });
@@ -248,7 +245,7 @@ export const DropdownContent = <T,>({
                   selectType={selectType}
                   onSelect={onSelect}
                   onSelectItem={onSelectItem}
-                  closeOnSelect={closeOnSelect}
+                  closeOnSelect={(item as DropdownItem).closeOnSelect !== false}
                   showIndex={showIndex}
                 />
               );
@@ -270,7 +267,7 @@ export const DropdownContent = <T,>({
                   selectType={selectType}
                   onSelect={onSelect}
                   onSelectItem={onSelectItem}
-                  closeOnSelect={closeOnSelect}
+                  closeOnSelect={(item as DropdownItem).closeOnSelect !== false}
                   showIndex={showIndex}
                 />
               );
@@ -365,7 +362,7 @@ const DropdownItem = <T,>({
   selectType: DropdownProps<T>['selectType'];
 }) => {
   const onClickItem = useMemoizedFn((e: React.MouseEvent<HTMLDivElement>) => {
-    if (onClick) onClick();
+    if (onClick) onClick(e);
     if (onSelect) onSelect(value as T);
   });
   const enabledHotKeys = showIndex && !disabled && !!onSelectItem;

apps/web/src/layouts/ChatLayout/FileContainer/FileContainerHeader/MetricContainerHeaderButtons/MetricThreeDotMenu.tsx

@@ -190,6 +190,7 @@ const useDashboardSelectMenu = ({ metricId }: { metricId: string }) => {
     () => ({
       label: 'Add to dashboard',
       value: 'add-to-dashboard',
+      closeOnSelect: false,
       icon: <ASSET_ICONS.dashboardAdd />,
       items: [<React.Fragment key="dashboard-sub-menu">{dashboardSubMenu}</React.Fragment>]
     }),