Skip to content

Commit 25be46d

Browse files
authored
fix(AnalyticalTable): trap focus inside column header popover while open (#5827)
Fixes #5821
1 parent a08972d commit 25be46d

File tree

2 files changed

+19
-13
lines changed

2 files changed

+19
-13
lines changed

packages/main/src/components/AnalyticalTable/ColumnHeader/ColumnHeaderModal.tsx

Lines changed: 11 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -157,17 +157,9 @@ export const ColumnHeaderModal = (props: ColumnHeaderModalProperties) => {
157157

158158
useEffect(() => {
159159
if (open && ref.current && openerRef.current) {
160-
customElements
161-
.whenDefined(getUi5TagWithSuffix('ui5-popover'))
162-
.then(() => {
163-
ref.current.opener = openerRef.current;
164-
if (canRenderPortal && open) {
165-
ref.current.showAt(openerRef.current);
166-
}
167-
})
168-
.catch(() => {
169-
// silently catch
170-
});
160+
void customElements.whenDefined(getUi5TagWithSuffix('ui5-popover')).then(() => {
161+
ref.current.opener = openerRef.current;
162+
});
171163
}
172164
}, [open, canRenderPortal]);
173165

@@ -177,6 +169,7 @@ export const ColumnHeaderModal = (props: ColumnHeaderModalProperties) => {
177169

178170
return createPortal(
179171
<Popover
172+
open={open}
180173
hideArrow
181174
horizontalAlign={horizontalAlign}
182175
placementType={PopoverPlacementType.Bottom}
@@ -185,8 +178,14 @@ export const ColumnHeaderModal = (props: ColumnHeaderModalProperties) => {
185178
onClick={stopPropagation}
186179
onAfterClose={onAfterClose}
187180
onAfterOpen={onAfterOpen}
181+
data-component-name="ATHeaderPopover"
188182
>
189-
<List onItemClick={handleSort} ref={listRef} onKeyDown={handleListKeyDown}>
183+
<List
184+
onItemClick={handleSort}
185+
ref={listRef}
186+
onKeyDown={handleListKeyDown}
187+
data-component-name="ATHeaderPopoverList"
188+
>
190189
{isSortedAscending && (
191190
<StandardListItem type={ListItemType.Active} icon={iconDecline} data-sort="clear">
192191
{clearSortingText}

packages/main/src/components/AnalyticalTable/hooks/useKeyboardNavigation.ts

Lines changed: 8 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -97,7 +97,14 @@ const useGetTableProps = (tableProps, { instance: { webComponentsReactProperties
9797

9898
const onTableFocus = useCallback(
9999
(e) => {
100-
if (e.target.dataset?.emptyRowCell === 'true' || e.target.dataset.subcomponentActiveElement) {
100+
const { dataset } = e.target;
101+
if (
102+
dataset.emptyRowCell === 'true' ||
103+
dataset.subcomponentActiveElement ||
104+
// todo: with the new popover API of ui5wc this might not be necessary anymore
105+
dataset.componentName === 'ATHeaderPopoverList' ||
106+
dataset.componentName === 'ATHeaderPopover'
107+
) {
101108
return;
102109
}
103110
if (e.target.dataset.subcomponent) {

0 commit comments

Comments
 (0)