Fix empty title in head (#17430)

This handles the case where the children on a head element are undefined and not a string or an array of strings. This doesn't currently handle sub-children on head elements so additional handling will be needed if this is a feature we would like to support although can be discussed/investigated separately from this fix. Fixes: #17364 Fixes: #6388 Closes: #16751
vercel · Sep 28, 2020 · 489b13d · 489b13d
1 parent b009ebb
commit 489b13d
Show file tree

Hide file tree

Showing 4 changed files with 51 additions and 2 deletions.
diff --git a/packages/next/client/head-manager.ts b/packages/next/client/head-manager.ts
@@ -25,7 +25,12 @@ function reactElementToDOM({ type, props }: JSX.Element): HTMLElement {
   if (dangerouslySetInnerHTML) {
     el.innerHTML = dangerouslySetInnerHTML.__html || ''
   } else if (children) {
-    el.textContent = typeof children === 'string' ? children : children.join('')
+    el.textContent =
+      typeof children === 'string'
+        ? children
+        : Array.isArray(children)
+        ? children.join('')
+        : ''
   }
   return el
 }
@@ -43,7 +48,12 @@ function updateElements(
       let title = ''
       if (tag) {
         const { children } = tag.props
-        title = typeof children === 'string' ? children : children.join('')
+        title =
+          typeof children === 'string'
+            ? children
+            : Array.isArray(children)
+            ? children.join('')
+            : ''
       }
       if (title !== document.title) document.title = title
       return

diff --git a/test/integration/client-navigation/pages/nav/head-1.js b/test/integration/client-navigation/pages/nav/head-1.js
@@ -11,5 +11,8 @@ export default (props) => (
     <Link href="/nav/head-2">
       <a id="to-head-2">to head 2</a>
     </Link>
+    <Link href="/nav/head-3">
+      <a id="to-head-3">to head 3</a>
+    </Link>
   </div>
 )
diff --git a/test/integration/client-navigation/pages/nav/head-3.js b/test/integration/client-navigation/pages/nav/head-3.js
@@ -0,0 +1,15 @@
+import React from 'react'
+import Head from 'next/head'
+import Link from 'next/link'
+
+export default (props) => (
+  <div id="head-3">
+    <Head>
+      <meta name="description" content="Head Three" />
+      <title></title>
+    </Head>
+    <Link href="/nav/head-1">
+      <a id="to-head-1">to head 1</a>
+    </Link>
+  </div>
+)
diff --git a/test/integration/client-navigation/test/index.test.js b/test/integration/client-navigation/test/index.test.js
@@ -1237,6 +1237,27 @@ describe('Client Navigation', () => {
             .elementByCss('meta[name="description"]')
             .getAttribute('content')
         ).toBe('Head One')
+
+        await browser
+          .elementByCss('#to-head-3')
+          .click()
+          .waitForElementByCss('#head-3', 3000)
+        expect(
+          await browser
+            .elementByCss('meta[name="description"]')
+            .getAttribute('content')
+        ).toBe('Head Three')
+        expect(await browser.eval('document.title')).toBe('')
+
+        await browser
+          .elementByCss('#to-head-1')
+          .click()
+          .waitForElementByCss('#head-1', 3000)
+        expect(
+          await browser
+            .elementByCss('meta[name="description"]')
+            .getAttribute('content')
+        ).toBe('Head One')
       } finally {
         if (browser) {
           await browser.close()