Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Simplebar Dragging and Click Event Handling Issue #711

Open
BlackishGreen33 opened this issue Dec 2, 2024 · 0 comments
Open

Simplebar Dragging and Click Event Handling Issue #711

BlackishGreen33 opened this issue Dec 2, 2024 · 0 comments
Labels

Comments

@BlackishGreen33
Copy link

BlackishGreen33 commented Dec 2, 2024

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
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
None yet
Development

No branches or pull requests

1 participant