From f2577977e3b67d0895fcb8085ef8206dfe3844b7 Mon Sep 17 00:00:00 2001 From: Ruggero Date: Fri, 12 Jan 2024 13:50:57 +0100 Subject: [PATCH] fix: APP-2816 - Update InputSearch component to fix SSR (#60) --- CHANGELOG.md | 4 ++++ src/components/input/inputSearch/inputSearch.tsx | 7 +++---- 2 files changed, 7 insertions(+), 4 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index fa1a1dbfd..137be16a8 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -16,6 +16,10 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/), - Update `Spinner` and `Button` components to handle responsive sizes - Update `Icon` and `AvatarIcon` components to handle xl and 2xl responsive sizes +### Fixed + +- Update `InputSearch` component to fix server-side rendering + ## [1.0.6] - 2023-12-13 ### Added diff --git a/src/components/input/inputSearch/inputSearch.tsx b/src/components/input/inputSearch/inputSearch.tsx index 5c981174a..182ced9e2 100644 --- a/src/components/input/inputSearch/inputSearch.tsx +++ b/src/components/input/inputSearch/inputSearch.tsx @@ -12,9 +12,6 @@ export interface IInputSearchProps extends IInputComponentProps { isLoading?: boolean; } -// Needed to trigger a native onChange event on clear input click (see https://stackoverflow.com/a/46012210) -const nativeValueSetter = Object.getOwnPropertyDescriptor(window.HTMLInputElement.prototype, 'value')?.set; - export const InputSearch: React.FC = (props) => { const { isLoading, ...otherProps } = props; const { containerProps, inputProps } = useInputProps(otherProps); @@ -40,7 +37,9 @@ export const InputSearch: React.FC = (props) => { return; } - nativeValueSetter?.call(inputRef.current, ''); + // Needed to trigger a native onChange event on clear input click (see https://stackoverflow.com/a/46012210) + Object.getOwnPropertyDescriptor(window.HTMLInputElement.prototype, 'value')?.set?.call(inputRef.current, ''); + const event = new Event('input', { bubbles: true }); inputRef.current.dispatchEvent(event);