Skip to content

Fix: Prevent API key modal from opening when clicking copy button#694

Open
rjnz2023 wants to merge 1 commit intoparcelvoy:mainfrom
rjnz2023:main
Open

Fix: Prevent API key modal from opening when clicking copy button#694
rjnz2023 wants to merge 1 commit intoparcelvoy:mainfrom
rjnz2023:main

Conversation

@rjnz2023
Copy link

Problem

When users click the copy button to copy an API key in the API Keys settings page, the row's click event also fires, causing the edit/update modal to open unexpectedly. This creates a poor user experience where users have to close the modal every time they just want to copy a key.

Solution

This PR fixes the issue by:

  1. Adding onClick={(e) => e.stopPropagation()} to the cell-content div containing the API key value and copy button
  2. Removing the unnecessary handleCopy function that was attempting to stop propagation
  3. Simplifying the copy button to use a standard onClick handler instead of onClickCapture
  4. Adding type="button" attribute for better semantic HTML

Changes

  • Modified apps/ui/src/views/settings/ApiKeys.tsx
    • Removed handleCopy function (lines 33-37)
    • Added stopPropagation to cell-content div
    • Simplified copy button implementation

Before & After

Before: Clicking copy button → API key copied + modal opens
After: Clicking copy button → API key copied only (modal stays closed)

### Problem
When users click the copy button to copy an API key in the API Keys settings page, the row's click event also fires, causing the edit/update modal to open unexpectedly. This creates a poor user experience where users have to close the modal every time they just want to copy a key.

### Solution
This PR fixes the issue by:
1. Adding `onClick={(e) => e.stopPropagation()}` to the cell-content div containing the API key value and copy button
2. Removing the unnecessary `handleCopy` function that was attempting to stop propagation
3. Simplifying the copy button to use a standard `onClick` handler instead of `onClickCapture`
4. Adding `type="button"` attribute for better semantic HTML
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant