From f0f1ea0003a322e46154ed869e74b895bf646225 Mon Sep 17 00:00:00 2001 From: xIrusux Date: Tue, 30 Sep 2025 15:14:54 +0200 Subject: [PATCH 1/4] return focus to parent element --- ...ype-field-filter-boolean-select-component.tsx | 9 ++++++++- .../dynamic-type-field-filter-date-component.tsx | 16 +++++++++++++++- ...c-type-field-filter-multiselect-component.tsx | 9 ++++++++- 3 files changed, 31 insertions(+), 3 deletions(-) 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..fc55282128 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) { + 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) { + 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..4a383f84f1 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 { + onDropdownVisibleChange={ (open: boolean) => { if (!open && selectRef.current !== null) { selectRef.current.focus() } diff --git a/assets/js/src/core/modules/element/dynamic-types/definitions/field-filters/components/dynamic-type-field-filter-date-component.tsx b/assets/js/src/core/modules/element/dynamic-types/definitions/field-filters/components/dynamic-type-field-filter-date-component.tsx index bfe1666f42..a27713573a 100644 --- a/assets/js/src/core/modules/element/dynamic-types/definitions/field-filters/components/dynamic-type-field-filter-date-component.tsx +++ b/assets/js/src/core/modules/element/dynamic-types/definitions/field-filters/components/dynamic-type-field-filter-date-component.tsx @@ -31,7 +31,7 @@ export interface DynamicTypeFieldFilterDateProps extends AbstractFieldFilterDefi export const DynamicTypeFieldFilterDateComponent = (props: DynamicTypeFieldFilterDateProps): React.JSX.Element => { const datePickerRef = useRef(null) - + interface DateValue { setting: DatePickerSettingValue from: string | null @@ -156,7 +156,7 @@ export const DynamicTypeFieldFilterDateComponent = (props: DynamicTypeFieldFilte handleDateRangeChange(convertValueToISOFormat(newFrom), convertValueToISOFormat(newTo)) } } - onOpenChange={ (open: boolean) => { + onOpenChange={ (open: boolean) => { if (!open && datePickerRef.current !== null) { datePickerRef.current.focus() } @@ -181,7 +181,7 @@ export const DynamicTypeFieldFilterDateComponent = (props: DynamicTypeFieldFilte handleDateChange('from', convertedValue) } } } - onOpenChange={ (open: boolean) => { + onOpenChange={ (open: boolean) => { if (!open && datePickerRef.current !== null) { datePickerRef.current.focus() } 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 820954d0d5..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 @@ -56,7 +56,7 @@ export const DynamicTypeFieldFilterMultiselectComponent = (): React.JSX.Element