From 53470ada548eea440975a03075f3e1110d390b49 Mon Sep 17 00:00:00 2001 From: Johan Hammar Date: Fri, 1 Oct 2021 17:20:09 +0200 Subject: [PATCH 1/3] Fix handling of search term when performing searches from the sidebar Signed-off-by: Johan Hammar --- .changeset/neat-cooks-sell.md | 5 +++++ packages/core-components/src/layout/Sidebar/Items.tsx | 1 + 2 files changed, 6 insertions(+) create mode 100644 .changeset/neat-cooks-sell.md diff --git a/.changeset/neat-cooks-sell.md b/.changeset/neat-cooks-sell.md new file mode 100644 index 0000000000..11859c3589 --- /dev/null +++ b/.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. diff --git a/packages/core-components/src/layout/Sidebar/Items.tsx b/packages/core-components/src/layout/Sidebar/Items.tsx index fbe1ffbb82..1246fda82e 100644 --- a/packages/core-components/src/layout/Sidebar/Items.tsx +++ b/packages/core-components/src/layout/Sidebar/Items.tsx @@ -311,6 +311,7 @@ export function SidebarSearchField(props: SidebarSearchFieldProps) { const handleEnter: KeyboardEventHandler = ev => { if (ev.key === 'Enter') { search(); + ev.preventDefault(); } }; From ebb2886122f57bfe438bc7b60c1f8691fb3ae6ae Mon Sep 17 00:00:00 2001 From: Johan Hammar Date: Tue, 5 Oct 2021 20:07:03 +0200 Subject: [PATCH 2/3] Call ev.preventDefault() before calling search() Signed-off-by: Johan Hammar --- packages/core-components/src/layout/Sidebar/Items.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/core-components/src/layout/Sidebar/Items.tsx b/packages/core-components/src/layout/Sidebar/Items.tsx index 1246fda82e..91af93439c 100644 --- a/packages/core-components/src/layout/Sidebar/Items.tsx +++ b/packages/core-components/src/layout/Sidebar/Items.tsx @@ -310,8 +310,8 @@ export function SidebarSearchField(props: SidebarSearchFieldProps) { const handleEnter: KeyboardEventHandler = ev => { if (ev.key === 'Enter') { - search(); ev.preventDefault(); + search(); } }; From 3539f88c6d731ca2ce4f9584c48b189659e19a7d Mon Sep 17 00:00:00 2001 From: Johan Hammar Date: Wed, 6 Oct 2021 20:14:12 +0200 Subject: [PATCH 3/3] Add test for defaultPrevented Signed-off-by: Johan Hammar --- .../src/layout/Sidebar/Items.test.tsx | 15 +++++++++++++-- 1 file changed, 13 insertions(+), 2 deletions(-) diff --git a/packages/core-components/src/layout/Sidebar/Items.test.tsx b/packages/core-components/src/layout/Sidebar/Items.test.tsx index 89d2a2c294..a3d3845028 100644 --- a/packages/core-components/src/layout/Sidebar/Items.test.tsx +++ b/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'; @@ -36,6 +36,7 @@ async function renderSidebar() { await renderInTestApp( + {}} to="/search" /> { ).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(); + }); + }); });