[Bug]: Scroll offset issue with vertical axis and focusable elements

[pukapi]

Which variants of Embla Carousel are you using?

• [x] embla-carousel (Core)
• [x] 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-fade
• [ ] embla-carousel-docs (Documentation)
• [ ] embla-carousel-docs (Generator)

Steps to reproduce

1. Use axis: 'y' in the carousel options.
2. Add a focusable element (e.g. <button>) to each slide.
3. Use keyboard navigation (Tab or Shift+Tab) to move focus between slides.
4. The focused slide does not align properly at the top.

Expected Behavior

When navigating using keyboard focus (e.g. Tab),
the focused slide should scroll fully into view according to the axis direction.

Based on the watchFocus option, this seems like it might be intended behavior for all axis modes.
This works as expected with axis: 'x', but with axis: 'y', the focused slide currently scrolls incorrectly or only partially into view.

Additional Context

The following workaround helps for now:

useEffect(() => {
  if (!emblaApi) return;
  emblaApi.on('select', () => {
    emblaApi.rootNode().scrollTop = 0;
  });
}, [emblaApi]);

What browsers are you seeing the problem on?

No response

Version

v8.6.0

CodeSandbox

https://codesandbox.io/p/devbox/embla-carousel-y-axis-react-forked-l59qrh

Before submitting

• [x] I've made research efforts and searched the documentation
• [x] I've searched for existing issues
• [x] I agree to follow this project's Contributing Guidelines for bug reports

[davidjerleke]

Hi @pukapi,

Thanks for reporting this — you're absolutely right, it's a bug. The scroll property reset should be axis-aware. As of now, it only targets scrollLeft, as seen in the code.

[davidjerleke]

Solved in https://github.com/davidjerleke/embla-carousel/commit/042170b2abdbf16d95894aae8b07cc04e01fa2f0. Will be released in v9.