grabCursor state doesn't get updated on breakpoint changes

[Hasan-Mir]

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]

t0ggles-create swiper

[t0ggles]

Task nolimits4web/SWIPER-70 was created

[t0ggles]

Task nolimits4web/SWIPER-70 status changed to Done