Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

title does not update after initial load #37

Closed
locks opened this issue Jul 7, 2016 · 24 comments
Closed

title does not update after initial load #37

locks opened this issue Jul 7, 2016 · 24 comments

Comments

@locks
Copy link

locks commented Jul 7, 2016

I'm using ember-page-title in my application, and the title only updates once when first loading the application. It will set the title properly.
However, subsequent transitions do not alter the title.

At the moment I do not have a reproduction, but can work on one.
I am using liquid-fire, which I suspect might be related.

@arm1n
Copy link

arm1n commented Sep 26, 2016

Hey guys, I'm experiencing the exact same behavior with latest version 3.0.8. I'm also using liquid-fire 0.24.1 and my current ember version is 2.6.0. I've inspected headData.title, which is updating properly, but I've no idea why it's not rendered correctly after initial load when property changes. Would be great to get any update on this - thanks!

@tim-evans
Copy link
Contributor

Hmm. I think I may be getting the same thing. Pinging @ronco, since I think this may have to do with ember-cli-head

@ronco
Copy link
Contributor

ronco commented Sep 26, 2016

Does anyone have a simple example app exhibiting the problem I can look at?

@arm1n
Copy link

arm1n commented Sep 27, 2016

Thank you for your quick response. At the moment I've only my company's app where I encounter this problem. The interesting part is that my head.hbs file looks like (as I'm using ember-cli-meta-tags too):

<title>{{model.title}}</title>
{{head-tags headTags=model.headTags}}

headTags get updated properly, whereas title doesn't reflect the changes.

@ronco
Copy link
Contributor

ronco commented Sep 27, 2016

Thanks @arm1n. I'll see if I can reproduce tonight.

@tim-evans
Copy link
Contributor

Do you have a <title> tag in your index.html?

@ronco
Copy link
Contributor

ronco commented Sep 28, 2016

@arm1n I think @tim-evans has it. Check out the demo app I put together here. Everything functions correctly to update the page title when there is no <title> in index.html, however when there is it's static value trumps the dynamic value given from this addon. Since we're setting the title from the actual DOM element value (rather than setting document.title = x) there can be only one <title> tag.

#28 illustrates this issue. If you really were not going to use your app with fast boot we could put together a browser only initializer to remove the original <title> tag from the <head> before this addon adds the dynamic one. In fastboot environments the original title coming from the server would be correct to begin with and ember-cli-head takes care of cleaning up fastboot head content before injecting browser dynamic head content.

@arm1n
Copy link

arm1n commented Sep 28, 2016

@ronco @tim-evans Thank you for investigating in this issue, but unfortunately there's no head tag in my index.html, I've already verified this, as the docs state to remove it when starting to use v.3.0.0 upwards.

@tim-evans
Copy link
Contributor

Do you have a head.hbs?

@arm1n
Copy link

arm1n commented Jan 3, 2017

@tim-evans Yes, I've also a head.hbs located in app/templates, which looks like the following:

<title>{{model.title}}</title>
{{head-tags headTags=model.headTags}}

The funny thing is that if I add a dummy meta tag like:

<meta name="dummy-title" content={{model.title}}>

The content attribute gets updated properly, it only seems to have problems with the <title> tag. I've now also updated ember-page-title, ember-cli-meta-tags and ember-cli-head to the latest versions, but this has no effect. I'm still using to Ember 2.6. Any help would be appreciated.

@tim-evans
Copy link
Contributor

Huh. This is super strange.

Could you make a simple application with a reproduction for this? That way I can fiddle around with it and try to find the issue.

@arm1n
Copy link

arm1n commented Jan 9, 2017

Hey Tim,

I've tried to setup an ember twiddle, but unfortunately the index.html cannot be modified in order to remove the <title> attribute from it, so that the behavior cannot be reproduced. But as a side-node: If I leave the <title> in my app's index.html, the <title> from head.hbs get updated, but as soon as I remove it from index.html the odd behavior applies.

@tim-evans
Copy link
Contributor

Weird.

@tim-evans
Copy link
Contributor

Could you try creating a whole application repo? I'd very much appreciate it ❤️

@rlivsey
Copy link
Contributor

rlivsey commented Jan 17, 2017

I've just "fixed" a very similar issue in one of my applications.

I tracked it down to a JS widget which was also updating the page title using document.title = "foo" which looks to replace the <title> DOM node and it can no longer be updated by ember-page-title.

Changing the widget to use document.getElementsByTagName('title')[0].innerText = title fixed the issue as the node's contents are updated vs being replaced and so ember-page-title can carry on updating it.

May be unrelated to this issue, but the symptoms look the same.

@tim-evans
Copy link
Contributor

Was it an internal component or external?

@rlivsey
Copy link
Contributor

rlivsey commented Jan 17, 2017

It was a 3rd party messenger widget, it updated the document.title when it received messages when you had the tab unfocused.

@tim-evans
Copy link
Contributor

Ahh, that's tricky. If you have any ideas for how to fix, or solutions, I'd welcome it.

@rlivsey
Copy link
Contributor

rlivsey commented Jan 17, 2017

@tim-evans thankfully in this case I'm working for the company whose messenger widget it was, so I was able to submit a PR!

Might be worth a note in the README as a "gotcha" if other people notice similar behaviour to check they aren't using document.title = xxx, the only other thing I can think of is to not use ember-cli-head but to set the title content directly in a similar method to document.getElementsByTagName('title')[0].innerText.

@tim-evans
Copy link
Contributor

🙆 Sounds good!

ember-cli-head is for all the fastboot peeps, so that's a no-go. Docs may be good for this!

@arm1n
Copy link

arm1n commented Jan 18, 2017

Thanks for this hint, I've also tried to search for any addon manipulating document.title. Also tried the latest version 3.1.5, where <title> remains in index.html, but all efforts without any success. I've really no idea what's causing this behavior.

@arm1n
Copy link

arm1n commented Apr 26, 2018

Ok so after revisiting this problem in my issue tracker I've tried another round of error cause detection, finally I got it working. Maybe this could be helpful for someone else:

  1. The problem only occured in production, but worked normally in dev env (same as here)
  2. The app does not use fastboot, but I'm using pods as well as ember-cli-meta-tags addon.
  3. Resolution: Moving head.hbs template from app/template/head.hbs to app/head/template.hbs.

I don't know the ember internals well enough, but at least the change described in 3) made page title updating even after initial page load. So for me the issue has been resolved, ticket could be closed. Thanks for everybody's help!

@tim-evans
Copy link
Contributor

@arm1n thanks for the update- that's super weird, but may have to do with pods resolution 🙃

@gilest
Copy link

gilest commented Jun 11, 2020

Found that the Drift live chat is incompatible with this addon due to document.title = usage.

Looks like @rlivsey fixed the same problem with Intercom.

Have left the following message with support:

The problem I'm having is with the "Flash tab for new messages" feature. The injected Drift script uses document.title = "(1) New Message! to flash the page title.

Unfortunately this replaces the page <title> element in the which means the tool I'm using to change page titles loses its reference to the original <title> element.

A compatible solution might be to change the drift snippet code from:
window && window.document ? window.document.title = newTitle : null

To:
document.getElementsByTagName('title')[0] ? document.getElementsByTagName('title')[0].innerText = newTitle : null

Drift customer support response:

At the moment we don't have a way to make changes to this unfortunately, I can definitely send this over as a feature request for our team for you guys.

For now I would recommend that you turn this off.

I've asked that they do send this change over as a feature request and contact me with any updates.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

7 participants