It has come to my attention that mobile users on Chrome/Android are experiencing some unusual behavior with modals. The autofocus feature is not working as expected, and the view keeps scrolling to the bottom.
This issue specifically occurs with modals that are placed at the end of a page.
Illustrative Examples
Experimentation Area
To showcase this problem, I have set up a sandbox environment (https://codesandbox.io/s/little-firefly-ruytgy?file=/src/App.vue).
Visual Demonstration
I have also created a short screencast for visual reference.
https://i.sstatic.net/F5zz7.gif
Code Snippet
Below is the code snippet from App.vue in our example:
<template>
{/* Code snippet goes here */}
</template>
<script>
{/* JavaScript code block goes here */}
</script>
Temporary Fix
To address this issue temporarily, I have implemented a workaround: Prior to opening the modal, utilize
window.scroll(0,0);
This action forces the page to scroll to the top before opening the modal. However, it's not an ideal solution as users would have to scroll back down if they close the modal.