[Grid][Filter] - each filter should return focus to itself so in future it can work within a form setup

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<any>(null)
 
   const [_value, setValue] = useState<number[]>([])
 
@@ -75,7 +76,13 @@ export const DynamicTypeFieldFilterBooleanSelectComponent = (): React.JSX.Elemen
     <Select
       mode="multiple"
       onChange={ handleChange }
+      onDropdownVisibleChange={ (open: boolean) => {
+        if (!open && selectRef.current !== null) {
+          selectRef.current.focus()
+        }
+      } }
       options={ formattedOptions }
+      ref={ selectRef }
       style={ { width: '100%' } }
       value={ _value }
     />

assets/js/src/core/modules/element/dynamic-types/definitions/field-filters/components/dynamic-type-field-filter-date-component.tsx

@@ -8,7 +8,7 @@
  *  @license    Pimcore Open Core License (POCL)
  */
 
-import React from 'react'
+import React, { useRef } from 'react'
 import dayjs from 'dayjs'
 import { Select } from '@Pimcore/components/select/select'
 import { Flex } from '@Pimcore/components/flex/flex'
@@ -30,6 +30,8 @@ const DATE_FORMAT = 'YYYY-MM-DD'
 export interface DynamicTypeFieldFilterDateProps extends AbstractFieldFilterDefinition {}
 
 export const DynamicTypeFieldFilterDateComponent = (props: DynamicTypeFieldFilterDateProps): React.JSX.Element => {
+  const datePickerRef = useRef<any>(null)
+
   interface DateValue {
     setting: DatePickerSettingValue
     from: string | null
@@ -135,6 +137,8 @@ export const DynamicTypeFieldFilterDateComponent = (props: DynamicTypeFieldFilte
     <Flex
       align="center"
       gap="extra-small"
+      ref={ datePickerRef }
+      tabIndex={ -1 }
     >
       <Select
         defaultValue={ DatePickerSettingValue.ON }
@@ -152,6 +156,11 @@ export const DynamicTypeFieldFilterDateComponent = (props: DynamicTypeFieldFilte
 
             handleDateRangeChange(convertValueToISOFormat(newFrom), convertValueToISOFormat(newTo))
           } }
+          onOpenChange={ (open: boolean) => {
+            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()) }
       />

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<string[]>(data as string[])
+  const selectRef = useRef<any>(null)
 
   const config: IAssetSelectConfig | IObjectSelectConfig = rawConfig
   let formattedOptions: DefaultOptionType[] = []
@@ -55,7 +56,13 @@ export const DynamicTypeFieldFilterMultiselectComponent = (): React.JSX.Element
     <Select
       mode="multiple"
       onChange={ handleChange }
+      onDropdownVisibleChange={ (open: boolean) => {
+        if (!open && selectRef.current !== null) {
+          selectRef.current.focus()
+        }
+      } }
       options={ formattedOptions }
+      ref={ selectRef }
       showSearch={ rawConfig?.showSearch ?? false }
       style={ { width: '100%' } }
       value={ _value }