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

grabCursor state doesn't get updated on breakpoint changes #7364

Labels
React t0ggles Linked to the t0ggles task

Comments

@Hasan-Mir
Copy link
Contributor

Hasan-Mir commented Mar 11, 2024

Check that this is really a bug

  • I confirm

Reproduction link

https://codesandbox.io/p/sandbox/swiper-grabcursor-bug-n6p2r5?file=%2Fsrc%2FApp.js%3A11%2C26

Bug description

If we want to have different behavior for grabCursor for some breakpoints like this:

<Swiper
  ref={sliderRef}
  slidesPerView={3}
  spaceBetween={10}
  breakpoints={{
    350: { slidesPerView: 1.2, grabCursor: false },
    420: { slidesPerView: 1.5, grabCursor: false },
    480: { slidesPerView: 2, grabCursor: false },
    560: { slidesPerView: 3, grabCursor: true },
    850: { slidesPerView: 3.5, grabCursor: true },
    1000: { slidesPerView: 4, grabCursor: true },
  }}
/>

When the breakpoint changes, Swiper doesn't update the grabCursor state until the slider is swiped. However this only happens for false -> true state transition not true -> false. I mean if the grabCursor state is true and we resize the window to a breakpoint in which the grabCursor is set to false, it won't get updated even after the user's swipe.

20240311_112223.mp4

Expected Behavior

No response

Actual Behavior

The grabCursor state should get updated immediately when the breakpoint changes.
Additionally, it would be beneficial if Swiper could merge breakpoint parameters (not just grabCursor) from one breakpoint to the next.

For example in this code:

<Swiper
  breakpoints={{
    350: { slidesPerView: 1.2, grabCursor: false },
    420: { slidesPerView: 1.5, grabCursor: false },
    480: { slidesPerView: 2, grabCursor: false },
    560: { slidesPerView: 3, grabCursor: true },
    850: { slidesPerView: 3.5, grabCursor: true },
    1000: { slidesPerView: 4, grabCursor: true },
  }}
/>

As you can see, from 350 breakpoint onwards, the grabCursor is set to false and from 560 breakpoint onwards, the grabCursor is set to true. To avoid redundancy, I prefer to omit the repeated property and write it as follows:

<Swiper
  breakpoints={{
    350: { slidesPerView: 1.2, grabCursor: false },
    420: { slidesPerView: 1.5},
    480: { slidesPerView: 2},
    560: { slidesPerView: 3, grabCursor: true },
    850: { slidesPerView: 3.5},
    1000: { slidesPerView: 4},
  }}
/>

Swiper version

11.0.7

Platform/Target and Browser Versions

Chrome 122.0.6261, Firefox 123.0.1

Validations

  • Follow our Code of Conduct
  • Read the docs.
  • Check that there isn't already an issue that request the same feature to avoid creating a duplicate.
  • Make sure this is a Swiper issue and not a framework-specific issue

Would you like to open a PR for this bug?

  • I'm willing to open a PR
@nolimits4web
Copy link
Owner

t0ggles-create swiper

Copy link

t0ggles bot commented Mar 19, 2024

Task nolimits4web/SWIPER-70 was created

t0ggles task SWIPER-70

Copy link

t0ggles bot commented Mar 28, 2024

Task nolimits4web/SWIPER-70 status changed to Done

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment