diff --git a/packages/eui/changelogs/upcoming/9059.md b/packages/eui/changelogs/upcoming/9059.md new file mode 100644 index 00000000000..f52b65c463a --- /dev/null +++ b/packages/eui/changelogs/upcoming/9059.md @@ -0,0 +1,3 @@ +**Bug fixes** + +- Fixed `EuiInMemoryTable` not firing the `search.onChange` callback when `searchFormat` equals `text`. diff --git a/packages/eui/src/components/basic_table/in_memory_table.test.tsx b/packages/eui/src/components/basic_table/in_memory_table.test.tsx index b1af9fb8108..ecd940ba313 100644 --- a/packages/eui/src/components/basic_table/in_memory_table.test.tsx +++ b/packages/eui/src/components/basic_table/in_memory_table.test.tsx @@ -1505,5 +1505,69 @@ describe('EuiInMemoryTable', () => { expect(tableContent).toHaveLength(1); // only 1 match expect(tableContent[0]).toHaveTextContent(specialCharacterSearch); }); + + it('fires the onChange callback', () => { + const items = [{ title: 'Hello' }, { title: 'Goodbye' }]; + const columns = [{ field: 'title', name: 'Title' }]; + const TEXT = 'Hello World!'; + const mockOnChange = jest.fn(); + + const { getByTestSubject, container } = render( + + ); + + fireEvent.keyUp(getByTestSubject('searchbox'), { + target: { value: TEXT }, + }); + + const tableContent = container.querySelectorAll( + '.euiTableRowCell .euiTableCellContent' + ); + expect(mockOnChange).toHaveBeenCalledTimes(1); + expect(mockOnChange).toHaveBeenCalledWith({ + query: Query.parse(`"${TEXT}"`), + queryText: TEXT, + error: null, + }); + expect(tableContent).toHaveLength(items.length); // all items + }); + + it('fires the onChange callback but handles internal state too', () => { + const items = [{ title: 'foo' }, { title: 'bar' }, { title: 'baz' }]; + const columns = [{ field: 'title', name: 'Title' }]; + const TEXT = 'ba'; + const mockOnChange = jest.fn(); + mockOnChange.mockReturnValue(true); + + const { getByTestSubject, container } = render( + + ); + + fireEvent.keyUp(getByTestSubject('searchbox'), { + target: { value: TEXT }, + }); + + expect(mockOnChange).toHaveBeenCalledTimes(1); + const tableContent = container.querySelectorAll( + '.euiTableRowCell .euiTableCellContent' + ); + expect(tableContent).toHaveLength(2); // 2 matches for "ba" + }); }); }); diff --git a/packages/eui/src/components/basic_table/in_memory_table.tsx b/packages/eui/src/components/basic_table/in_memory_table.tsx index 26508487fbd..03d636e1110 100644 --- a/packages/eui/src/components/basic_table/in_memory_table.tsx +++ b/packages/eui/src/components/basic_table/in_memory_table.tsx @@ -543,6 +543,21 @@ export class EuiInMemoryTable extends Component< onPlainTextSearch = (searchValue: string) => { const escapedQueryText = searchValue.replace(/["\\]/g, '\\$&'); const finalQuery = `"${escapedQueryText}"`; + const { search } = this.props; + + if (isEuiSearchBarProps(search)) { + if (search.onChange) { + const shouldQueryInMemory = search.onChange({ + query: EuiSearchBar.Query.parse(finalQuery), + queryText: escapedQueryText, + error: null, + }); + if (!shouldQueryInMemory) { + return; + } + } + } + this.setState({ query: EuiSearchBar.Query.parse(finalQuery), });