fix(searchbar): clear controlled searchbar

opengovsg · Jul 26, 2023 · 252f520 · 252f520
1 parent e121477
commit 252f520
Show file tree

Hide file tree

Showing 2 changed files with 26 additions and 1 deletion.
diff --git a/react/src/Searchbar/Searchbar.stories.tsx b/react/src/Searchbar/Searchbar.stories.tsx
@@ -1,3 +1,4 @@
+import { useState } from 'react'
 import { Box, Flex, Stack, Text } from '@chakra-ui/react'
 import { Meta, StoryFn } from '@storybook/react'
 
@@ -34,6 +35,23 @@ ExpandableOpen.args = {
 }
 ExpandableOpen.storyName = 'Expandable/Open'
 
+export const Controlled: StoryFn<SearchbarProps> = (args) => {
+  const [state, setState] = useState<string>('')
+  return (
+    <Stack direction="column" align="flex-start">
+      <Text>External State: {state}</Text>
+      <Searchbar
+        {...args}
+        value={state}
+        onChange={(e) => setState(e.target.value)}
+      />
+    </Stack>
+  )
+}
+Controlled.args = {
+  defaultIsExpanded: true,
+}
+
 export const Sizes: StoryFn<SearchbarProps> = (args) => {
   return (
     <Stack direction="column" align="flex-start">

diff --git a/react/src/Searchbar/Searchbar.tsx b/react/src/Searchbar/Searchbar.tsx
@@ -67,6 +67,7 @@ export const Searchbar = forwardRef<SearchbarProps, 'input'>(
   (
     {
       onSearch,
+      onChange,
       defaultIsExpanded,
       isExpanded: isExpandedProp,
       onExpansion: onExpansionProp,
@@ -103,14 +104,19 @@ export const Searchbar = forwardRef<SearchbarProps, 'input'>(
     )
 
     const handleClearButtonClick = useCallback(() => {
+      if (onChange) {
+        // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+        // @ts-ignore
+        onChange({ target: { value: '' } })
+      }
       if (innerRef.current) {
         innerRef.current.value = ''
       }
       if (collapseOnClear) {
         onExpansion(false)
       }
       innerRef.current?.focus()
-    }, [collapseOnClear, onExpansion])
+    }, [onChange, collapseOnClear, onExpansion])
 
     const handleExpansion = useCallback(() => {
       onExpansion(true)
@@ -146,6 +152,7 @@ export const Searchbar = forwardRef<SearchbarProps, 'input'>(
           ref={inputRef}
           sx={styles.field}
           onKeyDown={handleSearch}
+          onChange={onChange}
           {...props}
         />
         {showClearButton && isExpanded && (