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: https://github.com/vercel/next.js/issues/17364 Fixes: https://github.com/vercel/next.js/issues/6388 Closes: https://github.com/vercel/next.js/pull/16751

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: https://github.com/vercel/next.js/issues/17364 Fixes: https://github.com/vercel/next.js/issues/6388 Closes: https://github.com/vercel/next.js/pull/16751
489b13d0 · JJ Kasper · GitHub · b009ebbe · 489b13d0 · 489b13d0
4 changed file
--- 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

--- 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>
 )
--- a/test/integration/client-navigation/pages/nav/head-3.js
+++ b/test/integration/client-navigation/pages/nav/head-3.js
+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>
+)
--- 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()