diff --git a/web/src/components/SearchInput.tsx b/web/src/components/SearchInput.tsx index b192f74614..dcc517f87b 100644 --- a/web/src/components/SearchInput.tsx +++ b/web/src/components/SearchInput.tsx @@ -53,6 +53,11 @@ const SearchInput = ({ value={filterText} helperText={description} onChange={event => onFilterTextChange(event.target.value)} + onKeyDown={event => { + if (event.key === 'Enter') { + ;(event.target as HTMLInputElement).blur() + } + }} onClick={onClickInput} autoFocus={autoFocus} slotProps={{ diff --git a/web/src/components/__tests__/SearchInput.spec.tsx b/web/src/components/__tests__/SearchInput.spec.tsx index dd8609a2f2..9404ca46b4 100644 --- a/web/src/components/__tests__/SearchInput.spec.tsx +++ b/web/src/components/__tests__/SearchInput.spec.tsx @@ -29,4 +29,16 @@ describe('SearchInput', () => { }) expect(outerFilterTextChange).toHaveBeenCalledWith('test') }) + + it('should blur the input when pressing Enter to dismiss the keyboard', () => { + const { getByPlaceholderText } = renderWithTheme( + , + ) + const input = getByPlaceholderText('Placeholder') + input.focus() + expect(input).toHaveFocus() + + fireEvent.keyDown(input, { key: 'Enter' }) + expect(input).not.toHaveFocus() + }) })