Carousel.Slide x.clickAllowed is not a function

[SomiDivian]

What package has an issue

@mantine/carousel

Describe the bug

"@mantine/carousel": "^6.0.9",
"embla-carousel-react": "^8.0.0-rc01"

Error

CarouselSlide.tsx:51 Uncaught TypeError: _a2.clickAllowed is not a function

What version of @mantine/hooks page do you have in package.json?

6.0.9

If possible, please include a link to a codesandbox with the reproduced problem

No response

Do you know how to fix the issue

None

Are you willing to participate in fixing this issue and create a pull request with the fix

None

Possible fix

No response

[rtivital]

use embla-carousel-react 7.x instead of 8.x

[davidjerleke]

Hi!

Just adding my two cents. The release notes for v8 state that clickAllowed has been removed and is now handled automatically. I don’t think downgrading Embla is a future proof solution but rather band aid for now.

[rtivital]

Yes, it will be fixed in @mantine/carousel once embla 8.0.0 is out, for now, it is required to use 7.0

[davidjerleke]

I understand. Thanks for the prompt reply 👍🏻.

Cheers

[yunusirmak]

You can also avoid this issue by giving

        onClick={(e) => {
          e.stopPropagation();
        }}

to your carousel slide items. This fixes the issue without downgrading the package.

Here is my full code for reference:

  const slides = images.map((url) => (
    <Carousel.Slide key={url}>
      <Image
        onClick={(e) => {
          e.stopPropagation();
        }}
        src={url}
        width="100%"
        height={carouselHeight}
        style={{ objectFit: "cover" }}
      />
    </Carousel.Slide>
  ));

[ejixxer999]

how do I got down to v7 ?

[GCMO]

You can also avoid this issue by giving

        onClick={(e) => {
          e.stopPropagation();
        }}

to your carousel slide items. This fixes the issue without downgrading the package.

Here is my full code for reference:

  const slides = images.map((url) => (
    <Carousel.Slide key={url}>
      <Image
        onClick={(e) => {
          e.stopPropagation();
        }}
        src={url}
        width="100%"
        height={carouselHeight}
        style={{ objectFit: "cover" }}
      />
    </Carousel.Slide>
  ));

You can also avoid this issue by giving

        onClick={(e) => {
          e.stopPropagation();
        }}

to your carousel slide items. This fixes the issue without downgrading the package.

Here is my full code for reference:

  const slides = images.map((url) => (
    <Carousel.Slide key={url}>
      <Image
        onClick={(e) => {
          e.stopPropagation();
        }}
        src={url}
        width="100%"
        height={carouselHeight}
        style={{ objectFit: "cover" }}
      />
    </Carousel.Slide>
  ));

THANK YOU! That worked at least on the Carousel Images.
However if the user clicks outside the images (in the slider, or title above the images), the error shows up again.
Any recommendations?

[rtivital]

Fixed in 6.0.17 – clickAllowed is no longer called