[CDX-223] Add search button functionality to focus input (#235)

Author: Alexey-Pavlov

spec/Components/CioAutocomplete/CioAutocomplete.test.tsx

@@ -225,4 +225,32 @@ describe('CioAutocomplete Client-Side Rendering', () => {
       });
     });
   });
+
+  describe('Search button behavior', () => {
+    it('Focuses the input when search button is clicked with empty input', () => {
+      render(<CioAutocomplete apiKey={DEMO_API_KEY} onSubmit={() => {}} />);
+
+      const searchInput = screen.getByRole('combobox') as HTMLInputElement;
+      const searchButton = screen.getByTestId('cio-submit-btn');
+
+      expect(searchInput).not.toHaveFocus();
+
+      fireEvent.click(searchButton);
+
+      expect(searchInput).toHaveFocus();
+    });
+
+    it('Submits the form when search button is clicked with non-empty input', () => {
+      const mockOnSubmit = jest.fn();
+      render(<CioAutocomplete apiKey={DEMO_API_KEY} onSubmit={mockOnSubmit} />);
+
+      const searchInput = screen.getByRole('combobox');
+      const searchButton = screen.getByTestId('cio-submit-btn');
+
+      fireEvent.change(searchInput, { target: { value: 'test query' } });
+      fireEvent.click(searchButton);
+
+      expect(mockOnSubmit).toHaveBeenCalled();
+    });
+  });
 });

src/components/Autocomplete/SearchInput/SearchInput.tsx

@@ -42,8 +42,15 @@ function DefaultRenderInput({ getFormProps, getInputProps, getLabelProps, setQue
       <button
         className='cio-submit-btn'
         data-testid='cio-submit-btn'
-        disabled={!inputProps.value}
         data-cnstrc-search-submit-btn
+        onClick={(e) => {
+          if (!inputProps.value) {
+            e.preventDefault();
+            if (inputProps.id) {
+              document.getElementById(inputProps.id)?.focus();
+            }
+          }
+        }}
         type='submit'
         aria-label='Submit Search'>
         <div className='cio-icon'>

src/styles.css

@@ -31,9 +31,6 @@
   cursor: pointer;
 }
 
-.cio-autocomplete button:disabled {
-  cursor: not-allowed;
-}
 
 .cio-autocomplete .cio-submit-btn {
   right: -21px;