From 489b13d00e31311b0d774996ed0ec2876f3fac20 Mon Sep 17 00:00:00 2001 From: JJ Kasper Date: Mon, 28 Sep 2020 18:12:07 -0500 Subject: [PATCH] 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 --- packages/next/client/head-manager.ts | 14 +++++++++++-- .../client-navigation/pages/nav/head-1.js | 3 +++ .../client-navigation/pages/nav/head-3.js | 15 +++++++++++++ .../client-navigation/test/index.test.js | 21 +++++++++++++++++++ 4 files changed, 51 insertions(+), 2 deletions(-) create mode 100644 test/integration/client-navigation/pages/nav/head-3.js diff --git a/packages/next/client/head-manager.ts b/packages/next/client/head-manager.ts index 9308416cfc..46f258e8c1 100644 --- 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 index b1b9bbfd83..193784d6b3 100644 --- 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) => ( to head 2 + + to head 3 + ) diff --git a/test/integration/client-navigation/pages/nav/head-3.js b/test/integration/client-navigation/pages/nav/head-3.js new file mode 100644 index 0000000000..218e5369d7 --- /dev/null +++ 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) => ( +
+ + + + + + to head 1 + +
+) diff --git a/test/integration/client-navigation/test/index.test.js b/test/integration/client-navigation/test/index.test.js index 053bdb1e4b..ec697fa9f4 100644 --- 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() -- GitLab