diff --git a/assets/js/src/core/modules/element/dynamic-types/definitions/field-filters/components/dynamic-type-field-filter-boolean-select-component.tsx b/assets/js/src/core/modules/element/dynamic-types/definitions/field-filters/components/dynamic-type-field-filter-boolean-select-component.tsx index 35d3c12326..27835f684a 100644 --- a/assets/js/src/core/modules/element/dynamic-types/definitions/field-filters/components/dynamic-type-field-filter-boolean-select-component.tsx +++ b/assets/js/src/core/modules/element/dynamic-types/definitions/field-filters/components/dynamic-type-field-filter-boolean-select-component.tsx @@ -8,7 +8,7 @@ * @license Pimcore Open Core License (POCL) */ -import React, { useEffect, useState } from 'react' +import React, { useEffect, useRef, useState } from 'react' import { Select } from '@Pimcore/components/select/select' import { useDynamicFilter } from '@Pimcore/components/dynamic-filter/provider/use-dynamic-filter' import { type DefaultOptionType } from 'antd/es/select' @@ -42,6 +42,7 @@ const boolToNum = (value: boolean | null): number => { export const DynamicTypeFieldFilterBooleanSelectComponent = (): React.JSX.Element => { const { setData, data, config: rawConfig } = useDynamicFilter() const config: IAssetSelectConfig | IObjectSelectConfig = rawConfig + const selectRef = useRef(null) const [_value, setValue] = useState([]) @@ -75,7 +76,13 @@ export const DynamicTypeFieldFilterBooleanSelectComponent = (): React.JSX.Elemen { + if (!open && datePickerRef.current !== null) { + datePickerRef.current.focus() + } + } } outputType="timestamp" value={ [convertISOToTimestamp(data?.from ?? null), convertISOToTimestamp(data?.to ?? null)] } /> @@ -172,6 +181,11 @@ export const DynamicTypeFieldFilterDateComponent = (props: DynamicTypeFieldFilte handleDateChange('from', convertedValue) } } } + onOpenChange={ (open: boolean) => { + if (!open && datePickerRef.current !== null) { + datePickerRef.current.focus() + } + } } outputType="timestamp" value={ convertISOToTimestamp(getDatePickerValue()) } /> diff --git a/assets/js/src/core/modules/element/dynamic-types/definitions/field-filters/components/dynamic-type-field-filter-multiselect-component.tsx b/assets/js/src/core/modules/element/dynamic-types/definitions/field-filters/components/dynamic-type-field-filter-multiselect-component.tsx index b1ff6c9fe2..3a4efe0c90 100644 --- a/assets/js/src/core/modules/element/dynamic-types/definitions/field-filters/components/dynamic-type-field-filter-multiselect-component.tsx +++ b/assets/js/src/core/modules/element/dynamic-types/definitions/field-filters/components/dynamic-type-field-filter-multiselect-component.tsx @@ -8,7 +8,7 @@ * @license Pimcore Open Core License (POCL) */ -import React, { useEffect, useState } from 'react' +import React, { useEffect, useRef, useState } from 'react' import { Select } from '@Pimcore/components/select/select' import { useDynamicFilter } from '@Pimcore/components/dynamic-filter/provider/use-dynamic-filter' import { type DefaultOptionType } from 'antd/es/select' @@ -26,6 +26,7 @@ interface IAssetSelectConfig { export const DynamicTypeFieldFilterMultiselectComponent = (): React.JSX.Element => { const { setData, data, config: rawConfig } = useDynamicFilter() const [_value, setValue] = useState(data as string[]) + const selectRef = useRef(null) const config: IAssetSelectConfig | IObjectSelectConfig = rawConfig let formattedOptions: DefaultOptionType[] = [] @@ -55,7 +56,13 @@ export const DynamicTypeFieldFilterMultiselectComponent = (): React.JSX.Element