Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.
And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.
RFC: Popup more intuitive behavior with multiple `on` events
See original GitHub issueBug Report
The problem happens when using multiple events to trigger Popup.
Can be reproduced with <Popup trigger={<button>Show tooltip</button>} content='tooltip' on={['click', 'hover']} but the easiest way is with <Popup trigger={<button>Show tooltip</button>} content='tooltip' on={['click', 'focus']}.
Just try clicking the button. For the first time, it opens the popup and immediately closes it. Following clicks work correctly.
This problem has been mentioned in #2075 by @austinfox here.
Steps
- Go to Semantic UI React Popup demo.
- Edit e.g. first example
Popupcomponent to contain multiple on events i.e.on={['click', 'focus']}. - Click the popup trigger.
Expected Result
Popup is displayed and stays open.
Actual Result
Popup is displayed and closed immediately.
Version
0.80.0
Testcase
Check the steps section above.
Issue Analytics
- State:
- Created 5 years ago
- Comments:8 (2 by maintainers)
Top Results From Across the Web
Top Related Medium Post
Top Related StackOverflow Question
Troubleshoot Live Code
Top Related Reddit Thread
Top Related Hackernoon Post
Top Related Tweet
Top Related Dev.to Post
Top Related Hashnode Post
I’m not sure this is a bug necessarily. The order of events in the browser when clicking a button is
clickthenfocus. What is happing is technically correct, though not helpful. The first event, click, opens the popup while the immediate second event, focus, closes it again.The
onprop toggles the popup on the given events. There are a few ways this could be reworked to give more intuitive results.openOn / closeOn
Splitting or adding these props would allow you to specify which events should open and close the popup. You’d apply focus to the
openOnand click to bothopenOnandcloseOn. This way, focus only opens the popup.Special focus/blur handling
This might be the more desirable solution. Focus could strictly open the popup and blur could strictly close it. This is not technically the correct behavior given the prop config of “toggle on focus”, however, it does give a more intuitive behavior. I would think most users would expect focus to open the popup.
I’d like to hear thoughts and feedback on these and any other solutions folks may have.
This issue will be closed due to lack of activity for 12 months. If you’d like this to be reopened, just leave a comment; we do monitor them!