Simplebar Dragging and Click Event Handling Issue

[BlackishGreen33]

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:

• 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:

1. Implement Simplebar in a demo environment.
2. Attach onClick event handlers to internal elements.
3. Observe that clicking on .simplebar-sidebar does not trigger the event, while .simplebar-track does.
4. Attach onMouseDown event handlers to internal elements.
5. Observe that clicking on .simplebar-track does not trigger the event, while .simplebar-sidebar does.

codesandbox

import SimpleBar from "simplebar-react";
import "simplebar/dist/simplebar.min.css";

const longText =
  "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.";

export function App() {
  return (
    <SimpleBar style={{ maxHeight: 200 }}>
      <div
        onClick={() => {
          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:

code link

[data-simplebar].simplebar-dragging .simplebar-track {
  pointer-events: all;
}

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