Skip to content

Conversation

@Mythindia
Copy link
Contributor

@Mythindia Mythindia commented Jan 27, 2026

Inconsistent feature toggle behavior fixed by preventing event bubbling

Thanks for submitting a PR! Please check the boxes below:

  • I have read the Contributing Guide.
  • I have added information to docs/ if required so people know about the feature.
  • I have filled in the "Changes" section below.
  • I have filled in the "How did you test this code" section below.

Changes

Closes #6397

Inconsistent feature toggle behavior based on window size

Description:

Full-width screens: Clicking the feature toggle switch displays a confirmation modal (correct behavior)
Narrow screens: Clicking the feature toggle switch opens the feature detail view instead of showing the confirmation modal (incorrect behavior)
Root Cause:
The feature flag list component (FeatureRow.tsx) had two responsive rendering branches:

Large screens (d-lg-flex): The toggle Switch was properly wrapped with onClick={(e) => { e.stopPropagation() }} to prevent event bubbling
Narrow screens (d-lg-none): The toggle Switch was missing this event propagation blocker
When users clicked the toggle on narrow screens, the click event bubbled up to the parent row's onClick={() => editFeature()} handler, which opened the feature detail view instead of allowing the toggle confirmation modal to appear.

Solution
Event Propagation Handler (FeatureRow.tsx)
Added onClick={(e) => { e.stopPropagation() }} wrapper around the narrow-screen Switch component to prevent click events from bubbling to the parent row's click handler.

How did you test this code?

Open your browser (in my case chromium-based) at half-width
Click the toggle to enable/disable a feature in the dashboard
Notice how it opens the feature in a new view

 Inconsistent feature toggle behavior fixed by preventing event bubbling
@Mythindia Mythindia requested a review from a team as a code owner January 27, 2026 14:20
@Mythindia Mythindia requested review from talissoncosta and removed request for a team January 27, 2026 14:20
@vercel
Copy link

vercel bot commented Jan 27, 2026

@Mythindia is attempting to deploy a commit to the Flagsmith Team on Vercel.

A member of the Team first needs to authorize it.

@github-actions github-actions bot added the front-end Issue related to the React Front End Dashboard label Jan 27, 2026
@Mythindia Mythindia changed the title Fix#6397 Inconsistent feature toggle behavior fix #6397 - Inconsistent feature toggle behavior corrected Jan 27, 2026
@Mythindia Mythindia changed the title fix #6397 - Inconsistent feature toggle behavior corrected fix: #6397 - Inconsistent feature toggle behavior corrected Jan 27, 2026
Copy link
Contributor

@talissoncosta talissoncosta left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thanks for your contribution. I've just added a minor comment.

@vercel
Copy link

vercel bot commented Jan 30, 2026

The latest updates on your projects. Learn more about Vercel for GitHub.

Project Deployment Actions Updated (UTC)
flagsmith-frontend-preview Ready Ready Preview, Comment Jan 30, 2026 0:57am
flagsmith-frontend-staging Ready Ready Preview, Comment Jan 30, 2026 0:57am
1 Skipped Deployment
Project Deployment Actions Updated (UTC)
docs Ignored Ignored Preview Jan 30, 2026 0:57am

Request Review

Copy link
Contributor

@talissoncosta talissoncosta left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Looks good, thanks so much for your contribution!

@talissoncosta talissoncosta merged commit 88e448b into Flagsmith:main Feb 2, 2026
34 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

front-end Issue related to the React Front End Dashboard

Projects

None yet

Development

Successfully merging this pull request may close these issues.

UX bug: Inconsistent feature toggle behaviour based on window size

2 participants