From 448192e07b482724e581a0181d85e871ec27befa Mon Sep 17 00:00:00 2001 From: Daiki Nishikawa Date: Fri, 24 Jun 2022 21:59:27 +0900 Subject: [PATCH] fix(searchbutton): fix react production hydration error (#1384) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Co-authored-by: Clément Vannicatte --- bundlesize.config.json | 4 ++-- packages/docsearch-react/src/DocSearchButton.tsx | 11 ++++++----- 2 files changed, 8 insertions(+), 7 deletions(-) diff --git a/bundlesize.config.json b/bundlesize.config.json index 197adcbb9..b8e8f9d75 100644 --- a/bundlesize.config.json +++ b/bundlesize.config.json @@ -6,11 +6,11 @@ }, { "path": "packages/docsearch-react/dist/umd/index.js", - "maxSize": "20.25 kB" + "maxSize": "20.30 kB" }, { "path": "packages/docsearch-js/dist/umd/index.js", - "maxSize": "28.15 kB" + "maxSize": "28.20 kB" } ] } diff --git a/packages/docsearch-react/src/DocSearchButton.tsx b/packages/docsearch-react/src/DocSearchButton.tsx index a70d23cb8..57d62347f 100644 --- a/packages/docsearch-react/src/DocSearchButton.tsx +++ b/packages/docsearch-react/src/DocSearchButton.tsx @@ -1,4 +1,4 @@ -import React, { useMemo } from 'react'; +import React, { useEffect, useState } from 'react'; import { ControlKeyIcon } from './icons/ControlKeyIcon'; import { SearchIcon } from './icons/SearchIcon'; @@ -25,13 +25,14 @@ export const DocSearchButton = React.forwardRef< >(({ translations = {}, ...props }, ref) => { const { buttonText = 'Search', buttonAriaLabel = 'Search' } = translations; - const key = useMemo< + const [key, setKey] = useState< typeof ACTION_KEY_APPLE | typeof ACTION_KEY_DEFAULT | null - >(() => { + >(null); + + useEffect(() => { if (typeof navigator !== 'undefined') { - return isAppleDevice() ? ACTION_KEY_APPLE : ACTION_KEY_DEFAULT; + isAppleDevice() ? setKey(ACTION_KEY_APPLE) : setKey(ACTION_KEY_DEFAULT); } - return null; }, []); return (