You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
I've encountered an issue with the Simplebar component where event handling for dragging and clicking behaves inconsistently depending on the event type used. Here's the current behavior:
When using onClick for internal elements, clicking on .simplebar-sidebar does not trigger the event, but clicking on .simplebar-track does.
Conversely, when using onMouseDown for internal elements, clicking on .simplebar-track does not trigger the event, but clicking on .simplebar-sidebar does.
I'm looking for a solution that allows Simplebar to be draggable without interfering with the click events of its internal child elements.
Reproduction Steps:
Implement Simplebar in a demo environment.
Attach onClick event handlers to internal elements.
Observe that clicking on .simplebar-sidebar does not trigger the event, while .simplebar-track does.
Attach onMouseDown event handlers to internal elements.
Observe that clicking on .simplebar-track does not trigger the event, while .simplebar-sidebar does.
importSimpleBarfrom"simplebar-react";import"simplebar/dist/simplebar.min.css";constlongText="Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.";exportfunctionApp(){return(<SimpleBarstyle={{maxHeight: 200}}><divonClick={()=>{alert("123");}}onMouseDown={()=>{alert("456");}}ƒ>{longText}</div></SimpleBar>
);}
Question:
Is there a way to achieve both draggable functionality for Simplebar and proper click event handling for its child elements without conflicts?
Additional Information:
During my investigation, I noticed that the following CSS rule is set:
I would like to understand the rationale behind this design decision. Could you please explain why this was implemented and if there's a better approach that could address my issue?
Environment:
Simplebar Version: 3.2.6
Node.js: ^20
React: ^18
Browser: Google Chrome (latest version)
Operating System: MacOS
Labels:
question
enhancement
The text was updated successfully, but these errors were encountered:
Description:
I've encountered an issue with the Simplebar component where event handling for dragging and clicking behaves inconsistently depending on the event type used. Here's the current behavior:
onClick
for internal elements, clicking on.simplebar-sidebar
does not trigger the event, but clicking on.simplebar-track
does.onMouseDown
for internal elements, clicking on.simplebar-track
does not trigger the event, but clicking on.simplebar-sidebar
does.I'm looking for a solution that allows Simplebar to be draggable without interfering with the click events of its internal child elements.
Reproduction Steps:
onClick
event handlers to internal elements..simplebar-sidebar
does not trigger the event, while.simplebar-track
does.onMouseDown
event handlers to internal elements..simplebar-track
does not trigger the event, while.simplebar-sidebar
does.codesandbox
Question:
Is there a way to achieve both draggable functionality for Simplebar and proper click event handling for its child elements without conflicts?
Additional Information:
During my investigation, I noticed that the following CSS rule is set:
code link
I would like to understand the rationale behind this design decision. Could you please explain why this was implemented and if there's a better approach that could address my issue?
Environment:
Labels:
The text was updated successfully, but these errors were encountered: