[CPT-1478] Add enableResetSearch prop to Select and QB (#4075)

* [CPT-1478] Add enableResetSearch prop to Select and QB * [CPT-1478] Address review * Create seperate changesets for packages * Update multiselect input field type --------- Co-authored-by: Rasit Ozcan <[email protected]>
toptal · Jan 8, 2024 · 2d0c9d4 · 2d0c9d4
1 parent 6ef3992
commit 2d0c9d4
Show file tree

Hide file tree

Showing 14 changed files with 107 additions and 3 deletions.
diff --git a/.changeset/rare-jokes-build.md b/.changeset/rare-jokes-build.md
@@ -0,0 +1,5 @@
+---
+'@toptal/picasso': minor
+---
+
+- add `enableResetSearch` prop to `Select` component to render reset icon which clears search input
diff --git a/.changeset/spicy-tips-listen.md b/.changeset/spicy-tips-listen.md
@@ -0,0 +1,5 @@
+---
+'@toptal/picasso-query-builder': minor
+---
+
+- add search input clearing functionality for `select` and `multiselect` filter types through filter configuration with `enableResetSearch` property.
diff --git a/packages/picasso-query-builder/src/MultiSelect/MultiSelect.tsx b/packages/picasso-query-builder/src/MultiSelect/MultiSelect.tsx
@@ -57,6 +57,7 @@ export const MultiSelect = ({
         value={values}
         status={hasError ? 'error' : undefined}
         data-testid={valueEditorTestId}
+        enableResetSearch={fieldData?.enableResetSearch}
       />
     </Container>
   )

diff --git a/packages/picasso-query-builder/src/QueryBuilder/story/Default.example.tsx b/packages/picasso-query-builder/src/QueryBuilder/story/Default.example.tsx
@@ -199,6 +199,7 @@ const fields: Field[] = [
     name: 'alsoPlays',
     label: 'Also plays',
     valueEditorType: 'multiselect',
+    enableResetSearch: true,
     values: musicalInstruments,
     defaultValue: 'More cowbell',
   },

diff --git a/packages/picasso-query-builder/src/types/query-builder.ts b/packages/picasso-query-builder/src/types/query-builder.ts
@@ -21,7 +21,7 @@ export type RangeValue = {
 interface BasicField
   extends Omit<QueryBuilderField, 'inputType' | 'valueEditorType'> {
   inputType?: 'text' | 'number' | null
-  valueEditorType?: 'text' | 'number' | 'select' | 'multiselect' | null
+  valueEditorType?: 'text' | 'number' | 'select' | null
   hideOperator?: boolean
 }
 interface RangeField
@@ -34,6 +34,14 @@ interface BooleanField
   extends Omit<QueryBuilderField, 'inputType' | 'valueEditorType' | 'values'> {
   valueEditorType?: 'boolean'
 }
+interface MultiSelectField
+  extends Omit<QueryBuilderField, 'inputType' | 'valueEditorType'> {
+  valueEditorType?: 'multiselect'
+  /**
+   * Allow search input reset
+   */
+  enableResetSearch?: boolean
+}
 
 interface AutoCompleteField
   extends Omit<QueryBuilderField, 'inputType' | 'valueEditorType'> {
@@ -54,7 +62,12 @@ interface AutoCompleteField
 
 export type BaseValueEditorProps = Omit<ValueEditorProps, 'schema'>
 export type BaseVersatileSelectorProps = Omit<VersatileSelectorProps, 'schema'>
-export type Field = BasicField | RangeField | AutoCompleteField | BooleanField
+export type Field =
+  | BasicField
+  | RangeField
+  | AutoCompleteField
+  | BooleanField
+  | MultiSelectField
 export type QueryBuilderErrors = {
   [key: string]: ValidationResult | true
 }

diff --git a/packages/picasso/src/NonNativeSelect/NonNativeSelect.tsx b/packages/picasso/src/NonNativeSelect/NonNativeSelect.tsx
@@ -64,6 +64,7 @@ export const NonNativeSelect = documentable(
         enableReset,
         popperContainer,
         enableAutofill,
+        enableResetSearch,
         autoComplete,
         searchPlaceholder,
         searchThreshold = DEFAULT_SEARCH_THRESHOLD,
@@ -135,6 +136,7 @@ export const NonNativeSelect = documentable(
               </InputAdornment>
             }
             placeholder={searchPlaceholder}
+            enableReset={enableResetSearch}
             size={size}
             value={filterOptionsValue}
             testIds={testIds}

diff --git a/packages/picasso/src/NonNativeSelect/test.tsx b/packages/picasso/src/NonNativeSelect/test.tsx
@@ -1,3 +1,4 @@
+/* eslint-disable max-statements */
 /* eslint-disable max-lines */
 import React from 'react'
 import type { PicassoConfig } from '@toptal/picasso/test-utils'
@@ -169,6 +170,33 @@ describe('NonNativeSelect', () => {
     expect(queryByTestId('loader')).toBeInTheDocument()
   })
 
+  it('renders reset icon when `enableResetSearch` is set to true', () => {
+    const placeholder = 'Choose an option...'
+    const searchPlaceholder = 'Search for an option'
+
+    const { getByPlaceholderText, queryByTestId } = renderSelect({
+      options: OPTIONS,
+      placeholder,
+      searchPlaceholder,
+      searchThreshold: -1,
+      enableResetSearch: true,
+      testIds: {
+        resetButton: 'reset-search-input',
+      },
+    })
+
+    const selectInput = getByPlaceholderText(placeholder)
+
+    fireEvent.click(selectInput)
+
+    const searchInput = getByPlaceholderText(searchPlaceholder)
+
+    fireEvent.focus(searchInput)
+    fireEvent.change(searchInput, { target: { value: '3' } })
+
+    expect(queryByTestId('reset-search-input')).toBeInTheDocument()
+  })
+
   it('filters options based on entered value to the input field', () => {
     const placeholder = 'Choose an option...'
     const searchPlaceholder = 'Search for an option'

diff --git a/packages/picasso/src/Select/Select.tsx b/packages/picasso/src/Select/Select.tsx
@@ -73,6 +73,7 @@ Select.defaultProps = {
   searchPlaceholder: 'Search',
   native: false,
   status: 'default',
+  enableResetSearch: false,
 }
 
 export default Select
diff --git a/packages/picasso/src/Select/story/SearchBehavior.example.tsx b/packages/picasso/src/Select/story/SearchBehavior.example.tsx
@@ -38,7 +38,7 @@ const SelectSearchBehaviourExample = () => {
           />
         </Form.Field>
       </Container>
-      <Container>
+      <Container right={SPACING_4}>
         <Form.Field>
           <Form.Label>Search threshold</Form.Label>
           <NumberInput
@@ -48,6 +48,21 @@ const SelectSearchBehaviourExample = () => {
           />
         </Form.Field>
       </Container>
+      <Container>
+        <Form.Field>
+          <Form.Label>Search with input reset</Form.Label>
+          <Select
+            onChange={handleChange}
+            value={value}
+            options={OPTIONS}
+            placeholder='Choose an option...'
+            width='auto'
+            enableResetSearch
+            searchThreshold={threshold}
+            data-testid='select'
+          />
+        </Form.Field>
+      </Container>
     </Container>
   )
 }

diff --git a/packages/picasso/src/SelectBase/hooks/use-select-props/use-search-reset-handler/index.ts b/packages/picasso/src/SelectBase/hooks/use-select-props/use-search-reset-handler/index.ts
@@ -0,0 +1 @@
+export { default } from './use-search-reset-handler'
diff --git a/packages/picasso/src/SelectBase/hooks/use-select-props/use-search-reset-handler/test.ts b/packages/picasso/src/SelectBase/hooks/use-select-props/use-search-reset-handler/test.ts
@@ -0,0 +1,16 @@
+import { renderHook } from '@testing-library/react'
+
+import { getUseSelectPropsMock } from '../mocks'
+import useSearchResetHandler from './use-search-reset-handler'
+
+describe('useSearchResetHandler', () => {
+  it('handles reset', () => {
+    const props = getUseSelectPropsMock()
+    const { result } = renderHook(() => useSearchResetHandler(props))
+
+    result.current()
+
+    expect(props.selectState.setFilterOptionsValue).toHaveBeenCalledTimes(1)
+    expect(props.selectState.setFilterOptionsValue).toHaveBeenCalledWith('')
+  })
+})
diff --git a/...rc/SelectBase/hooks/use-select-props/use-search-reset-handler/use-search-reset-handler.ts b/...rc/SelectBase/hooks/use-select-props/use-search-reset-handler/use-search-reset-handler.ts
@@ -0,0 +1,10 @@
+import type { ValueType, UseSelectProps } from '../../../types'
+
+const useSearchResetHandler =
+  <T extends ValueType, M extends boolean = false>({
+    selectState: { setFilterOptionsValue },
+  }: UseSelectProps<T, M>) =>
+  () =>
+    setFilterOptionsValue('')
+
+export default useSearchResetHandler
diff --git a/packages/picasso/src/SelectBase/hooks/use-select-props/use-select-props.ts b/packages/picasso/src/SelectBase/hooks/use-select-props/use-select-props.ts
@@ -1,3 +1,4 @@
+/* eslint-disable max-statements */
 import type {
   Option,
   ItemProps,
@@ -20,6 +21,7 @@ import useSearchChangeHandler from './use-search-change-handler'
 import useItemOnMouseDownHandler from './use-item-on-mouse-down-handler'
 import useItemOnMouseEnter from './use-item-on-mouse-enter-handler'
 import useItemOnClick from './use-item-on-click-handler'
+import useSearchResetHandler from './use-search-reset-handler'
 
 const useSelectProps = <T extends ValueType, M extends boolean = false>(
   props: UseSelectProps<T, M>
@@ -39,6 +41,7 @@ const useSelectProps = <T extends ValueType, M extends boolean = false>(
     ...props,
     handleSelect,
   })
+  const handleSearchReset = useSearchResetHandler(props)
   const handleSearchChange = useSearchChangeHandler(props)
   const handleItemOnMouseDown = useItemOnMouseDownHandler()
   const handleItemOnMouseEnter = useItemOnMouseEnter(props)
@@ -77,6 +80,7 @@ const useSelectProps = <T extends ValueType, M extends boolean = false>(
     onChange: handleSearchChange,
     onKeyDown: handleSearchKeyDown,
     onBlur: handleSearchBlur,
+    onResetClick: handleSearchReset,
   })
 
   return {

diff --git a/packages/picasso/src/SelectBase/types.ts b/packages/picasso/src/SelectBase/types.ts
@@ -80,6 +80,8 @@ export interface SelectProps<
   size?: SizeType<'small' | 'medium' | 'large'>
   /** Whether to render reset icon which clears selected value */
   enableReset?: boolean
+  /** Whether to render reset icon which clears search input value */
+  enableResetSearch?: boolean
   popperContainer?: HTMLElement
   /** Defines the minimum options number to show the search
    * @default 10