Why We Added scrollTo(0, 0) and blur() on Detail Navigation

Background

In the DVD rental customer-facing app, we navigating between pages using the currentPage variable in App.vue without Vue Router. When navigating from a list page to a detail page, the following code was added:

window.scrollTo(0, 0)
;(document.activeElement as HTMLElement)?.blur()

Reason for scrollTo(0, 0)

When navigating to a detail page, if the user had scrolled down on the list, the detail page would open at that scrolled position. To avoid this, we explicitly scroll to the top on navigation.

Reason for blur()

After pressing a button, the button retains focus (focus remains on the element). Without clearing focus, the button appears to remain “selected,” which can feel unnatural. Calling blur() clears focus and provides a cleaner user experience.

Result

Adding these two lines made the page transition behavior much more natural.