diff --git a/frontend/app/components/Session/Player/ReplayPlayer/useShortcuts.ts b/frontend/app/components/Session/Player/ReplayPlayer/useShortcuts.ts index a0d59a166..63959cd33 100644 --- a/frontend/app/components/Session/Player/ReplayPlayer/useShortcuts.ts +++ b/frontend/app/components/Session/Player/ReplayPlayer/useShortcuts.ts @@ -31,7 +31,7 @@ function useShortcuts({ }; useEffect(() => { - const onKeyDown = (e: KeyboardEvent) => { + const handleShortcuts = (e: KeyboardEvent) => { if (e.target instanceof HTMLInputElement || e.target instanceof HTMLTextAreaElement) { return; } @@ -86,9 +86,9 @@ function useShortcuts({ } }; - document.addEventListener('keydown', onKeyDown); + document.addEventListener('keydown', handleShortcuts, true); return () => { - document.removeEventListener('keydown', onKeyDown); + document.removeEventListener('keydown', handleShortcuts, true); }; }, [forthTenSeconds, backTenSeconds, player, fullScreenOn, fullScreenOff]); } diff --git a/frontend/app/components/shared/SessionSearchField/AiSessionSearchField.tsx b/frontend/app/components/shared/SessionSearchField/AiSessionSearchField.tsx index 4fbcdb971..0f075cb20 100644 --- a/frontend/app/components/shared/SessionSearchField/AiSessionSearchField.tsx +++ b/frontend/app/components/shared/SessionSearchField/AiSessionSearchField.tsx @@ -4,7 +4,7 @@ import { Input, Icon } from 'UI'; import FilterModal from 'Shared/Filters/FilterModal'; import { debounce } from 'App/utils'; import { assist as assistRoute, isRoute } from 'App/routes'; -import { addFilterByKeyAndValue, fetchFilterSearch, edit } from 'Duck/search'; +import { addFilterByKeyAndValue, fetchFilterSearch, edit, clearSearch } from 'Duck/search'; import { addFilterByKeyAndValue as liveAddFilterByKeyAndValue, fetchFilterSearch as liveFetchFilterSearch, @@ -13,6 +13,7 @@ import { observer } from 'mobx-react-lite'; import { useStore } from 'App/mstore'; import { Segmented } from 'antd'; import OutsideClickDetectingDiv from 'Shared/OutsideClickDetectingDiv'; +import { EnterOutlined, CloseOutlined } from '@ant-design/icons'; const ASSIST_ROUTE = assistRoute(); @@ -21,7 +22,9 @@ interface Props { addFilterByKeyAndValue: (key: string, value: string) => void; liveAddFilterByKeyAndValue: (key: string, value: string) => void; liveFetchFilterSearch: any; + appliedFilter: any; edit: typeof edit; + clearSearch: typeof clearSearch; } function SessionSearchField(props: Props) { @@ -82,24 +85,39 @@ function SessionSearchField(props: Props) { ); } -const AiSearchField = observer(({ edit }: Props) => { +const AiSearchField = observer(({ edit, appliedFilter, clearSearch }: Props) => { + const hasFilters = appliedFilter && appliedFilter.filters && appliedFilter.filters.size > 0; const { aiFiltersStore } = useStore(); const [searchQuery, setSearchQuery] = useState(''); const debounceAiFetch = React.useCallback(debounce(aiFiltersStore.getSearchFilters, 1000), []); const onSearchChange = ({ target: { value } }: any) => { setSearchQuery(value); - if (value !== '' && value !== searchQuery) { - debounceAiFetch(value); + }; + + const fetchResults = () => { + if (searchQuery) { + debounceAiFetch(searchQuery); } }; + const handleKeyDown = (event: any) => { + if (event.key === 'Enter') { + fetchResults(); + } + }; + + const clearAll = () => { + clearSearch(); + setSearchQuery(''); + }; + React.useEffect(() => { if (aiFiltersStore.filtersSetKey !== 0) { console.log('updating filters', aiFiltersStore.filters, aiFiltersStore.filtersSetKey); - edit(aiFiltersStore.filters) + edit(aiFiltersStore.filters); } - }, [aiFiltersStore.filters, aiFiltersStore.filtersSetKey]) + }, [aiFiltersStore.filters, aiFiltersStore.filtersSetKey]); return (