Embla-carousel: Breakpoint options not reset

[iamchanii]

Bug is related to

• [ ] The Vanilla JavaScript version
• [ ] The React version
• [x] The Embla Carousel core (all versions)
• [ ] Documentation website
• [ ] Other

Embla Carousel version

• v4.3.0

Describe the bug

• Some options what applied by CSS breakpoints is not reset when viewport resized to origin.

CodeSandbox

• https://codesandbox.io/s/embla-carousel-default-react-forked-lyjqj?file=/src/css/embla.css&resolutionWidth=320&resolutionHeight=675

Steps to reproduce

1. You can see codesandbox browser resolution is 320x675.
2. Drag carousel. dragFree options is false (initial)
3. To apply dragFree to true, resize codesandbox browser width up to 640px. I wrote breakpoint options in embla.css.
4. Drag carousel. now dragFree options is true.
5. Resize codesandbox browser width down to 375px.
6. Drag carousel. dragFree options is still true.

Expected behavior

• options that applied by breakpoints should be reset(or disabled) when viewport resized to origin.

Additional context

I don't understand whole code base yet, I guess options are overwriting when activate() called.
just now, I can avoid this bug like this:

const Embla = styled('div', {
  '&:before': {
    display: 'none',
    content: `'{"dragFree":false}'`,
  },

  variants: {
    size: {
      lg: {
        when: {
          desktop: {
            '&:before': {
              content: `'{"dragFree":true}'`,
            },
          },
        },
      },
    },
  },
}

I love your works. keep going to good things.

[davidcetinkaya]

Hi @iamchanii,

Nice catch! And thank you for the clear issue description. The pseudo options is still experimental so it’s great if we can solve any related bugs at this stage.

Looking at the code, I can see why this is happening and I missed to cover this case. I’ll look into this and will let you know when I’ve done so.

Best,
David

[davidcetinkaya]

Hi @iamchanii,

Try this CodeSandbox which includes a patch fix for this bug. Feel free to try it in combination with the initializer options:

 const [emblaRef, emblaApi] = useEmblaCarousel({ loop: false }) // <-- this is the initializer options

And here's a specification of how it's expected to work.

Let me know how it goes.

Best,
David

[iamchanii]

@davidcetinkaya Hi, I checked out csb. it works like what I expected! is something fixed in embla-carousel-react.js or did I use it wrong?

[davidcetinkaya]

@iamchanii thank you for testing 👍🏻.

You did everything right so I can confirm that this is a bug. I added the embla-carousel-react.js file which includes a fix for this bug.

I’ll let you know when I’ve released the fix publicly which will be with v4.3.1.

Best,
David

[davidcetinkaya]

Hi @iamchanii,

I've released v4.3.1 and it includes a fix for this bug. Install the latest version and the issue should be gone. Please let me know if it's working as intended. Thank you for your help.

Best,
David