From 4746e1f8fe41d4766d0bcb453c26e1395e593b27 Mon Sep 17 00:00:00 2001
From: Thomas Hallock <thomas@evolutioniq.com>
Date: Mon, 10 Nov 2025 15:05:40 -0600
Subject: [PATCH] fix: prevent modal closure when clicking tabs in
 AllSkillsModal
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Fix bug where clicking the "Mastered" (or any other) tab in the "View all skills"
modal would unexpectedly close the modal.

Root cause: Tabs.Trigger components from Radix UI were rendering as buttons without
explicit type="button" attributes. Browsers can treat buttons without explicit types
inconsistently, sometimes causing click events to bubble up and trigger unwanted
behaviors like closing modals.

Solution: Use Radix UI's asChild prop to wrap each Tabs.Trigger with an explicit
<button type="button"> element. This ensures:
- Buttons never act as submit buttons
- Click events are properly contained
- Radix UI still handles accessibility and state management

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
---
 .../config-panel/AllSkillsModal.tsx           | 45 ++++++++++---------
 1 file changed, 25 insertions(+), 20 deletions(-)

diff --git a/apps/web/src/app/create/worksheets/addition/components/config-panel/AllSkillsModal.tsx b/apps/web/src/app/create/worksheets/addition/components/config-panel/AllSkillsModal.tsx
index 1188e89b..ec13b230 100644
--- a/apps/web/src/app/create/worksheets/addition/components/config-panel/AllSkillsModal.tsx
+++ b/apps/web/src/app/create/worksheets/addition/components/config-panel/AllSkillsModal.tsx
@@ -466,27 +466,32 @@ export function AllSkillsModal({
                 <Tabs.Trigger
                   key={tab.value}
                   value={tab.value}
-                  className={css({
-                    padding: '0.5rem 1rem',
-                    fontSize: '0.875rem',
-                    fontWeight: '500',
-                    border: 'none',
-                    borderBottom: '2px solid',
-                    borderColor: 'transparent',
-                    color: isDark ? 'gray.400' : 'gray.600',
-                    cursor: 'pointer',
-                    transition: 'all 0.2s',
-                    backgroundColor: 'transparent',
-                    _hover: {
-                      color: isDark ? 'gray.200' : 'gray.900',
-                    },
-                    '&[data-state=active]': {
-                      color: 'blue.600',
-                      borderColor: 'blue.600',
-                    },
-                  })}
+                  asChild
                 >
-                  {tab.label} ({tab.count})
+                  <button
+                    type="button"
+                    className={css({
+                      padding: '0.5rem 1rem',
+                      fontSize: '0.875rem',
+                      fontWeight: '500',
+                      border: 'none',
+                      borderBottom: '2px solid',
+                      borderColor: 'transparent',
+                      color: isDark ? 'gray.400' : 'gray.600',
+                      cursor: 'pointer',
+                      transition: 'all 0.2s',
+                      backgroundColor: 'transparent',
+                      _hover: {
+                        color: isDark ? 'gray.200' : 'gray.900',
+                      },
+                      '&[data-state=active]': {
+                        color: 'blue.600',
+                        borderColor: 'blue.600',
+                      },
+                    })}
+                  >
+                    {tab.label} ({tab.count})
+                  </button>
                 </Tabs.Trigger>
               ))}
             </Tabs.List>