fix(Carousel): consistent stopOnInteraction behavior

[J-Michalek]

🔗 Linked issue

Fixes #5488

❓ Type of change

• 📖 Documentation (updates to the documentation or readme)
• 🐞 Bug fix (a non-breaking change that fixes an issue)
• 👌 Enhancement (improving an existing functionality)
• ✨ New feature (a non-breaking change that adds functionality)
• 🧹 Chore (updates to the build process or auxiliary tools and libraries)
• ⚠️ Breaking change (fix or feature that would cause existing functionality to change)

📚 Description

There was inconsistency between swipe and click on arrow button while using the autoplay plugin - swipe used to stop the playing, but clicking the button did not. To me both seems like an interaction that should stop the playing.

📝 Checklist

• I have linked an issue or discussion.
• I have updated the documentation accordingly.

[vercel]

Suggested change

	if (typeof props.autoplay === 'boolean' || props.autoplay.stopOnInteraction === undefined || props.autoplay.stopOnInteraction) {
	emblaApi.value?.plugins().autoplay?.stop()
	}
	}
	function scrollNext() {
	emblaApi.value?.scrollNext()
	if (typeof props.autoplay === 'boolean' || props.autoplay.stopOnInteraction === undefined || props.autoplay.stopOnInteraction) {
	if (props.autoplay && (typeof props.autoplay === 'boolean' || props.autoplay.stopOnInteraction !== false)) {
	emblaApi.value?.plugins().autoplay?.stop()
	}
	}
	function scrollNext() {
	emblaApi.value?.scrollNext()
	if (props.autoplay && (typeof props.autoplay === 'boolean' || props.autoplay.stopOnInteraction !== false)) {

The condition to stop autoplay on arrow click is incorrect: it tries to stop autoplay even when autoplay is false (disabled), which is unnecessary and logically wrong.

View Details

Analysis

Incorrect autoplay stop condition allows stopping non-existent plugin

What fails: scrollPrev() and scrollNext() in Carousel.vue attempt to stop the autoplay plugin even when autoplay is disabled (default: autoplay: false), causing semantically incorrect logic.

How to reproduce:

1. Create a carousel with default props (autoplay disabled)
2. Click the previous/next arrow buttons
3. The condition typeof props.autoplay === 'boolean' evaluates to true when autoplay = false
4. Code attempts emblaApi.value?.plugins().autoplay?.stop() on non-existent autoplay plugin

Result: While optional chaining (?.) prevents a runtime error, the code executes logically incorrect behavior: attempting to stop a plugin that was never initialized. According to embla-carousel-autoplay documentation, the plugin is only initialized when autoplay is truthy (if (props.autoplay)), but the stop condition incorrectly evaluates to true even when autoplay is false.

Expected: The condition should only attempt to stop autoplay when autoplay is actually enabled (truthy), ensuring semantic correctness.

Fix: Changed condition from:

if (typeof props.autoplay === 'boolean' || props.autoplay.stopOnInteraction === undefined || props.autoplay.stopOnInteraction)

to:

if (props.autoplay && (typeof props.autoplay === 'boolean' || props.autoplay.stopOnInteraction !== false))

This ensures:

• Only attempts to stop when autoplay is enabled (truthy check first)
• When enabled as boolean, always stops on interaction
• When enabled as object, respects the stopOnInteraction option (defaults to true per embla docs)

[benjamincanac]

@J-Michalek Seems relevant

[pkg-pr-new]

npm i https://pkg.pr.new/@nuxt/ui@5489

commit: f119284