Fixed header with reveal prop doesn't reshow itself on page navigation while loading plugin is active

[kalvenschraut]

What happened?

When scrolled down on a page with the fixed header hidden due to the reveal prop and clicking on a link that navigates to another page. If the page has a q loading plugin active then the header will not reappear. This is occuring do the fact the q loading plugin sets qScrollPrevented to true. If qScrollPrevented is true when the onPageScroll function is called in QLayout via the onScroll event then the $Layout.scroll is never updated which the QHeader watches.

What did you expect to happen?

For the QHeader to not appear disappeared on the page navigated to.

Reproduction URL

https://github.com/kalvenschraut/vitejs-vite-uswlyh/tree/master

How to reproduce?

I had a lot of issues reproducing consistently on the stackblitz site but I have narrowed down what exactly the problem by debugging in my applications code. I feel like the scroll object needs to be updated regardless if scroll is prevented for cases like mine.

Flavour

Vite Plugin (@quasar/vite-plugin)

Areas

Components (quasar), Plugins (quasar)

Platforms/Browsers

Chrome

Quasar info output

System:
    OS: Linux 5.10 Gentoo/Linux
    CPU: (4) x64 Intel(R) Core(TM) i5-6500 CPU @ 3.20GHz
    Memory: 6.65 GB / 31.33 GB
    Container: Yes
    Shell: 5.1.8 - /bin/bash
  Binaries:
    Node: 16.10.0 - /usr/bin/node
    npm: 6.14.15 - /usr/bin/npm
    Watchman: 4.9.0 - /usr/bin/watchman
  Browsers:
    Chromium: 95.0.4638.69
    Firefox: 91.3.0esr
  npmPackages:
    @quasar/extras: ^1.13.4 => 1.13.4
    @quasar/quasar-ui-qcalendar: 4.0.0-beta.13 => 4.0.0-beta.13
    @quasar/vite-plugin: ^1.0.7 => 1.0.7
    @vitejs/plugin-vue: ^2.3.1 => 2.3.1
    quasar: 2.6.2 => 2.6.2

Relevant log output

No response

Additional context

No response

[github-actions]

Hi @kalvenschraut! 👋

It looks like you provided an invalid or unsupported reproduction URL.
Do not use any service other than Codepen, jsFiddle, Codesandbox, and GitHub.
Make sure the URL you provided is correct and reachable. You can test it by visiting it in a private tab, another device, etc.
Please edit your original post above and provide a valid reproduction URL as explained.

Without a proper reproduction, your issue will have to get closed.

Thank you for your collaboration. 👏

[kalvenschraut]

Stack blitz should be an allowed place for a repro.... exported it to github I Guess

[kalvenschraut]

My solution would be adding the data.position.top !== scroll.value.position to the if check OR just remove document.qScrollPRevented !== true completely, but I don't know what this all would affect. I can make a PR if needed

if (props.container === true || data.position.top !== scroll.value.position || document.qScrollPrevented !== true)

[freakzlike]

The issue still exists. I've created a workaround, which temporary resets the reveal prop on route change:

<template>
  <q-header :reveal="revealActive">
    <!-- ... -->
  </q-header>
</template>

<script setup lang="ts">
// ...
const revealActive = ref(true)
const hookCleanup = router.beforeEach(() => {
  revealActive.value = false
  nextTick(() => {
    revealActive.value = true
  })
})
onBeforeUnmount(() => {
  hookCleanup()
})
</script>