[Help]: Disable carousel navigation on tab

[gnllucena]

Summary

I understand navigation between the slides is accessibility feature, but in my case, I'm using embla for my creating account flow, each step is a slide.

I need to prevent the slide change when the user hits tab on the flow inputs.

How can I achieve that?

If applicable, which variants of Embla Carousel are relevant to this question?

• embla-carousel (Core)
• embla-carousel-react
• embla-carousel-vue
• embla-carousel-svelte
• embla-carousel-autoplay
• embla-carousel-auto-scroll
• embla-carousel-solid
• embla-carousel-auto-height
• embla-carousel-class-names
• embla-carousel-docs (Documentation)
• embla-carousel-docs (Generator)

Additional information

No response

CodeSandbox example

No response

[davidjerleke]

Hi @gnllucena,

This feature isn’t available yet but will be in a future release.

Best,
David

[gnllucena]

Appreciate the quick response.

Any way I can hack the feature enabling and/or disabling something on embla's opts/config during my flow's usage?

[gnllucena]

While the feature is not implemented yet, that's how I'm hacking the feature into the current version:

(I really don't recommend this solution, it makes the usability really terrible, but in my case, I must not let the user navigate to the next slides, unless they complete the current step)

const handleKeyDown = React.useCallback(
  (event: React.KeyboardEvent<HTMLDivElement>) => {
    if (event.key === "Tab" && enableTabNavigation === false) {
      event.preventDefault()
    }
  },
  [enableTabNavigation, scrollPrev, scrollNext]
)

<CarouselContext.Provider>
  <div
    onKeyDownCapture={handleKeyDown}
    {...props}
  >
    {children}
  </div>
</CarouselContext.Provider>

The lib is amazing, I'm really waiting for this feature to be build into it.

Thanks for the amazing work, @davidjerleke

[davidjerleke]

@gnllucena I understand that this isn’t optimal, but wouldn’t setting tabIndex to -1 on focusable elements inside your carousel disable the tab to focus behavior?

Best,
David

[gnllucena]

It does work and has exactly the same behavior.

However, I would prefer to have this configuration in only one place rather than adding it to every input, button, and select inside my slides.

I believe it will be easier to remove that behavior from a central place when Embla eventually adds this feature.

[gnllucena]

btw, I'd love to help build this feature, would you accept a PR for it? Any directions on how I can achieve that within Embla?

[davidjerleke]

@gnllucena I need to think about how this should work internally before we can work on this. I've added it to the roadmap:

• [Feat]: ⭐ Roadmap #841

[harshpandey002]

Hi @gnllucena, were you able to navigate inside of an input with left and right arrow keys?
in my case, the Left/Right keys is triggering the sliding of the carousel instead of input navigation.

Any way to hack that?

#854

[flawnson]

Facing the same issue, I can't navigate within an input field using left and right arrow keys. Would be great if there were an easy way to just disable keyboard navigation entirely.

[gnllucena]

hey @harshpandey002, yes I was, I had to change a few lines of code from shadcn, and also had to hack a lot to make it work, unfortunately there's a few weird behaviors that I'm not sure if it's Embla or NextJs cache fault (honestly believe it's NextJs...)

here's my Carousel.tsx:

"use client"

import * as React from "react"
import useEmblaCarousel, {
  type UseEmblaCarouselType,
} from "embla-carousel-react"
import { ArrowLeft, ArrowRight } from "lucide-react"

import { cn } from "@/lib/utils"
import { Button } from "@/app/components/primitives/button"

type CarouselApi = UseEmblaCarouselType[1]
type UseCarouselParameters = Parameters<typeof useEmblaCarousel>
type CarouselOptions = UseCarouselParameters[0]
type CarouselPlugin = UseCarouselParameters[1]

type CarouselProps = {
  opts?: CarouselOptions
  plugins?: CarouselPlugin
  orientation?: "horizontal" | "vertical"
  setApi?: (api: CarouselApi) => void
  enableArrowNavigation?: boolean
  enableTabNavigation?: boolean
}

type CarouselContextProps = {
  carouselRef: ReturnType<typeof useEmblaCarousel>[0]
  api: ReturnType<typeof useEmblaCarousel>[1]
  scrollPrev: () => void
  scrollNext: () => void
  canScrollPrev: boolean
  canScrollNext: boolean
} & CarouselProps

const CarouselContext = React.createContext<CarouselContextProps | null>(null)

function useCarousel() {
  const context = React.useContext(CarouselContext)

  if (!context) {
    throw new Error("useCarousel must be used within a <Carousel />")
  }

  return context
}

const Carousel = React.forwardRef<
  HTMLDivElement,
  React.HTMLAttributes<HTMLDivElement> & CarouselProps
>(
  (
    {
      orientation = "horizontal",
      opts,
      setApi,
      enableArrowNavigation,
      enableTabNavigation,
      plugins,
      className,
      children,
      ...props
    },
    ref
  ) => {
    const [carouselRef, api] = useEmblaCarousel(
      {
        ...opts,
        axis: orientation === "horizontal" ? "x" : "y",
      },
      plugins
    )
    const [canScrollPrev, setCanScrollPrev] = React.useState(true)
    const [canScrollNext, setCanScrollNext] = React.useState(true)

    const focusInput = React.useCallback((api: CarouselApi) => {
      if (!api) {
        return
      }

      const index = api.selectedScrollSnap()

      const slideElements = api.slideNodes()

      const currentSlide = slideElements[index]

      if (!currentSlide) {
        return
      }

      const inputs = currentSlide.querySelectorAll("input")

      for (let i = 0; i < inputs.length; i++) {
        const currentInput = inputs[i]

        if (currentInput.offsetWidth > 0 && currentInput.offsetHeight > 0) {
          currentInput.focus({ preventScroll: true })

          break
        }
      }
    }, [])

    const onSelect = React.useCallback((api: CarouselApi) => {
      if (!api) {
        return
      }

      setCanScrollPrev(api.canScrollPrev())
      setCanScrollNext(api.canScrollNext())
    }, [])

    const scrollPrev = React.useCallback(() => {
      api?.scrollPrev()
    }, [api])

    const scrollNext = React.useCallback(() => {
      api?.scrollNext()
    }, [api])

    const handleKeyDown = React.useCallback(
      (event: React.KeyboardEvent<HTMLDivElement>) => {
        if (event.key === "Tab" && enableTabNavigation === false) {
          const activeElement = document.activeElement as HTMLElement
          const activeSlide = activeElement.closest(".embla-slide")

          if (activeSlide) {
            const focusableElements = activeSlide.querySelectorAll(
              'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])'
            )

            const firstFocusableElement = focusableElements[0]
            const lastFocusableElement =
              focusableElements[focusableElements.length - 1]

            if (event.shiftKey) {
              if (activeElement === firstFocusableElement) {
                event.preventDefault()
              }
            } else {
              if (activeElement === lastFocusableElement) {
                event.preventDefault()
              }
            }
          }
        } else if (
          event.key === "ArrowLeft" &&
          enableArrowNavigation === true
        ) {
          event.preventDefault()
          scrollPrev()
        } else if (
          event.key === "ArrowRight" &&
          enableArrowNavigation === true
        ) {
          event.preventDefault()
          scrollNext()
        }
      },
      [enableTabNavigation, enableArrowNavigation, scrollPrev, scrollNext]
    )

    React.useEffect(() => {
      if (!api || !setApi) {
        return
      }

      setApi(api)
    }, [api, setApi])

    React.useEffect(() => {
      if (!api) {
        return
      }

      // onSelect(api)
      // focusInput(api)

      api.on("reInit", onSelect)
      api.on("select", onSelect)
      api.on("slidesInView", focusInput)

      return () => {
        api?.off("reInit", onSelect)
        api?.off("select", onSelect)
        api?.off("slidesInView", focusInput)
      }
    }, [api, focusInput, onSelect])

    return (
      <CarouselContext.Provider
        value={{
          carouselRef,
          api: api,
          opts,
          orientation:
            orientation || (opts?.axis === "y" ? "vertical" : "horizontal"),
          scrollPrev,
          scrollNext,
          canScrollPrev,
          canScrollNext,
        }}
      >
        <div
          ref={ref}
          onKeyDownCapture={handleKeyDown}
          className={cn("grid h-full overflow-x-auto", className)}
          role="region"
          aria-roledescription="carousel"
          tabIndex={0}
          {...props}
        >
          {children}
        </div>
      </CarouselContext.Provider>
    )
  }
)
Carousel.displayName = "Carousel"

const CarouselContent = React.forwardRef<
  HTMLDivElement,
  React.HTMLAttributes<HTMLDivElement>
>(({ className, ...props }, ref) => {
  const { carouselRef } = useCarousel()

  return (
    <div ref={carouselRef} className="overflow-hidden">
      <div
        ref={ref}
        // padding is necessary otherwise the carousel will not work
        className={cn("grid h-full grid-flow-col p-[0.1px]", className)}
        style={{
          gridAutoColumns: "100%",
        }}
        {...props}
      />
    </div>
  )
})
CarouselContent.displayName = "CarouselContent"

const CarouselItem = React.forwardRef<
  HTMLDivElement,
  React.HTMLAttributes<HTMLDivElement>
>(({ className, ...props }, ref) => {
  return (
    <div
      ref={ref}
      role="group"
      aria-roledescription="slide"
      className={cn("embla-slide w-full flex-none", className)}
      {...props}
    />
  )
})
CarouselItem.displayName = "CarouselItem"

const CarouselPrevious = React.forwardRef<
  HTMLButtonElement,
  React.ComponentProps<typeof Button>
>(({ className, variant = "outline", size = "icon", ...props }, ref) => {
  const { orientation, scrollPrev, canScrollPrev } = useCarousel()

  return (
    <Button
      ref={ref}
      variant={variant}
      size={size}
      className={cn(
        "absolute size-8 rounded-full",
        orientation === "horizontal"
          ? "-left-12 top-1/2 -translate-y-1/2"
          : "-top-12 left-1/2 -translate-x-1/2 rotate-90",
        className
      )}
      disabled={!canScrollPrev}
      onClick={scrollPrev}
      {...props}
    >
      <ArrowLeft className="size-4" />
      <span className="sr-only">Previous slide</span>
    </Button>
  )
})
CarouselPrevious.displayName = "CarouselPrevious"

const CarouselNext = React.forwardRef<
  HTMLButtonElement,
  React.ComponentProps<typeof Button>
>(({ className, variant = "outline", size = "icon", ...props }, ref) => {
  const { orientation, scrollNext, canScrollNext } = useCarousel()

  return (
    <Button
      ref={ref}
      variant={variant}
      size={size}
      className={cn(
        "absolute size-8 rounded-full",
        orientation === "horizontal"
          ? "-right-12 top-1/2 -translate-y-1/2"
          : "-bottom-12 left-1/2 -translate-x-1/2 rotate-90",
        className
      )}
      disabled={!canScrollNext}
      onClick={scrollNext}
      {...props}
    >
      <ArrowRight className="size-4" />
      <span className="sr-only">Next slide</span>
    </Button>
  )
})
CarouselNext.displayName = "CarouselNext"

export {
  type CarouselApi,
  Carousel,
  CarouselContent,
  CarouselItem,
  CarouselPrevious,
  CarouselNext,
}

and that's how I use it:

<Carousel
      setApi={setApi}
      draggable={false}
      enableArrowNavigation={false}
      enableTabNavigation={false}
      opts={{
        watchDrag: false,
        watchSlides: false,
        startIndex: 0,
      }}
      className="lg:items-center lg:justify-center lg:p-20"
    >
      <CarouselContent>
        <CarouselItem>
          <LogInForm form={formLogIn} onSuccess={() => onLogInSuccess()} />
        </CarouselItem>
        <CarouselItem>
          <ConfirmEmailForm
            form={formConfirmEmail}
            onSuccess={() => onConfirmEmailSuccess()}
          />
        </CarouselItem>
        <CarouselItem>
          <AddPhoneNumberForm
            form={formAddPhoneNumber}
            onSuccess={() => onAddPhoneNumberSuccess()}
          />
        </CarouselItem>
        <CarouselItem>
          <ConfirmPhoneNumberForm
            form={formConfirmPhoneNumber}
            onSuccess={() => onConfirmPhoneNumberSuccess()}
          />
        </CarouselItem>
      </CarouselContent>
    </Carousel>

[flawnson]

This works great! Successfully prevents navigating the carousel on arrow key press. This does also prevent navigating within an Input field however.

[davidjerleke]

@flawnson and @gnllucena are you using Embla Carousel with Shadcn?

[flawnson]

Yes I am

[davidjerleke]

@flawnson I think this is related to Shadcn in that case because Embla doesn't listen to arrow navigation by default. So would be better to discuss this in the Shadcn repository maybe?