From 42058ff6d6e8b8fdea145d53ae935b074f54c7fa Mon Sep 17 00:00:00 2001
From: Pyx <git@notpyx.me>
Date: Mon, 29 Dec 2025 17:57:49 -0500
Subject: [PATCH] fix: correct propagation on settings menu (#1453)

* fix propagation error on settings menu
---
 .../features/player/components/player-config.tsx         | 1 +
 .../features/player/components/right-controls.tsx        | 5 ++++-
 .../features/shared/components/list-config-menu.tsx      | 1 +
 src/shared/components/action-icon/action-icon.tsx        | 9 +++++++++
 4 files changed, 15 insertions(+), 1 deletion(-)

diff --git a/src/renderer/features/player/components/player-config.tsx b/src/renderer/features/player/components/player-config.tsx
index 35f6f690b..ee47b0556 100644
--- a/src/renderer/features/player/components/player-config.tsx
+++ b/src/renderer/features/player/components/player-config.tsx
@@ -407,6 +407,7 @@ export const PlayerConfig = () => {
                         size: 'lg',
                     }}
                     size="sm"
+                    stopsPropagation
                     tooltip={{
                         label: t('common.setting_other', { postProcess: 'titleCase' }),
                         openDelay: 0,
diff --git a/src/renderer/features/player/components/right-controls.tsx b/src/renderer/features/player/components/right-controls.tsx
index 2db238e4a..421ab20e8 100644
--- a/src/renderer/features/player/components/right-controls.tsx
+++ b/src/renderer/features/player/components/right-controls.tsx
@@ -95,7 +95,10 @@ const AutoDJButton = () => {
 
     return (
         <Button
-            onClick={toggleAutoDJ}
+            onClick={(e) => {
+                e.stopPropagation();
+                toggleAutoDJ();
+            }}
             size="compact-xs"
             style={{ color: settings.enabled ? 'var(--theme-colors-primary)' : undefined }}
             uppercase
diff --git a/src/renderer/features/shared/components/list-config-menu.tsx b/src/renderer/features/shared/components/list-config-menu.tsx
index 048fd4f3b..137868b6b 100644
--- a/src/renderer/features/shared/components/list-config-menu.tsx
+++ b/src/renderer/features/shared/components/list-config-menu.tsx
@@ -202,6 +202,7 @@ export const ListConfigTable = ({
 }) => {
     return (
         <Table
+            onClick={(e) => e.stopPropagation()}
             style={{ borderRadius: '1rem' }}
             styles={{ th: { backgroundColor: 'initial', padding: 'var(--theme-spacing-md) 0' } }}
             variant="vertical"
diff --git a/src/shared/components/action-icon/action-icon.tsx b/src/shared/components/action-icon/action-icon.tsx
index 844c3a488..9622ed8ac 100644
--- a/src/shared/components/action-icon/action-icon.tsx
+++ b/src/shared/components/action-icon/action-icon.tsx
@@ -16,6 +16,7 @@ export interface ActionIconProps
         MantineActionIconProps {
     icon?: keyof typeof AppIcon;
     iconProps?: Omit<IconProps, 'icon'>;
+    stopsPropagation?: boolean;
     tooltip?: Omit<TooltipProps, 'children'>;
 }
 
@@ -26,13 +27,20 @@ const _ActionIcon = forwardRef<HTMLButtonElement, ActionIconProps>(
             classNames,
             icon,
             iconProps,
+            onClick,
             size = 'sm',
+            stopsPropagation,
             tooltip,
             variant = 'default',
             ...props
         },
         ref,
     ) => {
+        const handleClick = (e: any) => {
+            if (stopsPropagation) e.stopPropagation();
+            if (onClick) onClick(e);
+        };
+
         const actionIconProps: ActionIconProps = {
             classNames: {
                 root: styles.root,
@@ -41,6 +49,7 @@ const _ActionIcon = forwardRef<HTMLButtonElement, ActionIconProps>(
             size,
             variant,
             ...props,
+            onClick: handleClick,
         };
 
         if (tooltip && icon) {