scandic/web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merged in fix/hydration-errors (pull request #2476)

Browse Source 
fix: fixed hydration errors by setting ids

Approved-by: Linus Flood
This commit is contained in:
Christian Andolf
2025-06-30 11:42:24 +00:00
parent a8a11cca25 18cbd952b7
commit 69a90928f3
4 changed files with 42 additions and 29 deletions
Download Patch File Download Diff File Expand all files Collapse all files

19
apps/scandic-web/app/[lang]/(live)/layout.tsx
View File

@@ -49,15 +49,6 @@ export default async function RootLayout(
<FontPreload />
<AdobeSDKScript />
<GTMScript />
<Script
strategy="beforeInteractive"
data-blockingmode="auto"
data-cbid="6d539de8-3e67-4f0f-a0df-8cef9070f712"
data-culture={params.lang}
id="Cookiebot"
src="https://consent.cookiebot.com/uc.js"
async={true}
/>
{/* eslint-disable-next-line formatjs/no-literal-string-in-jsx */}
<Script id="ensure-adobeDataLayer">{`
window.adobeDataLayer = window.adobeDataLayer || []
@@ -90,6 +81,16 @@ export default async function RootLayout(
</ClientIntlProvider>
</SessionProvider>
</div>
<Script
strategy="beforeInteractive"
data-blockingmode="auto"
data-cbid="6d539de8-3e67-4f0f-a0df-8cef9070f712"
data-culture={params.lang}
id="Cookiebot"
src="https://consent.cookiebot.com/uc.js"
async={true}
/>
</body>
</html>
)

17
apps/scandic-web/app/[lang]/(no-layout)/layout.tsx
View File

@@ -39,14 +39,6 @@ export default async function RootLayout(
<head>
<AdobeSDKScript />
<GTMScript />
<Script
strategy="beforeInteractive"
data-blockingmode="auto"
data-cbid="6d539de8-3e67-4f0f-a0df-8cef9070f712"
data-culture={params.lang}
id="Cookiebot"
src="https://consent.cookiebot.com/uc.js"
/>
{/* eslint-disable-next-line formatjs/no-literal-string-in-jsx */}
<Script id="ensure-adobeDataLayer">{`
window.adobeDataLayer = window.adobeDataLayer || []
@@ -71,6 +63,15 @@ export default async function RootLayout(
</TrpcProvider>
</ClientIntlProvider>
</SessionProvider>
<Script
strategy="beforeInteractive"
data-blockingmode="auto"
data-cbid="6d539de8-3e67-4f0f-a0df-8cef9070f712"
data-culture={params.lang}
id="Cookiebot"
src="https://consent.cookiebot.com/uc.js"
/>
</body>
</html>
)

19
apps/scandic-web/app/[lang]/(partner)/layout.tsx
View File

@@ -41,15 +41,6 @@ export default async function RootLayout(
<FontPreload />
<AdobeSDKScript />
<GTMScript />
<Script
strategy="beforeInteractive"
data-blockingmode="auto"
data-cbid="6d539de8-3e67-4f0f-a0df-8cef9070f712"
data-culture={params.lang}
id="Cookiebot"
src="https://consent.cookiebot.com/uc.js"
async={true}
/>
{/* eslint-disable-next-line formatjs/no-literal-string-in-jsx */}
<Script id="ensure-adobeDataLayer">{`
window.adobeDataLayer = window.adobeDataLayer || []
@@ -71,6 +62,16 @@ export default async function RootLayout(
<ReactQueryDevtools initialIsOpen={false} />
</TrpcProvider>
</ClientIntlProvider>
<Script
strategy="beforeInteractive"
data-blockingmode="auto"
data-cbid="6d539de8-3e67-4f0f-a0df-8cef9070f712"
data-culture={params.lang}
id="Cookiebot"
src="https://consent.cookiebot.com/uc.js"
async={true}
/>
</body>
</html>
)

16
apps/scandic-web/components/Forms/BookingWidget/FormContent/Search/index.tsx
View File

@@ -2,7 +2,7 @@
import { cva } from "class-variance-authority"
import Downshift from "downshift"
import { type ChangeEvent, type FormEvent } from "react"
import { type ChangeEvent, type FormEvent, useId } from "react"
import { useFormContext, useWatch } from "react-hook-form"
import { useIntl } from "react-intl"
@@ -46,6 +46,7 @@ export function Search({
}: SearchProps) {
const { register, setValue, setFocus } = useFormContext()
const intl = useIntl()
const searchLabelId = useId()
const searchTerm = useWatch({ name: SEARCH_TERM_NAME }) as string
const { searchHistory, insertSearchHistoryItem, clearHistory } =
useSearchHistory()
@@ -117,7 +118,10 @@ export function Search({
<div className={searchContainerVariants({ variant })}>
<div className={styles.inputContainer}>
<label
{...getLabelProps({ htmlFor: SEARCH_TERM_NAME })}
{...getLabelProps({
htmlFor: SEARCH_TERM_NAME,
id: searchLabelId,
})}
className={labelVariants({
color: withSearchButton && isOpen ? "default" : "red",
})}
@@ -127,11 +131,17 @@ export function Search({
{intl.formatMessage({ defaultMessage: "Where to?" })}
</span>
</Typography>
<div {...getRootProps({}, { suppressRefError: true })}>
<div
{...getRootProps(
{ "aria-labelledby": searchLabelId },
{ suppressRefError: true }
)}
>
<div className={searchInputClassName}>
<Input
{...getInputProps({
id: SEARCH_TERM_NAME,
"aria-labelledby": searchLabelId,
onFocus() {
openMenu()
},