Skip to content

fix(ui): fix UserTeamSelectableList closing when clicking inside popover in modal #26502

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
anuj-kumary merged 1 commit into from
Mar 16, 2026
Merged

fix(ui): fix UserTeamSelectableList closing when clicking inside popover in modal #26502

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
188 changes: 95 additions & 93 deletions ...rces/ui/src/components/common/UserTeamSelectableList/UserTeamSelectableList.component.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -96,7 +96,7 @@
}, [selectedUsers]);

const fetchUserOptions = async (searchText: string, after?: string) => {
const afterPage = isNaN(Number(after)) ? 1 : Number(after);

Check warning on line 99 in openmetadata-ui/src/main/resources/ui/src/components/common/UserTeamSelectableList/UserTeamSelectableList.component.tsx

View check run for this annotation

SonarQubeCloud / [open-metadata-ui] SonarCloud Code Analysis

Prefer `Number.isNaN` over `isNaN`. 


See more on https://sonarcloud.io/project/issues?id=open-metadata-ui&issues=AZz1A2g3WT_PiSiGRECe&open=AZz1A2g3WT_PiSiGRECe&pullRequest=26502
try {
const res = await searchQuery({
query: searchText,
Expand All @@ -121,13 +121,13 @@
after: toString(afterPage + 1),
},
};
} catch (error) {
return { data: [], paging: { total: 0 } };
}

Check warning on line 126 in openmetadata-ui/src/main/resources/ui/src/components/common/UserTeamSelectableList/UserTeamSelectableList.component.tsx

View check run for this annotation

SonarQubeCloud / [open-metadata-ui] SonarCloud Code Analysis

Handle this exception or don't catch it at all. 


See more on https://sonarcloud.io/project/issues?id=open-metadata-ui&issues=AZz1A2g3WT_PiSiGRECf&open=AZz1A2g3WT_PiSiGRECf&pullRequest=26502
};

const fetchTeamOptions = async (searchText: string, after?: string) => {
const afterPage = isNaN(Number(after)) ? 1 : Number(after);

Check warning on line 130 in openmetadata-ui/src/main/resources/ui/src/components/common/UserTeamSelectableList/UserTeamSelectableList.component.tsx

View check run for this annotation

SonarQubeCloud / [open-metadata-ui] SonarCloud Code Analysis

Prefer `Number.isNaN` over `isNaN`. 


See more on https://sonarcloud.io/project/issues?id=open-metadata-ui&issues=AZz1A2g3WT_PiSiGRECg&open=AZz1A2g3WT_PiSiGRECg&pullRequest=26502

try {
const res = await searchQuery({
Expand Down Expand Up @@ -156,9 +156,9 @@
after: toString(afterPage + 1),
},
};
} catch (error) {
return { data: [], paging: { total: 0 } };
}

Check warning on line 161 in openmetadata-ui/src/main/resources/ui/src/components/common/UserTeamSelectableList/UserTeamSelectableList.component.tsx

View check run for this annotation

SonarQubeCloud / [open-metadata-ui] SonarCloud Code Analysis

Handle this exception or don't catch it at all. 


See more on https://sonarcloud.io/project/issues?id=open-metadata-ui&issues=AZz1A2g3WT_PiSiGRECh&open=AZz1A2g3WT_PiSiGRECh&pullRequest=26502
};

const getOwnerItemBasedOnTab = (updateItems: EntityReference[]) => {
Expand Down Expand Up @@ -250,8 +250,8 @@
const onRemove = (id: string) => {
setSelectedUsers((prevUsers) => {
const removedUser = prevUsers.find((user) => user.id === id);
const isTeamId = removedUser && removedUser.type === 'team';

Check warning on line 253 in openmetadata-ui/src/main/resources/ui/src/components/common/UserTeamSelectableList/UserTeamSelectableList.component.tsx

View check run for this annotation

SonarQubeCloud / [open-metadata-ui] SonarCloud Code Analysis

Prefer using an optional chain expression instead, as it's more concise and easier to read. 


See more on https://sonarcloud.io/project/issues?id=open-metadata-ui&issues=AZz1A2g3WT_PiSiGRECi&open=AZz1A2g3WT_PiSiGRECi&pullRequest=26502
const isUserId = removedUser && removedUser.type === 'user';

Check warning on line 254 in openmetadata-ui/src/main/resources/ui/src/components/common/UserTeamSelectableList/UserTeamSelectableList.component.tsx

View check run for this annotation

SonarQubeCloud / [open-metadata-ui] SonarCloud Code Analysis

Prefer using an optional chain expression instead, as it's more concise and easier to read. 


See more on https://sonarcloud.io/project/issues?id=open-metadata-ui&issues=AZz1A2g3WT_PiSiGRECj&open=AZz1A2g3WT_PiSiGRECj&pullRequest=26502

const updatedUsers = prevUsers.filter((user) => user.id !== id);

Expand Down Expand Up @@ -288,100 +288,102 @@
<Popover
destroyTooltipOnHide
content={
<FocusTrapWithContainer active={popoverProps?.open || false}>
{previewSelected && (
<Space
className="user-team-popover-header w-full p-x-sm p-y-md"
direction="vertical"
size={8}>
<Typography.Text className="text-grey-muted">
{t('label.selected-entity', {
entity: label ?? t('label.owner-plural'),
})}
</Typography.Text>
<div className="user-team-popover-header-content">
{selectedUsers.map((user) => {
return (
<UserTag
closable
avatarType="outlined"
className="user-team-pills"
id={user.name ?? ''}
isTeam={user.type === EntityType.TEAM}
key={user.id}
name={getEntityName(user)}
size={UserTagSize.small}
onRemove={() => onRemove(user.id)}
<div data-react-aria-top-layer>
<FocusTrapWithContainer active={popoverProps?.open || false}>
{previewSelected && (
<Space
className="user-team-popover-header w-full p-x-sm p-y-md"
direction="vertical"
size={8}>
<Typography.Text className="text-grey-muted">
{t('label.selected-entity', {
entity: label ?? t('label.owner-plural'),
})}
</Typography.Text>
<div className="user-team-popover-header-content">
{selectedUsers.map((user) => {
return (
<UserTag
closable
avatarType="outlined"
className="user-team-pills"
id={user.name ?? ''}
isTeam={user.type === EntityType.TEAM}
key={user.id}
name={getEntityName(user)}
size={UserTagSize.small}
onRemove={() => onRemove(user.id)}
/>
);
})}
</div>
</Space>
)}
<Tabs
centered
activeKey={activeTab}
className="select-owner-tabs"
data-testid="select-owner-tabs"
destroyInactiveTabPane={false}
items={[
{
label: (
<>
{t('label.team-plural')}{' '}
{getCountBadge(count.team, '', activeTab === 'teams')}
</>
),
key: 'teams',
children: (
<SelectableList
customTagRenderer={TeamListItemRenderer}
fetchOptions={fetchTeamOptions}
height={listHeight}
multiSelect={isMultiTeam}
searchBarDataTestId="owner-select-teams-search-bar"
searchPlaceholder={t('label.search-for-type', {
type: t('label.team'),
})}
selectedItems={defaultTeams}
onCancel={handleCancelSelectableList}
onChange={isMultiTeam ? handleChange : noop}
onUpdate={handleUpdate}
/>
);
})}
</div>
</Space>
)}
<Tabs
centered
activeKey={activeTab}
className="select-owner-tabs"
data-testid="select-owner-tabs"
destroyInactiveTabPane={false}
items={[
{
label: (
<>
{t('label.team-plural')}{' '}
{getCountBadge(count.team, '', activeTab === 'teams')}
</>
),
key: 'teams',
children: (
<SelectableList
customTagRenderer={TeamListItemRenderer}
fetchOptions={fetchTeamOptions}
height={listHeight}
multiSelect={isMultiTeam}
searchBarDataTestId="owner-select-teams-search-bar"
searchPlaceholder={t('label.search-for-type', {
type: t('label.team'),
})}
selectedItems={defaultTeams}
onCancel={handleCancelSelectableList}
onChange={isMultiTeam ? handleChange : noop}
onUpdate={handleUpdate}
/>
),
},
{
label: (
<>
{t('label.user-plural')}
{getCountBadge(count.user, '', activeTab === 'users')}
</>
),
key: 'users',
children: (
<SelectableList
fetchOptions={fetchUserOptions}
height={listHeight}
multiSelect={isMultiUser}
searchBarDataTestId="owner-select-users-search-bar"
searchPlaceholder={t('label.search-for-type', {
type: t('label.user'),
})}
selectedItems={defaultUsers}
onCancel={handleCancelSelectableList}
onChange={isMultiUser ? handleChange : noop}
onUpdate={handleUpdate}
/>
),
},
]}
size="small"
onChange={(key: string) => setActiveTab(key as 'teams' | 'users')}
// Used div to stop click propagation event anywhere in the component to parent
// Users.component collapsible panel
onClick={(e) => e.stopPropagation()}
/>
</FocusTrapWithContainer>
),
},
{
label: (
<>
{t('label.user-plural')}
{getCountBadge(count.user, '', activeTab === 'users')}
</>
),
key: 'users',
children: (
<SelectableList
fetchOptions={fetchUserOptions}
height={listHeight}
multiSelect={isMultiUser}
searchBarDataTestId="owner-select-users-search-bar"
searchPlaceholder={t('label.search-for-type', {
type: t('label.user'),
})}
selectedItems={defaultUsers}
onCancel={handleCancelSelectableList}
onChange={isMultiUser ? handleChange : noop}
onUpdate={handleUpdate}
/>
),
},
]}
size="small"
onChange={(key: string) => setActiveTab(key as 'teams' | 'users')}
// Used div to stop click propagation event anywhere in the component to parent
// Users.component collapsible panel
onClick={(e) => e.stopPropagation()}
/>
</FocusTrapWithContainer>
</div>
}
open={popupVisible}
overlayClassName={classNames(
Expand All @@ -401,7 +403,7 @@
icon={<EditIcon color={DE_ACTIVE_COLOR} width="12px" />}
size="small"
title={
!popupVisible

Check warning on line 406 in openmetadata-ui/src/main/resources/ui/src/components/common/UserTeamSelectableList/UserTeamSelectableList.component.tsx

View check run for this annotation

SonarQubeCloud / [open-metadata-ui] SonarCloud Code Analysis

Unexpected negated condition. 


See more on https://sonarcloud.io/project/issues?id=open-metadata-ui&issues=AZz1A2g3WT_PiSiGRECk&open=AZz1A2g3WT_PiSiGRECk&pullRequest=26502
? tooltipText ??
t('label.edit-entity', {
entity: t('label.owner-plural'),
Expand Down
Loading