diff --git a/packages/main/src/components/AnalyticalTable/defaults/Column/ColumnHeaderModal.tsx b/packages/main/src/components/AnalyticalTable/defaults/Column/ColumnHeaderModal.tsx index da927e21a6a..972ff1f7796 100644 --- a/packages/main/src/components/AnalyticalTable/defaults/Column/ColumnHeaderModal.tsx +++ b/packages/main/src/components/AnalyticalTable/defaults/Column/ColumnHeaderModal.tsx @@ -9,7 +9,7 @@ import iconGroup from '@ui5/webcomponents-icons/dist/group-2.js'; import iconSortAscending from '@ui5/webcomponents-icons/dist/sort-ascending.js'; import iconSortDescending from '@ui5/webcomponents-icons/dist/sort-descending.js'; import { enrichEventWithDetails, useI18nBundle } from '@ui5/webcomponents-react-base'; -import { useEffect, useMemo, useRef } from 'react'; +import { useEffect, useId, useMemo, useRef } from 'react'; import { FlexBoxAlignItems } from '../../../../enums/FlexBoxAlignItems.js'; import { TextAlign } from '../../../../enums/TextAlign.js'; import { @@ -31,12 +31,14 @@ import { Popover } from '../../../../webComponents/Popover/index.js'; import { Text } from '../../../../webComponents/Text/index.js'; import { FlexBox } from '../../../FlexBox/index.js'; import type { TableInstanceWithPopoverProps } from '../../types/index.js'; +import { RenderColumnTypes } from '../../types/index.js'; export const ColumnHeaderModal = (instance: TableInstanceWithPopoverProps) => { const { setOpen, openerRef } = instance.popoverProps; const { column, state, webComponentsReactProperties } = instance; const { isRtl, groupBy } = state; const { onGroup, onSort, classes: classNames } = webComponentsReactProperties; + const uniqueId = useId(); const showFilter = column.canFilter; const showGroup = column.canGroupBy; @@ -44,7 +46,6 @@ export const ColumnHeaderModal = (instance: TableInstanceWithPopoverProps) => { const ref = useRef(null); const listRef = useRef(null); - const { Filter } = column; const i18nBundle = useI18nBundle('@ui5/webcomponents-react'); @@ -231,10 +232,14 @@ export const ColumnHeaderModal = (instance: TableInstanceWithPopoverProps) => { style={{ fontSize: filterStyles.fontSize }} + id={`${uniqueId}-filter-text`} > {filterText} - + {column.render(RenderColumnTypes.Filter, { + accessibleNameRef: `${uniqueId}-filter-text`, + popoverRef: ref + })} )} diff --git a/packages/main/src/components/AnalyticalTable/defaults/FilterComponent/index.tsx b/packages/main/src/components/AnalyticalTable/defaults/FilterComponent/index.tsx index 73a8a9a8dd2..389733b5db1 100644 --- a/packages/main/src/components/AnalyticalTable/defaults/FilterComponent/index.tsx +++ b/packages/main/src/components/AnalyticalTable/defaults/FilterComponent/index.tsx @@ -4,7 +4,7 @@ import type { InputPropTypes } from '../../../../webComponents/Input/index.js'; import { Input } from '../../../../webComponents/Input/index.js'; import type { FilterProps } from '../../types/index.js'; -export const DefaultFilterComponent = ({ column }: FilterProps) => { +export const DefaultFilterComponent = ({ column, accessibleNameRef }: FilterProps) => { const handleInput: InputPropTypes['onInput'] = useCallback( (e) => { // Setting the filter to `undefined` removes it @@ -19,7 +19,15 @@ export const DefaultFilterComponent = ({ column }: FilterProps) => { } }; - return ; + return ( + + ); }; DefaultFilterComponent.displayName = 'DefaultFilterComponent'; diff --git a/packages/main/src/components/AnalyticalTable/types/index.ts b/packages/main/src/components/AnalyticalTable/types/index.ts index a5b3a1f18e2..52283dc71b0 100644 --- a/packages/main/src/components/AnalyticalTable/types/index.ts +++ b/packages/main/src/components/AnalyticalTable/types/index.ts @@ -1,6 +1,15 @@ import type { ScrollToOptions } from '@tanstack/react-virtual'; import type ValueState from '@ui5/webcomponents-base/dist/types/ValueState.js'; -import type { ComponentType, DependencyList, Dispatch, MutableRefObject, ReactNode, Ref, SetStateAction } from 'react'; +import type { + ComponentType, + DependencyList, + Dispatch, + MutableRefObject, + ReactNode, + Ref, + RefObject, + SetStateAction +} from 'react'; import type { AnalyticalTablePopinDisplay, AnalyticalTableScaleWidthMode, @@ -341,7 +350,14 @@ export interface TableInstanceWithPopoverProps extends TableInstance { export interface FilterProps { column: ColumnType; - popoverRef: MutableRefObject; + /** + * `Popover` DOM RefObject + */ + popoverRef: RefObject; + /** + * `accessibleNameRef` for filter `Input` + */ + accessibleNameRef: string; } export interface AnalyticalTableColumnDefinition {