Merge pull request #7416 from johanhammar/firefox-search

Fix handling of search term when performing searches from the sidebar

.changeset/neat-cooks-sell.md

@@ -0,0 +1,5 @@
+---
+'@backstage/core-components': patch
+---
+
+Fix search in Firefox. When the search was performed by pressing enter, the query parameter was first set but then reverted back.

packages/core-components/src/layout/Sidebar/Items.test.tsx

@@ -16,12 +16,12 @@
 
 import React from 'react';
 import { renderInTestApp } from '@backstage/test-utils';
-import { screen } from '@testing-library/react';
+import { createEvent, fireEvent, screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import HomeIcon from '@material-ui/icons/Home';
 import CreateComponentIcon from '@material-ui/icons/AddCircleOutline';
 import { Sidebar } from './Bar';
-import { SidebarItem } from './Items';
+import { SidebarItem, SidebarSearchField } from './Items';
 import { renderHook } from '@testing-library/react-hooks';
 import { hexToRgb, makeStyles } from '@material-ui/core/styles';
 
@@ -36,6 +36,7 @@ async function renderSidebar() {
 
   await renderInTestApp(
     <Sidebar>
+      <SidebarSearchField onSearch={() => {}} to="/search" />
       <SidebarItem text="Home" icon={HomeIcon} to="./" />
       <SidebarItem
         icon={CreateComponentIcon}
@@ -72,4 +73,14 @@ describe('Items', () => {
       ).toHaveStyle(`background-color: ${hexToRgb('2b2a2a')}`);
     });
   });
+  describe('SidebarSearchField', () => {
+    it('should be defaultPrevented when enter is pressed', async () => {
+      const searchEvent = createEvent.keyDown(
+        await screen.findByPlaceholderText('Search'),
+        { key: 'Enter', code: 'Enter', charCode: 13 },
+      );
+      fireEvent(await screen.findByPlaceholderText('Search'), searchEvent);
+      expect(searchEvent.defaultPrevented).toBeTruthy();
+    });
+  });
 });

packages/core-components/src/layout/Sidebar/Items.tsx

@@ -306,6 +306,7 @@ export function SidebarSearchField(props: SidebarSearchFieldProps) {
 
   const handleEnter: KeyboardEventHandler = ev => {
     if (ev.key === 'Enter') {
+      ev.preventDefault();
       search();
     }
   };