Semantic-Org/Semantic-UI-React

Search: preventing event bubbling leading to unexpected behaviour

Open

#3118 opened on Aug 29, 2018

View on GitHub
 (7 comments) (0 reactions) (0 assignees)JavaScript (13,136 stars) (4,065 forks)batch import
bughelp wantedstale

Description

Bug Report

Steps

Render any other component which is normally expected to close when clicked outside (e.g. Popup) Click on Search component The other component (e.g. Popup) does not close on clicking on Search component

Expected Result

Other components (e.g Popup) that rely on window onclick listener to close when clicked outside its area must be able to close

Actual Result

Search component prevents event bubbling and other components (e.g Popup) are not closed when clicking on Search component

Version

0.82.3

Testcase

CodeSandbox to replicate the issue

Contributor guide

Tech stack
javascriptreact
Domain
frontend
Issue type
bug
DifficultyEstimated implementation difficulty for a new contributor, from 1 for very small changes to 5 for expert-level work.
3
Estimated timeA rough time range for an experienced contributor to investigate, implement, test, and prepare a pull request.
1-3 hours
Activity statusHow available the issue appears right now: fresh, active, stale, blocked, or waiting on maintainer input.
stale
ClarityHow clearly the issue explains the expected change, acceptance criteria, and next step.
clear
Prerequisites
React event handlingEvent bubblingSemantic UI React components
Newbie friendlinessA 1-100 score estimating how approachable this issue is for first-time contributors.
60
Research direction
Investigate the Search component's event handlers in the Semantic UI React source code to identify where event.stopPropagation() is being called. Compare with the Popup component's behavior to understand the expected event flow. Review the linked CodeSandbox testcase to replicate the issue. Check issue comments for any proposed solutions or discussions.