Breakpoint options not reset

Bug is related to

• The Vanilla JavaScript version
• The React version
• 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.

[davidjerleke]

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

[davidjerleke]

@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