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);