diff --git a/src/helpers/eventHandlers.js b/src/helpers/eventHandlers.js new file mode 100644 index 0000000000..76d03facae --- /dev/null +++ b/src/helpers/eventHandlers.js @@ -0,0 +1,6 @@ +export default function handleEnterKeyPress(event, callback) { + if (event.key === 'Enter') { + event.preventDefault(); + callback(event); + } +} diff --git a/src/helpers/index.js b/src/helpers/index.js index b931d88c6a..6f0798d888 100644 --- a/src/helpers/index.js +++ b/src/helpers/index.js @@ -1,3 +1,4 @@ export useClickOutside from './useClickOutside'; export usePrevious from './usePrevious'; export useFirstVisited from './useFirstVisited'; +export handleEnterKeyPress from './eventHandlers'; diff --git a/src/ui/Header/HeaderSearchPopUp.js b/src/ui/Header/HeaderSearchPopUp.js index d27c5e7685..13ac82c083 100644 --- a/src/ui/Header/HeaderSearchPopUp.js +++ b/src/ui/Header/HeaderSearchPopUp.js @@ -2,6 +2,7 @@ import React, { useEffect } from 'react'; import { Container, Input, List } from 'semantic-ui-react'; import { withRouter, Link } from 'react-router-dom'; import { useClickOutside } from '@eeacms/volto-eea-design-system/helpers'; +import { handleEnterKeyPress } from '@eeacms/volto-eea-design-system/helpers'; const getRandomItems = (arr, max) => { return ( @@ -37,7 +38,6 @@ function HeaderSearchPopUp({ } = activeView || {}; const { suggestionsTitle, suggestions, maxToShow } = searchSuggestions || {}; - const [text, setText] = React.useState(''); const [visibleSuggestions, setVisibileSuggestions] = React.useState( getRandomItems(suggestions, maxToShow), ); @@ -48,12 +48,8 @@ function HeaderSearchPopUp({ useClickOutside({ targetRefs: [nodeRef, ...triggerRefs], callback: onClose }); - const onChangeText = (event, { value }) => { - setText(value); - event.preventDefault(); - }; - const onSubmit = (event) => { + const text = searchInputRef?.current?.inputRef?.current?.value; history.push(`${path}?q=${text}`); if (window?.searchContext?.resetSearch) { @@ -79,12 +75,14 @@ function HeaderSearchPopUp({