fix(dropdown): add test and change story

Author: Guido Zoli

src/components/Dropdown/Dropdown.stories.tsx

@@ -303,6 +303,7 @@ export const SerchPerformedByExternalComponent: Story = {
           items={filteredItems}
           searchPlaceholder={"Type 'err' for error state"}
           onClick={handleClick}
+          onOpenChange={(isOpen) => isOpen && handleSearch('')}
           onRetry={(search: string) => handleSearch(search, true)}
           onSearch={debouncedSearch}
         >
@@ -323,7 +324,7 @@ export const WithSearchAndBottomHeader: Story = {
   args: {
     isSearchable: true,
     header: {
-      bottom: <div style={{ marginTop: '4px', display: 'flex', flexDirection: 'column', gap: '4px' }}>
+      bottom: <div style={{ padding: '4px 8px 0 8px', display: 'flex', flexDirection: 'column', gap: '4px' }}>
         <div style={{ width: '100%', height: '1px', background: '#F2F2F2' }} />
         <div style={{ color: '#898989' }}>Custom bottom header</div>
       </div>,

src/components/Dropdown/Dropdown.test.tsx

@@ -459,6 +459,77 @@ describe('Dropdown Component', () => {
       const headerBottom = await screen.findByTestId('header-bottom-id')
       expect(headerBottom).toBeInTheDocument()
     })
+
+    it('clears search when dropdown is closed and reopened', async() => {
+      const customItems = [
+        { id: 'apple', label: 'Apple' },
+        { id: 'banana', label: 'Banana' },
+        { id: 'orange', label: 'Orange' },
+      ]
+      renderDropdown({ props: { ...defaultProps, items: customItems, isSearchable: true } })
+      const button = screen.getByText('test-trigger-button')
+      await userEvent.click(button)
+
+      const searchInput = screen.getByRole('textbox')
+      await userEvent.type(searchInput, 'app')
+
+      expect(screen.getByText('Apple')).toBeInTheDocument()
+      expect(screen.queryByText('Banana')).not.toBeInTheDocument()
+
+      // Close dropdown by clicking on the button again
+      await userEvent.click(button)
+      await waitFor(() => expect(screen.queryByRole('textbox')).not.toBeInTheDocument())
+
+      // Reopen dropdown
+      await userEvent.click(button)
+      const newSearchInput = screen.getByRole('textbox')
+
+      expect(newSearchInput).toHaveValue('')
+      expect(screen.getByText('Apple')).toBeInTheDocument()
+      expect(screen.getByText('Banana')).toBeInTheDocument()
+      expect(screen.getByText('Orange')).toBeInTheDocument()
+    })
+
+    it('clears search when dropdown is reopened after item is selected and', async() => {
+      const onClick = jest.fn()
+      const customItems = [
+        { id: 'apple', label: 'Apple' },
+        { id: 'banana', label: 'Banana' },
+        { id: 'orange', label: 'Orange' },
+      ]
+      renderDropdown({
+        props: {
+          ...defaultProps,
+          items: customItems,
+          isSearchable: true,
+          onClick,
+        },
+      })
+      const button = screen.getByText('test-trigger-button')
+      await userEvent.click(button)
+
+      const searchInput = screen.getByRole('textbox')
+      await userEvent.type(searchInput, 'app')
+
+      expect(screen.getByText('Apple')).toBeInTheDocument()
+      expect(screen.queryByText('Banana')).not.toBeInTheDocument()
+
+      const appleItem = screen.getByRole('menuitem', { name: 'Apple' })
+      await userEvent.click(appleItem)
+      await waitFor(() => expect(onClick).toHaveBeenCalled())
+
+      // Dropdown should close after selection
+      await waitFor(() => expect(screen.queryByRole('textbox')).not.toBeInTheDocument())
+
+      // Reopen dropdown
+      await userEvent.click(button)
+      const newSearchInput = screen.getByRole('textbox')
+
+      expect(newSearchInput).toHaveValue('')
+      expect(screen.getByText('Apple')).toBeInTheDocument()
+      expect(screen.getByText('Banana')).toBeInTheDocument()
+      expect(screen.getByText('Orange')).toBeInTheDocument()
+    })
   })
 
   describe('with footer', () => {