HTML page Title tag does not change back after viewing Profile modal

[Alys]

As reported by @BellaBelinda (88a47bf3-e4bb-4952-9415-afb22148dd9e):

"If I'm in a guild or the Tavern or even my tasks page and I click on someone's profile, the tab name thing changes to "Profile | User | Habitica", like usual, but when I click back out of the profile, it doesn't change back to the name of wherever I was before. It can be fixed by reloading,"

It will also happen on any other page if you access a Profile modal by clicking on a party member's avatar or your own avatar.

[aevix]

So you are wanting the title of the tab to change back to tavern after you click out of someone's profile? I think I can figure it out if you want to assign me the project :D

[Alys]

@aevix Yes, that's right, if you were at the Tavern when you clicked on the user's name to see their profile.

You can also get to a profile when you're on any other page (e.g., by clicking on a party mate's avatar), so when you close someone's profile, the page title should change back to whatever that page is.

Thanks for taking this on! Post here if you have questions. :)

[paglias]

Hmm this might be due to some special handling profiles have regarding urls where it doesn't use the standard $router functions

[aevix]

I've been doing some digging and I think it has to do with Vue state management. When the profile opens it triggers the store to update the title in state but when it closes it doesn't update it. I need to do some more readings to find out how to update the state. I tried just using $store to edit but vue doesn't seem to notice the change so I probably have to use some function to change it. Ill do some more reading and post an update.

[aevix]

I wanted to update you on some interesting things I found out so far. So I figured out that I can actually change the state from the profile modal and it will trigger the state.watch function in the app.js but the problem I am now having is that bootstrap vue doesn't render the new state (you can see it load the page when you click on someone's account but doesn't show the loading bar when you close out of the profile modal). I am reading up on how modal is handled by bootstrap to see if there are any props or some special function that can trigger the rerender on hide but if @paglias or @Alys know the solution feel free to chime in and save me hours of headache lol

[paglias]

@aevix I think the issue is not with bootstrap vue but that for some reason the profile modal isn't using the usual router navigation, see https://github.com/HabitRPG/habitica/blob/develop/website/client/src/components/userMenu/profileModal.vue#L52-L59

[aevix]

@paglias I am not sure exactly what you mean. I am pretty new to vue router so I am not sure what the usual router navigation is. I tried changing window.history.pushState() to this.$router.push() but it was resulting the same result.

[paglias]

@aevix so I did some more investigation and found out that the way the profile modal url change works is a bit hacky because vue router doesn't support changing the route for a modal given that the page under the modal remains open.

So I think there are two solutions:

• Remove the title change for profiles here https://github.com/HabitRPG/habitica/blob/develop/website/client/src/components/userMenu/profile.vue#L896
• When the modal is opened (https://github.com/HabitRPG/habitica/blob/develop/website/client/src/components/userMenu/profileModal.vue#L52) store the old title (this.$store.state.title) in a variable inside the component and when the modal is hidden call common:setTitle to restore it here https://github.com/HabitRPG/habitica/blob/develop/website/client/src/components/userMenu/profileModal.vue#L55

        this.$store.dispatch('common:setTitle', {
         fullTitle: this.variableStoringTheOldTitle
       });

[thewilloftheshadow]

I think the second option would be desirable due to the fact that the URL changes, and so bookmarking/copying the link are possible and will link to the full profile page instead of just the model, meaning that the title wouldn't match the linked page.

[paglias]

Yeah the second would be better for me as well

[shanaqui]

The same issue occurs with "Stats | User | Habitica" and "Achievements | User | Habitica", which are also part of the profile modal. Just checking in to make sure that gets fixed at the same time!

[aevix]

@shanaqui the PR I linked fixes those issues also because its part of profileModal its just pulling up different information of the user depending on the route user clicks. The PR still has some bugs where it doesn't know certain names and paths because it doesn't fully match in the router index.js file. I will try and see if I can fix that bug today if I get around to it lol.

[aevix]

I pushed another commit fixing the bugs on my PR. I don't know what the proper procedure is to merge my PR but its ready for review 👍

[Tressley]

Re-opening as this bug still exists on Prod.

[citrusella]

Does it take specific steps or places to get this to happen, or does it only happen in certain browsers? I'm using production right now and not having this happen.

[Tressley]

It does look to be browser specific. I'm using Chrome Version 88.0.4324.104 (Official Build) (64-bit) on Windows 10. Doesn't look to happen on Firefox.

Here are the steps I'm taking:

1. Navigate to Tasks page
2. Click on any user's avatar to load their profile
3. Close profile

The page title does flash, but sticks with "Profile | User | Habitica"

[Alys]

The PR that closed this was a partial fix. It had "fixes #[issue number]" in it, which is why this got closed - none of us noticed that, sorry!

[SabreCat]

Got this related report in the bug guild. Same thing, or worth a new ticket?

Nakonana (33bb14bd-814d-40cb-98a4-7b76a752761c) I'm able to reproduce it (i.e. having "Declutter 25 (standard)" as the tab title). So, what I did:

Opened this private copy of the challenge in a new tab using the link in my monthly's notes. The tab title says "Challenge". (opened console for the tab)

Cloned the challenge to the ADHDers Guild (making a small edit to the summary of the challenge) to get this challenge. The tab title now says "Declutter 25 (standard)". (Cloning does not produce any errors or anything else in the console)

Reloading the tab: the tab title now says "Challenge". (and the content of the console is slightly different)

Copied URL, opened new tab, pasted URL. The tab title says "Challenge".

Went to ADHDers Guild, right-clicked on the challenge to open in a new tab: tab title is "Challenge".

Also tried to left-clicking on the challenge to load in the tab where the ADHDers Guild is: tab title is "Challenge".

(Now I'm getting the impression that "Challenge" is the expected behavior while "Declutter 25 (standard)" is the bug. I thought, it's the other way around xD).

[Alys]

A similar report from @ieahleen (c073342f-4a65-4a13-9ffd-9e7fa5410d6b) with a video showing the behaviour -- it's odd! When the Profile / Stats screen is closed, the tab title does change back to what it should be briefly, but then it switches back to the title of the Profile / Stats screen for no good reason.

It's a really small thing, but in any page, if I open the Stats modal from the user menu, the name of the tab changes, and that's fine, but if I then close the modal, the name of the tab stays as "Stats"

There are a few different modals for which it happens, I have found it does the same for the Profile modal, for example."

Browser: Google Chrome Versione 91.0.4472.124 (Build ufficiale) (a 64 bit)

Operative system:

Edition Windows 10 Pro Version 21H1 Installed on 11/30/2020 OS build 19043.1110 Experience Windows Feature Experience Pack 120.2212.3530.0

It happens everytime I open Habitica, I always open a new tab and it keeps happening

I've just registered a video of it happening, you can see it here: https://youtu.be/8Utrlb3d3Eo

[CraigInches]

Id like to take a crack at this one if no ones actively working on it.

[CuriousMagpie]

Sure thing, @CraigInches!

[SabreCat]

Long time with no activity, opening this back up.

[gabrielgaraujo]

May I give it a shot?

[CuriousMagpie]

Sure thing, @gabrielgaraujo! Thanks!

[patdel0]

Hi Everyone,

What's the status with this one? Is help still wanted or is it in progress?

[CuriousMagpie]

It's been a while since we've heard from @gabrielgaraujo, so I've unassigned them from this issue. Are you interested in picking it up, @patdel0?

[patdel0]

Hi @CuriousMagpie,

I am interested in working on this issue and I believe it would be a good starting point for someone who is new to the project and Vue. I have found a fix for the bug and will create a pull request soon. In the attached video, you can see a demo of the bug and a demo of the fixed version. This will be my first pull request, so I am still learning the process. Please let me know if you have any questions.

Bug Demo

take1-2022-12-13_20.35.17.webm

Fixed Demo

take1-2022-12-13_20.39.58.webm

Is there another part of the issue which I am missing or is this it?