adds deactivateInputFilterAction to droplist

Author: tinkertrain

src/components/DropList/DropList.Combobox.jsx

@@ -33,6 +33,7 @@ function Combobox({
   customEmptyList = null,
   customEmptyListItems,
   'data-cy': dataCy = `DropList.${VARIANTS.COMBOBOX}`,
+  deactivateInputFilterAction,
   focusToggler = noop,
   handleSelectedItemChange = noop,
   inputPlaceholder = 'Search',
@@ -86,6 +87,8 @@ function Combobox({
     },
 
     onInputValueChange({ inputValue }) {
+      if (deactivateInputFilterAction) return
+
       let filtered = filterItems(items, inputValue, actionItemRef)
       const isListEmpty = filtered.length === 0
 
@@ -216,6 +219,12 @@ function Combobox({
             onFocus: event => {
               onMenuFocus(event)
             },
+            onChange: event => {
+              if (deactivateInputFilterAction) {
+                event.persist()
+                onInputChange(event.target.value, inputFilteredItems, event)
+              }
+            },
             onKeyDown: event => {
               if (event.key === 'Tab') {
                 toggleOpenedState(false)

src/components/DropList/DropList.jsx

@@ -41,6 +41,7 @@ function DropListManager({
   customEmptyList = null,
   customEmptyListItems,
   'data-cy': dataCy,
+  deactivateInputFilterAction = false,
   enableLeftRightNavigation = false,
   focusTogglerOnMenuClose = true,
   getTippyInstance = noop,
@@ -284,6 +285,7 @@ function DropListManager({
             customEmptyList={customEmptyList}
             customEmptyListItems={customEmptyListItems}
             data-cy={dataCy}
+            deactivateInputFilterAction={deactivateInputFilterAction}
             enableLeftRightNavigation={enableLeftRightNavigation}
             focusToggler={focusToggler}
             handleSelectedItemChange={handleSelectedItemChange}
@@ -355,6 +357,8 @@ DropListManager.propTypes = {
   ),
   /** Data attr applied to the DropList for Cypress tests. By default one of 'DropList.Select' or 'DropList.Combobox' depending on the variant used */
   'data-cy': PropTypes.string,
+  /** On combobox, deactivate the default action of filtering so you can use the input as you please (like search) */
+  deactivateInputFilterAction: PropTypes.bool,
   /** Enable navigation with Right and Left arrows (useful for horizontally rendered lists) */
   enableLeftRightNavigation: PropTypes.bool,
   /** Automatically moves the focus back to the toggler when the DropList is closed */
@@ -375,7 +379,7 @@ DropListManager.propTypes = {
   menuCSS: PropTypes.any,
   /** Custom width for the Menu */
   menuWidth: PropTypes.any,
-  /** Callback that fires when combobox search input changes, gives acces to value and resulting filtered items `onInputChange(value, filteredItems)` */
+  /** Callback that fires when combobox search input changes, gives acces to value, resulting filtered items and event (if deactivateInputFilterAction is on) `onInputChange(value, filteredItems, event)` */
   onInputChange: PropTypes.func,
   /** Callback that fires when the menu loses focus */
   onMenuBlur: PropTypes.func,

src/components/DropList/DropList.stories.mdx

@@ -248,6 +248,10 @@ You can use the `autoSetComboboxAt` prop to automatically choose between the 2 v
         onDropListLeave={() => {
           console.log('DropList left')
         }}
+        onInputChange={(value, e) => {
+          console.log('🚀 ~ value', value)
+          console.log('🚀 ~ e', e)
+        }}
         items={select(
           'Items',
           {

src/components/DropList/DropList.test.js

@@ -582,13 +582,33 @@ describe('Combobox', () => {
     )
 
     user.type(getByPlaceholderText('Search'), 'J')
-
     expect(onInputChangeSpy).toHaveBeenCalledWith('J', [
       { label: 'John' },
       { label: 'Jeff' },
     ])
   })
 
+  test('should return value, items and event onInputChange if deactivateInputFilterAction on', () => {
+    const onInputChangeSpy = jest.fn()
+    const { getByPlaceholderText } = render(
+      <DropList
+        isMenuOpen
+        deactivateInputFilterAction
+        items={someItems}
+        toggler={<SimpleButton text="Button Toggler" />}
+        variant="combobox"
+        onInputChange={onInputChangeSpy}
+      />
+    )
+
+    user.type(getByPlaceholderText('Search'), 'J')
+    expect(onInputChangeSpy).toHaveBeenCalledWith(
+      'J',
+      someItems,
+      expect.anything()
+    )
+  })
+
   test('should hide the search input on combobox if list empty', () => {
     const { queryByRole, getByPlaceholderText } = render(
       <DropList