fix: APP-2816 - Update InputSearch component to fix SSR (#60)

aragon · Jan 12, 2024 · f257797 · f257797
1 parent ca6cb7b
commit f257797
Show file tree

Hide file tree

Showing 2 changed files with 7 additions and 4 deletions.
diff --git 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
@@ -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<IInputSearchProps> = (props) => {
     const { isLoading, ...otherProps } = props;
     const { containerProps, inputProps } = useInputProps(otherProps);
@@ -40,7 +37,9 @@ export const InputSearch: React.FC<IInputSearchProps> = (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);