Skip to content

fix(dev-mode): use animationend for modal scroll lock #1140

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
AdeshDeshmukh wants to merge 1 commit into
base: main
Choose a base branch
from
Open

fix(dev-mode): use animationend for modal scroll lock #1140

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
20 changes: 9 additions & 11 deletions frontend/dev-mode/src/components/SettingsModal.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
<script setup lang="ts">
import { ref, onMounted, onBeforeUnmount } from 'vue'
import { ref, onBeforeUnmount } from 'vue'

import ParameterTooltip from '@/components/ParameterTooltip.vue'
import Accordion from '@/components/ui/Accordion.vue'
Expand Down Expand Up @@ -30,8 +30,6 @@ const parameters = ref({ ...(props.parameters || DEFAULT_PARAMS_VALUES) })

const isChat = ref(session.value.type === 'chat')
const isModalOpen = ref(true)
const isVisible = ref(false)

const closeModal = () => {
isModalOpen.value = false
requestAnimationFrame(() => {
Expand All @@ -44,13 +42,13 @@ const onBackdropClick = () => {
closeModal()
}

onMounted(() => {
// We need to add the animation delay so this doesn't have a race condition
setTimeout(()=>{
document.body.classList.add('overflow-hidden')
// @TODO: use the actual `onanimationend` event instead of the static timer
}, 150)
})
const onModalAnimationEnd = (event: AnimationEvent) => {
if (event.animationName !== 'modalShow' || !isModalOpen.value) {
Copy link

Copilot AI Mar 25, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Because this component uses <style scoped>, Vue’s SFC compiler rewrites keyframe names to include a scope hash (e.g., modalShow-xxxx) and updates the animation: declarations accordingly. At runtime event.animationName will likely be the rewritten name, so comparing it to the literal 'modalShow' can prevent the scroll lock from ever being applied. Consider loosening the check (e.g., startsWith('modalShow')), checking event.target === event.currentTarget instead, or moving the @keyframes definition to an unscoped/global style block so the name stays stable.

Suggested change
if (event.animationName !== 'modalShow' || !isModalOpen.value) {
if (!isModalOpen.value || event.target !== event.currentTarget) {

Copilot uses AI. Check for mistakes.
Copy link
Copy Markdown
Contributor

@javisperez javisperez Mar 25, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This is true, Vue's scoped style adds a hash to both the element and the classes (including keyframes) to scope it. Im not sure if the suggested change makes sense tho.

@AdeshDeshmukh did you try the prod build on this? you can do pnpm build and then pnpm preview to run and test the production build.

What i would try would probably be something like:

if (!isModaOpen.value || !event.animationName.includes('modalShow')) {

I think that could work on both dev and prod regardless of the scoped style.

Another solution is to just make the style a global style (ie. remove the scoped attribute from the <style>) but i dont remember if this class would collapse with some other class (i doubt it tho).

return
}

document.body.classList.add('overflow-hidden')
}

onBeforeUnmount(() => {
closeModal()
Expand Down Expand Up @@ -113,7 +111,7 @@ const onChatToggle = () => {
<div class="max-h-screen overflow-y-auto">
<div class="modal-content"
@click.stop
@animationend="isVisible = true">
@animationend="onModalAnimationEnd">
<div class="flex items-center justify-between">
<h2 class="text-2xl">Settings</h2>
<button class="text-off-white hocus:text-gold" @click="closeModal()">
Expand Down
Loading