search

home-assistant / frontend

:lollipop: Frontend for Home Assistant
https://demo.home-assistant.io
Other
3.95k stars 2.68k forks source link

Switching to a different page using navigate service calls starts at same location #8242

Closed ASNNetworks closed 9 months ago

ASNNetworks commented 3 years ago

Checklist

The problem

I created my own tab bar using button cards in a horizontal stack, to emulate the default tabs. Each button has a service call that navigates to a lovelace page in that dashboard.

When scrolling through Lovelace and using a navigate service call to a different tab, the new tab starts at the same location as where the previous tab stopped. So for instance: when I open tab A and scroll all the way to the bottom, and then open tab B then I'm at the bottom of tab B as well.

See video of the problem: https://user-images.githubusercontent.com/54230480/105841558-15011f80-5fd5-11eb-8b89-7133f49b4a39.mp4

Expected behavior

Each tab should either remember where that tab was ended, or it should always start at the top when navigating to a new tab. Right now it remember where the previous tab was and starts at that same location on the new tab. It should work the same as how Lovelace tabs work.

Steps to reproduce

Environment

Additional information

I use button cards to navigate through my dashboard. This bug only occurs when using the navigate service call.

ASNNetworks commented 3 years ago

Bump

spacegaier commented 3 years ago

Please do not bump unless the stale bot asks you to.

blair287 commented 3 years ago

Yep same issue

github-actions[bot] commented 3 years ago

There hasn't been any activity on this issue recently. Due to the high number of incoming GitHub notifications, we have to clean some of the old issues, as many of them have already been resolved with the latest updates. Please make sure to update to the latest Home Assistant version and check if that solves the issue. Let us know if that works for you by adding a comment 👍 This issue has now been marked as stale and will be closed if no further activity occurs. Thank you for your contributions.

ASNNetworks commented 3 years ago

Not fixed with latest HA currently available.

github-actions[bot] commented 2 years ago

There hasn't been any activity on this issue recently. Due to the high number of incoming GitHub notifications, we have to clean some of the old issues, as many of them have already been resolved with the latest updates. Please make sure to update to the latest Home Assistant version and check if that solves the issue. Let us know if that works for you by adding a comment 👍 This issue has now been marked as stale and will be closed if no further activity occurs. Thank you for your contributions.

ASNNetworks commented 2 years ago

Not fixed with latest HA currently available.

github-actions[bot] commented 2 years ago

There hasn't been any activity on this issue recently. Due to the high number of incoming GitHub notifications, we have to clean some of the old issues, as many of them have already been resolved with the latest updates. Please make sure to update to the latest Home Assistant version and check if that solves the issue. Let us know if that works for you by adding a comment 👍 This issue has now been marked as stale and will be closed if no further activity occurs. Thank you for your contributions.

ASNNetworks commented 2 years ago

Not fixed with latest HA currently available: 2021.12.7

github-actions[bot] commented 2 years ago

There hasn't been any activity on this issue recently. Due to the high number of incoming GitHub notifications, we have to clean some of the old issues, as many of them have already been resolved with the latest updates. Please make sure to update to the latest Home Assistant version and check if that solves the issue. Let us know if that works for you by adding a comment 👍 This issue has now been marked as stale and will be closed if no further activity occurs. Thank you for your contributions.

ASNNetworks commented 2 years ago

Issue is still present, has never been addressed.

github-actions[bot] commented 2 years ago

There hasn't been any activity on this issue recently. Due to the high number of incoming GitHub notifications, we have to clean some of the old issues, as many of them have already been resolved with the latest updates. Please make sure to update to the latest Home Assistant version and check if that solves the issue. Let us know if that works for you by adding a comment 👍 This issue has now been marked as stale and will be closed if no further activity occurs. Thank you for your contributions.

ASNNetworks commented 2 years ago

Issue is still present, has never been addressed.

github-actions[bot] commented 1 year ago

There hasn't been any activity on this issue recently. Due to the high number of incoming GitHub notifications, we have to clean some of the old issues, as many of them have already been resolved with the latest updates. Please make sure to update to the latest Home Assistant version and check if that solves the issue. Let us know if that works for you by adding a comment 👍 This issue has now been marked as stale and will be closed if no further activity occurs. Thank you for your contributions.

ASNNetworks commented 1 year ago

Issue is still present, has never been addressed.

kimmobrunfeldt commented 1 year ago

I can confirm the issue still exists. It seems to only happen when navigating to a page that's already in cache.

bramkragten commented 1 year ago

Sorry, what do you mean by a navigate service call?

If you created a custom element to do the navigation, you can easily add a scroll to top to it?

ASNNetworks commented 1 year ago

Sorry, what do you mean by a navigate service call?

If you created a custom element to do the navigation, you can easily add a scroll to top to it?

I have hidden the default menubar and created my own navigation bar. Basically a horizontal stack at the bottom of the page where each button is a service call that directs to a tab in a dashboard. All works well function wise. I made a video where I showed what I mean in my original post.

So basically: when you use a service call in a card (like button-card) you can navigate to a specific tab in a dashboard. When you scroll on that new tab down (or up), and then go back to the previous tab by another service-call, the previous tab is also scrolled down (or up)

Example: I open my dashboard in tab 1. I then use a button with service call to navigate to tab 2. In tab 2 I scroll down the page. Then I go to tab 1 by again using a button with a service call. Then tab 1 is also somehow scrolled down, like tab 2 was. While tab 1 was never controlled. It should either remember the position of the previous tab OR reload the tab and go to the top automatically like the menubar behaves.

Might be some caching issue, where controlling a tab that has been opened through service call, also controls the previous tab.

bramkragten commented 1 year ago

That is not a service call, but I get what you mean.

ASNNetworks commented 1 year ago

That is not a service call, but I get what you mean.

Aren't they called service calls by HA documentation?: https://www.home-assistant.io/docs/scripts/service-calls/

In my case I use navigate and url of a specific tab as a service call with custom button-card. Or does this have a different name with what I mean?

kimmobrunfeldt commented 1 year ago

The issue can be replicated by adding a button card with e.g. a tap action using navigate and for example navigation_path: "/lovelace/my_subview".

When navigating between the views and scrolling in between, the scroll position is not correctly restored by the frontend (tested with desktop browser in addition to iOS). For example:

  1. In default dashboard, scroll down to a button card (let's say position 100px from top) with tap action that navigates to path /lovelace/my_subview
  2. In the subview, scroll up (scroll position 0) and press back button from the browser
  3. The UI is back at the default dashboard but not at scroll position 100px one would expect.

That's the bug. In my opinion the correct behavior would be that in the example step 3, UI went back to default dashboard back at scroll position 100px from top. So practically the same what @ASNNetworks described.

I'm sure this can be fixed with some combination, but it could be a bit problematic to release as some might rely on this behavior.

kimmobrunfeldt commented 1 year ago

I investigated this further within my own HA dev environment.

History.scrollRestoration is 'auto' by default and not overridden within HA frontend so browser will try and restore the scroll position.

When testing how scrollRestoration should work with my own minimal HTML (copied at the bottom of this post if interested), I noticed browser requires a precise sequencing of history.pushState vs rendering new content to DOM. My example HTML at the bottom works as "regular" static websites (no history.pushState or dynamic DOM content) do.

Possible fix ideas that came to my mind:

To solve my immediate pain, I implemented a pretty horrible hack. I do not recommend copying this, but sharing it here if it helps solving the core issue. In our default dashboard, I added a visually hidden button-card custom card which allows running arbitrary JS in the user's browser once the page is loaded. In that JS I monkey patch the global window.history.pushState to implement the second fix I suggested above.

type: custom:button-card
styles:
  card:
    - height: 0px
    - opacity: 0
name: |
  [[[
    if (!window.__monkeyPatchDone) {
      window.__previousScrollY = 0;  
      const originalPushState = window.history.pushState;

      window.history.pushState = (state, unused, url) => { 
        console.log('Monkey patched pushState called!')
        window.__previousScrollY = window.scrollY;
        originalPushState.apply(window.history, [state, unused, url]);
        setTimeout(() => window.scrollTo({ top: 0 }), 1)
      }

      window.addEventListener('popstate', (event) => {
        // This trick covers user bouncing back and forward
        const currScrollY = window.scrollY;
        const prevScrollY = window.__previousScrollY
        window.__previousScrollY = currScrollY;

        if (Number.isFinite(prevScrollY)) {
          setTimeout(() => {
            window.scrollTo({
              top: prevScrollY
            })
            console.log(`Scrolled to ${prevScrollY}`);
          }, 5);
          setTimeout(() => console.log('Scroll now', window.scrollY), 200)
        } 
      });

      window.history.scrollRestoration = 'manual';  
      window.__previousScrollY = window.scrollY;

      console.log('Monkey patch done!')
    }
    window.__monkeyPatchDone = true;
  ]]]
Minimal history pushState and scrollRestoration HTML playground ```html Test
```
My testing dashboards as YAML ```yaml title: Dev Home views: - path: default_view title: Home cards: - type: vertical-stack cards: - type: markdown content: >- ## Section 1 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse quis rhoncus nulla. Nulla vel odio pulvinar, dapibus massa at, dictum orci. Vestibulum eu ullamcorper ex, eget hendrerit est. In ex est, cursus et faucibus et, luctus ut est. Fusce at risus sapien. Vivamus egestas hendrerit eros, rhoncus semper sem vestibulum ut. Aliquam fringilla diam ac facilisis finibus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam sed risus in ex ultricies tincidunt rutrum et mauris. Suspendisse egestas ante vel nibh congue maximus et eget orci. Phasellus sagittis interdum ipsum et feugiat. Phasellus dapibus tempor libero, et aliquet nisl bibendum id. Praesent gravida felis id turpis sagittis, lacinia dignissim risus suscipit. Maecenas lorem tortor, consectetur nec aliquet ac, lobortis at diam. Integer molestie cursus fermentum. Nulla ut ante augue. Pellentesque ligula velit, congue in lacus vel, efficitur semper neque. Morbi id sapien ac justo fermentum aliquet. Nam tempus sem at mauris efficitur, id placerat tellus mattis. Integer lectus enim, blandit at ligula at, placerat interdum orci. Integer quam sapien, fermentum nec blandit et, pretium placerat est. For more information see the [Markdown Cheatsheet](https://commonmark.org/help). - type: horizontal-stack cards: - show_name: true show_icon: true type: button entity: '' icon: mdi:arrow-right-thin-circle-outline hold_action: action: none name: All lights tap_action: action: navigate navigation_path: /lovelace/all-lights - show_name: true show_icon: true type: button tap_action: action: navigate navigation_path: /lovelace/kitchen entity: '' icon: mdi:arrow-right-thin-circle-outline name: Kitchen hold_action: action: none - type: markdown content: >- ## Section 2 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse quis rhoncus nulla. Nulla vel odio pulvinar, dapibus massa at, dictum orci. Vestibulum eu ullamcorper ex, eget hendrerit est. In ex est, cursus et faucibus et, luctus ut est. Fusce at risus sapien. Vivamus egestas hendrerit eros, rhoncus semper sem vestibulum ut. Aliquam fringilla diam ac facilisis finibus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam sed risus in ex ultricies tincidunt rutrum et mauris. Suspendisse egestas ante vel nibh congue maximus et eget orci. Phasellus sagittis interdum ipsum et feugiat. For more information see the [Markdown Cheatsheet](https://commonmark.org/help). - type: horizontal-stack cards: - show_name: true show_icon: true type: button entity: '' icon: mdi:arrow-right-thin-circle-outline hold_action: action: none name: All lights tap_action: action: navigate navigation_path: /lovelace/all-lights - show_name: true show_icon: true type: button tap_action: action: navigate navigation_path: /lovelace/kitchen entity: '' icon: mdi:arrow-right-thin-circle-outline name: Kitchen hold_action: action: none - type: markdown content: >- ## Section 3 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse quis rhoncus nulla. Nulla vel odio pulvinar, dapibus massa at, dictum orci. Vestibulum eu ullamcorper ex, eget hendrerit est. In ex est, cursus et faucibus et, luctus ut est. Fusce at risus sapien. Vivamus egestas hendrerit eros, rhoncus semper sem vestibulum ut. Aliquam fringilla diam ac facilisis finibus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam sed risus in ex ultricies tincidunt rutrum et mauris. Suspendisse egestas ante vel nibh congue maximus et eget orci. Phasellus sagittis interdum ipsum et feugiat. For more information see the [Markdown Cheatsheet](https://commonmark.org/help). - type: markdown content: >- The **Markdown** card allows you to write any text. You can style it **bold**, *italicized*, ~strikethrough~ etc. You can do images, links, and more. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse quis rhoncus nulla. Nulla vel odio pulvinar, dapibus massa at, dictum orci. Vestibulum eu ullamcorper ex, eget hendrerit est. In ex est, cursus et faucibus et, luctus ut est. Fusce at risus sapien. Vivamus egestas hendrerit eros, rhoncus semper sem vestibulum ut. Aliquam fringilla diam ac facilisis finibus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam sed risus in ex ultricies tincidunt rutrum et mauris. Suspendisse egestas ante vel nibh congue maximus et eget orci. Phasellus sagittis interdum ipsum et feugiat. For more information see the [Markdown Cheatsheet](https://commonmark.org/help). - type: horizontal-stack cards: - show_name: true show_icon: true type: button entity: '' icon: mdi:arrow-right-thin-circle-outline hold_action: action: none name: All lights tap_action: action: navigate navigation_path: /lovelace/all-lights - show_name: true show_icon: true type: button tap_action: action: navigate navigation_path: /lovelace/kitchen entity: '' icon: mdi:arrow-right-thin-circle-outline name: Kitchen hold_action: action: none - theme: Backend-selected title: Kitchen path: kitchen subview: true badges: [] cards: - type: vertical-stack cards: - type: markdown content: '# Kitchen' - show_name: true show_icon: true type: button entity: '' icon: mdi:arrow-left-thin-circle-outline hold_action: action: none name: Navigate home (pushState) tap_action: action: navigate navigation_path: /lovelace/default_view - type: markdown content: >- The **Markdown** card allows you to write any text. You can style it **bold**, *italicized*, ~strikethrough~ etc. You can do images, links, and more. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse quis rhoncus nulla. Nulla vel odio pulvinar, dapibus massa at, dictum orci. Vestibulum eu ullamcorper ex, eget hendrerit est. In ex est, cursus et faucibus et, luctus ut est. Fusce at risus sapien. Vivamus egestas hendrerit eros, rhoncus semper sem vestibulum ut. Aliquam fringilla diam ac facilisis finibus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam sed risus in ex ultricies tincidunt rutrum et mauris. Suspendisse egestas ante vel nibh congue maximus et eget orci. Phasellus sagittis interdum ipsum et feugiat. Mauris interdum pulvinar tortor, non finibus nisi vestibulum ac. Proin dapibus felis porta, accumsan risus eget, mattis nisl. Curabitur commodo imperdiet diam, eget sagittis mi feugiat sed. Morbi felis lectus, gravida non commodo sit amet, gravida id tellus. Morbi erat ipsum, tristique vitae rutrum vitae, convallis a eros. Sed a sem elementum metus fermentum facilisis. Proin ornare nisi tortor, vitae semper justo sagittis vitae. Maecenas neque neque, tincidunt eget tempus id, pretium at purus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Mauris volutpat ullamcorper dolor at tempus. Nam volutpat, libero vel ultricies consequat, dui tortor imperdiet magna, vel lobortis nulla leo id enim. Aenean non tempor odio, in vulputate ante. Nulla tristique ligula vel nibh congue, sit amet varius nibh dapibus. Suspendisse in nisl ac massa egestas vulputate in vitae nunc. Phasellus dapibus tempor libero, et aliquet nisl bibendum id. Praesent gravida felis id turpis sagittis, lacinia dignissim risus suscipit. Maecenas lorem tortor, consectetur nec aliquet ac, lobortis at diam. Integer molestie cursus fermentum. Nulla ut ante augue. Pellentesque ligula velit, congue in lacus vel, efficitur semper neque. Morbi id sapien ac justo fermentum aliquet. Nam tempus sem at mauris efficitur, id placerat tellus mattis. Integer lectus enim, blandit at ligula at, placerat interdum orci. Integer quam sapien, fermentum nec blandit et, pretium placerat est. For more information see the [Markdown Cheatsheet](https://commonmark.org/help). - type: markdown content: >- The **Markdown** card allows you to write any text. You can style it **bold**, *italicized*, ~strikethrough~ etc. You can do images, links, and more. Phasellus dapibus tempor libero, et aliquet nisl bibendum id. Praesent gravida felis id turpis sagittis, lacinia dignissim risus suscipit. Maecenas lorem tortor, consectetur nec aliquet ac, lobortis at diam. Integer molestie cursus fermentum. Nulla ut ante augue. Pellentesque ligula velit, congue in lacus vel, efficitur semper neque. Morbi id sapien ac justo fermentum aliquet. Nam tempus sem at mauris efficitur, id placerat tellus mattis. Integer lectus enim, blandit at ligula at, placerat interdum orci. Integer quam sapien, fermentum nec blandit et, pretium placerat est. For more information see the [Markdown Cheatsheet](https://commonmark.org/help). - show_name: true show_icon: true type: button entity: '' icon: mdi:arrow-left-thin-circle-outline hold_action: action: none name: Navigate home (pushState) tap_action: action: navigate navigation_path: /lovelace/default_view - type: markdown content: >- The **Markdown** card allows you to write any text. You can style it **bold**, *italicized*, ~strikethrough~ etc. You can do images, links, and more. Phasellus dapibus tempor libero, et aliquet nisl bibendum id. Praesent gravida felis id turpis sagittis, lacinia dignissim risus suscipit. Maecenas lorem tortor, consectetur nec aliquet ac, lobortis at diam. Integer molestie cursus fermentum. Nulla ut ante augue. Pellentesque ligula velit, congue in lacus vel, efficitur semper neque. Morbi id sapien ac justo fermentum aliquet. Nam tempus sem at mauris efficitur, id placerat tellus mattis. Integer lectus enim, blandit at ligula at, placerat interdum orci. Integer quam sapien, fermentum nec blandit et, pretium placerat est. For more information see the [Markdown Cheatsheet](https://commonmark.org/help). - show_name: true show_icon: true type: button entity: '' icon: mdi:arrow-left-thin-circle-outline hold_action: action: none name: Navigate home (pushState) tap_action: action: navigate navigation_path: /lovelace/default_view - theme: Backend-selected title: All lights path: all-lights subview: true badges: [] cards: - type: vertical-stack cards: - type: markdown content: '# All lights' - show_name: true show_icon: true type: button entity: '' icon: mdi:arrow-left-thin-circle-outline hold_action: action: none name: Navigate home (pushState) tap_action: action: navigate navigation_path: /lovelace/default_view - type: markdown content: >- The **Markdown** card allows you to write any text. You can style it **bold**, *italicized*, ~strikethrough~ etc. You can do images, links, and more. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse quis rhoncus nulla. Nulla vel odio pulvinar, dapibus massa at, dictum orci. Vestibulum eu ullamcorper ex, eget hendrerit est. In ex est, cursus et faucibus et, luctus ut est. Fusce at risus sapien. Vivamus egestas hendrerit eros, rhoncus semper sem vestibulum ut. Aliquam fringilla diam ac facilisis finibus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam sed risus in ex ultricies tincidunt rutrum et mauris. Suspendisse egestas ante vel nibh congue maximus et eget orci. Phasellus sagittis interdum ipsum et feugiat. Mauris interdum pulvinar tortor, non finibus nisi vestibulum ac. Proin dapibus felis porta, accumsan risus eget, mattis nisl. Curabitur commodo imperdiet diam, eget sagittis mi feugiat sed. Morbi felis lectus, gravida non commodo sit amet, gravida id tellus. Morbi erat ipsum, tristique vitae rutrum vitae, convallis a eros. Sed a sem elementum metus fermentum facilisis. Proin ornare nisi tortor, vitae semper justo sagittis vitae. Maecenas neque neque, tincidunt eget tempus id, pretium at purus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Mauris volutpat ullamcorper dolor at tempus. Nam volutpat, libero vel ultricies consequat, dui tortor imperdiet magna, vel lobortis nulla leo id enim. Aenean non tempor odio, in vulputate ante. Nulla tristique ligula vel nibh congue, sit amet varius nibh dapibus. Suspendisse in nisl ac massa egestas vulputate in vitae nunc. Phasellus dapibus tempor libero, et aliquet nisl bibendum id. Praesent gravida felis id turpis sagittis, lacinia dignissim risus suscipit. Maecenas lorem tortor, consectetur nec aliquet ac, lobortis at diam. Integer molestie cursus fermentum. Nulla ut ante augue. Pellentesque ligula velit, congue in lacus vel, efficitur semper neque. Morbi id sapien ac justo fermentum aliquet. Nam tempus sem at mauris efficitur, id placerat tellus mattis. Integer lectus enim, blandit at ligula at, placerat interdum orci. Integer quam sapien, fermentum nec blandit et, pretium placerat est. For more information see the [Markdown Cheatsheet](https://commonmark.org/help). - type: markdown content: >- The **Markdown** card allows you to write any text. You can style it **bold**, *italicized*, ~strikethrough~ etc. You can do images, links, and more. Phasellus dapibus tempor libero, et aliquet nisl bibendum id. Praesent gravida felis id turpis sagittis, lacinia dignissim risus suscipit. Maecenas lorem tortor, consectetur nec aliquet ac, lobortis at diam. Integer molestie cursus fermentum. Nulla ut ante augue. Pellentesque ligula velit, congue in lacus vel, efficitur semper neque. Morbi id sapien ac justo fermentum aliquet. Nam tempus sem at mauris efficitur, id placerat tellus mattis. Integer lectus enim, blandit at ligula at, placerat interdum orci. Integer quam sapien, fermentum nec blandit et, pretium placerat est. For more information see the [Markdown Cheatsheet](https://commonmark.org/help). - show_name: true show_icon: true type: button entity: '' icon: mdi:arrow-left-thin-circle-outline hold_action: action: none name: Navigate home (pushState) tap_action: action: navigate navigation_path: /lovelace/default_view - type: markdown content: >- The **Markdown** card allows you to write any text. You can style it **bold**, *italicized*, ~strikethrough~ etc. You can do images, links, and more. Phasellus dapibus tempor libero, et aliquet nisl bibendum id. Praesent gravida felis id turpis sagittis, lacinia dignissim risus suscipit. Maecenas lorem tortor, consectetur nec aliquet ac, lobortis at diam. Integer molestie cursus fermentum. Nulla ut ante augue. Pellentesque ligula velit, congue in lacus vel, efficitur semper neque. Morbi id sapien ac justo fermentum aliquet. Nam tempus sem at mauris efficitur, id placerat tellus mattis. Integer lectus enim, blandit at ligula at, placerat interdum orci. Integer quam sapien, fermentum nec blandit et, pretium placerat est. For more information see the [Markdown Cheatsheet](https://commonmark.org/help). - show_name: true show_icon: true type: button entity: '' icon: mdi:arrow-left-thin-circle-outline hold_action: action: none name: Navigate home (pushState) tap_action: action: navigate navigation_path: /lovelace/default_view ```
raidolo commented 1 year ago

The issue is still present... Subviews are really cool and they help organize the dashboard heavily. It should be fixed somehow, please!

MasterDevwi commented 1 year ago

I'd love to see this issue fixed too.

ASNNetworks commented 1 year ago

@MasterDevwi @raidolo @kimmobrunfeldt @blair287

There is a new HACS module since 2 weeks, I just found about it now which solves exactly this issue.

https://github.com/elchininet/lovelace-autoscroll

It automatically scrolls to the top when switching to a new tab. The latest 3.0 release only works on HA 2023.4. The version before that, works on 2023.3.6 as well. I haven't updated yet to 2023.4 because of some major breaking changes with button-card, decluttering-card and card-mod themes. But I can confirm the version below 3.0 works great on HA 2023.3.6

I will leave this open however, since I believe this is something HA Core should fix properly.

raidolo commented 1 year ago

@MasterDevwi @raidolo @kimmobrunfeldt @blair287

There is a new HACS module since 2 weeks, I just found about it now which solves exactly this issue.

https://github.com/elchininet/lovelace-autoscroll

It automatically scrolls to the top when switching to a new tab. The latest 3.0 release only works on HA 2023.4. The version before that, works on 2023.3.6 as well. I haven't updated yet to 2023.4 because of some major breaking changes with button-card, decluttering-card and card-mod themes. But I can confirm the version below 3.0 works great on HA 2023.3.6

I will leave this open however, since I believe this is something HA Core should fix properly.

Nice!! Thanks, I'll try it soon.

raidolo commented 1 year ago

I've updated to 2023.4.1 and I don't have the issue anymore, I've installed the lovelace-autoscroll, but I was testing the default behavior of the April release and it seems it has been fixed somehow. I've removed the lovelace-autoscroll plugin and it seems that even without it, now the pages load at the top of the page. Could anyone else confirm?

MasterDevwi commented 1 year ago

I just tried it and it seems to be working now as well. 😮 🎆

ASNNetworks commented 1 year ago

For me it Core hasn't changed anything, just updated to 2023.4.1 from 2023.3.6 and the behaviour is exactly the same. I wonder if you guys still have auto-scroll cached, I know it took me a good amount of cache clearing to finally load up some updated cards.

Sadly, the auto-scroll module seems to be broken as well (tried 3.0 with 2023.4.1). Many custom modules/cards seem to suffer currently, so hopefully things will be fixed the coming weeks. Reported the ticket.

raidolo commented 1 year ago

For me it Core hasn't changed anything, just updated to 2023.4.1 from 2023.3.6 and the behaviour is exactly the same. I wonder if you guys still have auto-scroll cached, I know it took me a good amount of cache clearing to finally load up some updated cards.

Sadly, the auto-scroll module seems to be broken as well (tried 3.0 with 2023.4.1). Many custom modules/cards seem to suffer currently, so hopefully things will be fixed the coming weeks. Reported the ticket.

You were right, it was probably cached somehow. It's back to the original behavior now. I'll look into autoscroll again...

raidolo commented 1 year ago

Well it's weird, sometimes it goes at the top sometimes not. I can't really see a pattern here... I believe they did something, like the autoscroll's dev said in your ticket.

github-actions[bot] commented 9 months ago

There hasn't been any activity on this issue recently. Due to the high number of incoming GitHub notifications, we have to clean some of the old issues, as many of them have already been resolved with the latest updates. Please make sure to update to the latest Home Assistant version and check if that solves the issue. Let us know if that works for you by adding a comment 👍 This issue has now been marked as stale and will be closed if no further activity occurs. Thank you for your contributions.