Merge pull request #8346 from infor-design/8258-lookup-search

8258 - Fixed clear button in keyword search not updating search results on click

app/views/components/lookup/test-paging-server-side-keyword-search.html

@@ -33,7 +33,7 @@
       paging: true,
       pagesize: 10,
       pagesizes: [5, 10, 25, 50],
-      selectable: 'single',
+      selectable: 'multiple',
       toolbar: {
         results: true,
         keywordFilter: true,

docs/CHANGELOG.md

@@ -17,6 +17,7 @@
 - `[Link]` Changed selected border color for link card. ([#8225](https://github.com/infor-design/enterprise/issues/8225))
 - `[Fieldset]` Changed padding in reset for better compatibility. ([#1756](https://github.com/infor-design/enterprise-wc/issues/1756))
 - `[Locale]` Changed all `zh` locales time format as suggested by native speakers. ([#8313](https://github.com/infor-design/enterprise/issues/8313))
+- `[Lookup]` Fixed clear button in keyword search not updating search results on click. ([#8258](https://github.com/infor-design/enterprise/issues/8258))
 - `[Modal]` Fixed a bug where the modal would shift up when toggling a switch inside of it. ([#8018](https://github.com/infor-design/enterprise/issues/8018))
 - `[Modal]` Fixed a bug where textarea field is bigger than other fields on screen widths less that 400px. ([#8125](https://github.com/infor-design/enterprise/issues/8125))
 - `[Process Indicator]` Adjusted alignment of icon in compact process indicator. ([#8241](https://github.com/infor-design/enterprise/issues/8241))

src/components/datagrid/_datagrid.scss

@@ -5825,10 +5825,6 @@ html[dir='rtl'] {
           top: 7px;
           width: 21px;
         }
-
-        &:hover .icon {
-          color: $datagrid-header-color;
-        }
       }
     }
 

src/components/datagrid/datagrid.js

@@ -8028,16 +8028,25 @@ Datagrid.prototype = {
 
     if (this.settings.toolbar && this.settings.toolbar.keywordFilter) {
       const thisSearch = toolbar.find('.searchfield');
-      const xIcon = thisSearch.parent().find('.close.icon');
+      const clearButton = thisSearch.next();
 
+      let typingTimer;
       thisSearch.off('keypress.datagrid').on('keypress.datagrid', (e) => {
         if (e.keyCode === 13 || e.type === 'change') {
+          clearTimeout(typingTimer);
           e.preventDefault();
           self.keywordSearch(thisSearch.val());
         }
+
+        if (self.settings.filterWhenTyping) {
+          clearTimeout(typingTimer);
+          typingTimer = setTimeout(() => {
+            self.keywordSearch(thisSearch.val());
+          }, 400);
+        }
       });
 
-      xIcon.off('click.datagrid').on('click.datagrid', () => {
+      clearButton.off('click.datagrid').on('click.datagrid', () => {
         self.keywordSearch(thisSearch.val());
       });
     }

src/themes/theme-classic-light.scss

@@ -28,6 +28,9 @@ $button-disabled-background-color: transparent;
 $button-icon-disabled-color: $ids-color-palette-slate-30;
 $button-color-secondary-initial-background: $ids-color-palette-graphite-30;
 
+// Datagrid
+$datagrid-sort-icon-sorted-color: $ids-color-palette-slate-40;
+
 //================================================== //
 // Core Components