diff --git a/frontend/app/components/Dashboard/components/FilterSeries/FilterSeries.tsx b/frontend/app/components/Dashboard/components/FilterSeries/FilterSeries.tsx index f73546ebc..0844e6259 100644 --- a/frontend/app/components/Dashboard/components/FilterSeries/FilterSeries.tsx +++ b/frontend/app/components/Dashboard/components/FilterSeries/FilterSeries.tsx @@ -168,6 +168,7 @@ function FilterSeries(props: Props) { }; const onAddFilter = (filter: any) => { + filter.autoOpen = true; series.filter.addFilter(filter); observeChanges(); } diff --git a/frontend/app/components/shared/Filters/FilterAutoComplete/AutocompleteModal.tsx b/frontend/app/components/shared/Filters/FilterAutoComplete/AutocompleteModal.tsx index 4014ffb1b..409caeb81 100644 --- a/frontend/app/components/shared/Filters/FilterAutoComplete/AutocompleteModal.tsx +++ b/frontend/app/components/shared/Filters/FilterAutoComplete/AutocompleteModal.tsx @@ -234,6 +234,7 @@ interface Props { placeholder?: string; modalProps?: any; mapValues?: (value: string) => string; + isAutoOpen?: boolean; } export function AutoCompleteContainer(props: Props) { @@ -241,6 +242,15 @@ export function AutoCompleteContainer(props: Props) { const [showValueModal, setShowValueModal] = useState(false); const [hovered, setHovered] = useState(false); const isEmpty = props.value.length === 0 || !props.value[0]; + + React.useEffect(() => { + if (props.isAutoOpen) { + setTimeout(() => { + setShowValueModal(true); + }, 1) + } + }, [props.isAutoOpen]) + const onClose = () => setShowValueModal(false); const onApply = (values: string[]) => { setTimeout(() => { diff --git a/frontend/app/components/shared/Filters/FilterAutoComplete/FilterAutoComplete.tsx b/frontend/app/components/shared/Filters/FilterAutoComplete/FilterAutoComplete.tsx index c64a10d7e..f1ac440d3 100644 --- a/frontend/app/components/shared/Filters/FilterAutoComplete/FilterAutoComplete.tsx +++ b/frontend/app/components/shared/Filters/FilterAutoComplete/FilterAutoComplete.tsx @@ -44,6 +44,7 @@ interface Props { hideOrText?: boolean; onApplyValues: (values: string[]) => void; modalProps?: Record + isAutoOpen?: boolean; } const FilterAutoComplete = observer( diff --git a/frontend/app/components/shared/Filters/FilterAutoCompleteLocal/FilterAutoCompleteLocal.tsx b/frontend/app/components/shared/Filters/FilterAutoCompleteLocal/FilterAutoCompleteLocal.tsx index 48e6617d3..b29a51be1 100644 --- a/frontend/app/components/shared/Filters/FilterAutoCompleteLocal/FilterAutoCompleteLocal.tsx +++ b/frontend/app/components/shared/Filters/FilterAutoCompleteLocal/FilterAutoCompleteLocal.tsx @@ -18,6 +18,7 @@ interface Props { allowDecimals?: boolean; modalProps?: Record; onApplyValues: (values: string[]) => void; + isAutoOpen?: boolean; } function FilterAutoCompleteLocal(props: { params: any, values: string[], onClose: () => void, onApply: (values: string[]) => void, placeholder?: string }) { diff --git a/frontend/app/components/shared/Filters/FilterValue/FilterValue.tsx b/frontend/app/components/shared/Filters/FilterValue/FilterValue.tsx index e8b965623..5d4c60ca1 100644 --- a/frontend/app/components/shared/Filters/FilterValue/FilterValue.tsx +++ b/frontend/app/components/shared/Filters/FilterValue/FilterValue.tsx @@ -18,6 +18,8 @@ interface Props { } function FilterValue(props: Props) { const { filter } = props; + const isAutoOpen = filter.autoOpen; + const [durationValues, setDurationValues] = useState({ minDuration: filter.value?.[0], maxDuration: filter.value.length > 1 ? filter.value[1] : filter.value[0], @@ -99,6 +101,7 @@ function FilterValue(props: Props) { onSelect={(e, item, index) => debounceOnSelect(e, item, index)} icon={filter.icon} placeholder={filter.placeholder} + isAutoOpen={isAutoOpen} modalProps={{ placeholder: '' }} {...props} /> @@ -106,6 +109,7 @@ function FilterValue(props: Props) { const BaseDropDown = (props) => ( { + filter.autoOpen = true; searchStoreLive.addFilter(filter); }; diff --git a/frontend/app/components/shared/SessionFilters/SessionFilters.tsx b/frontend/app/components/shared/SessionFilters/SessionFilters.tsx index ab18384c5..4e40105ff 100644 --- a/frontend/app/components/shared/SessionFilters/SessionFilters.tsx +++ b/frontend/app/components/shared/SessionFilters/SessionFilters.tsx @@ -57,6 +57,7 @@ function SessionFilters() { }, [appliedFilter.filters]); const onAddFilter = (filter: any) => { + filter.autoOpen = true; searchStore.addFilter(filter); }; diff --git a/frontend/app/mstore/types/filter.ts b/frontend/app/mstore/types/filter.ts index ccde4e386..9bb135b2d 100644 --- a/frontend/app/mstore/types/filter.ts +++ b/frontend/app/mstore/types/filter.ts @@ -19,6 +19,7 @@ export interface IFilter { eventsHeader: string; page: number; limit: number; + autoOpen: boolean; merge(filter: any): void; @@ -62,6 +63,7 @@ export default class Filter implements IFilter { filterId: string = ''; name: string = ''; + autoOpen = false; filters: FilterItem[] = []; excludes: FilterItem[] = []; eventsOrder: string = 'then';