From 94607524449f19697172b013759e268d79e00182 Mon Sep 17 00:00:00 2001
From: Denys Bohdan <denys_bohdan@epam.com>
Date: Mon, 30 Oct 2023 12:51:41 +0100
Subject: [PATCH] UIIN-2493 Make Inventory search and browse query boxes
 expandable (#2322)

* UIIN-2493 Make Inventory search and browse query boxes expandable

* UIIN-2493 Make Inventory Browse searchbox a textarea

* UIIN-2493 Fix tests for Inventory search and browse
---
 CHANGELOG.md                                       | 1 +
 src/components/InstancesList/InstancesList.js      | 1 +
 src/components/InstancesList/InstancesList.test.js | 6 +++---
 src/views/BrowseInventory/BrowseInventory.js       | 1 +
 src/views/BrowseInventory/BrowseInventory.test.js  | 2 +-
 5 files changed, 7 insertions(+), 4 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index e89d912fc..316daf9f9 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -3,6 +3,7 @@
 
 ## [10.1.0] IN PROGRESS
 
+* Make Inventory search and browse query boxes expandable. Refs UIIN-2493.
 
 ## [10.0.1] IN PROGRESS
 
diff --git a/src/components/InstancesList/InstancesList.js b/src/components/InstancesList/InstancesList.js
index 49a468b63..2626f3d83 100644
--- a/src/components/InstancesList/InstancesList.js
+++ b/src/components/InstancesList/InstancesList.js
@@ -1178,6 +1178,7 @@ class InstancesList extends React.Component {
             searchableIndexesPlaceholder={null}
             initialResultCount={INITIAL_RESULT_COUNT}
             initiallySelectedRecord={getItem(`${namespace}.${segment}.lastOpenRecord`)}
+            inputType="textarea"
             resultCountIncrement={RESULT_COUNT_INCREMENT}
             viewRecordComponent={ViewInstanceWrapper}
             editRecordComponent={InstanceForm}
diff --git a/src/components/InstancesList/InstancesList.test.js b/src/components/InstancesList/InstancesList.test.js
index 2c88470d9..2680d5c2f 100644
--- a/src/components/InstancesList/InstancesList.test.js
+++ b/src/components/InstancesList/InstancesList.test.js
@@ -458,10 +458,10 @@ describe('InstancesList', () => {
       it('should have query in search input', () => {
         renderInstancesList({ segment: 'instances' });
 
-        fireEvent.change(screen.getByRole('searchbox', { name: 'Search' }), { target: { value: 'search query' } });
+        fireEvent.change(screen.getByRole('textbox', { name: 'Search' }), { target: { value: 'search query' } });
         fireEvent.click(screen.getAllByRole('button', { name: 'Search' })[1]);
 
-        expect(screen.getByRole('searchbox', { name: 'Search' })).toHaveValue('search query');
+        expect(screen.getByRole('textbox', { name: 'Search' })).toHaveValue('search query');
       });
 
       describe('when the search option is changed', () => {
@@ -549,7 +549,7 @@ describe('InstancesList', () => {
 
           await act(async () => fireEvent.change(screen.getByLabelText('Search field index'), { target: { value: qindex } }));
 
-          fireEvent.change(screen.getByRole('searchbox', { name: 'Search' }), { target: { value: _query } });
+          fireEvent.change(screen.getByRole('textbox', { name: 'Search' }), { target: { value: _query } });
           fireEvent.click(screen.getAllByRole('button', { name: 'Search' })[1]);
 
           const row = screen.getAllByText('ABA Journal')[0];
diff --git a/src/views/BrowseInventory/BrowseInventory.js b/src/views/BrowseInventory/BrowseInventory.js
index 35dafcc1c..ec2339cad 100644
--- a/src/views/BrowseInventory/BrowseInventory.js
+++ b/src/views/BrowseInventory/BrowseInventory.js
@@ -159,6 +159,7 @@ const BrowseInventory = () => {
             changeSearchIndex={onChangeSearchIndex}
             selectedIndex={searchIndex}
             searchableIndexesPlaceholder={searchableIndexesPlaceholder}
+            inputType="textarea"
           />
 
           <ResetButton
diff --git a/src/views/BrowseInventory/BrowseInventory.test.js b/src/views/BrowseInventory/BrowseInventory.test.js
index fe745614b..5d21850cb 100644
--- a/src/views/BrowseInventory/BrowseInventory.test.js
+++ b/src/views/BrowseInventory/BrowseInventory.test.js
@@ -163,7 +163,7 @@ describe('BrowseInventory', () => {
   it('should call "changeSearch" when search query was changed', async () => {
     const { container } = renderBrowseInventory();
 
-    await act(async () => userEvent.type(screen.getByRole('searchbox'), 'newQuery'));
+    await act(async () => userEvent.type(screen.getByRole('textbox'), 'newQuery'));
     await act(async () => userEvent.click(container.querySelector('[data-test-single-search-form-submit="true"]')));
 
     expect(applySearch).toHaveBeenCalled();