yujunjun/OpenMetadata
1
0
Fork 0
mirror of https://github.com/open-metadata/OpenMetadata.git synced 2025-08-18 05:57:17 +00:00
Code Issues Packages Projects Releases Wiki Activity

Fix(ui): Close emoji feed editor on outside click (#21696)

Browse Source 
* handle outside click for emoji feed editor

* added  test

* address pr comments

* address pr comments
This commit is contained in:
Shrushti Polekar 2025-06-12 23:14:02 +05:30 committed by GitHub
parent 074c2efa10
commit b72dff93b8
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 45 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

20
openmetadata-ui/src/main/resources/ui/playwright/e2e/Features/ActivityFeed.spec.ts
View File

@ -252,6 +252,26 @@ test.describe('Activity feed', () => {
).toContainText('Reply message');
});
test('Should be able to open and close emoji container in feed editor', async ({
page,
}) => {
await redirectToHomePage(page);
await visitOwnProfilePage(page);
await page.waitForLoadState('networkidle');
const commentInput = page.locator('[data-testid="comments-input-field"]');
commentInput.click();
await page.locator('.textarea-emoji-control').click();
await expect(page.locator('#textarea-emoji')).toBeVisible();
// Click on the main content area which is outside the emoji container
await page.locator('.center-container').click();
await expect(page.locator('#textarea-emoji')).not.toBeVisible();
});
test('Update Description Task on Columns', async ({ page }) => {
const firstTaskValue: TaskDetails = {
term: entity4.entity.displayName,

25
openmetadata-ui/src/main/resources/ui/src/components/ActivityFeed/FeedEditor/FeedEditor.tsx
View File

@ -90,6 +90,31 @@ export const FeedEditor = forwardRef<editorRef, FeedEditorProp>(
const { userProfilePics } = useApplicationStore();
const handleClickOutside = useCallback((event: MouseEvent) => {
const emojiContainer = document.querySelector(
'#om-quill-editor #textarea-emoji'
) as HTMLElement;
const emojiToggleButton = document.querySelector(
'#om-quill-editor .textarea-emoji-control.ql-list'
) as HTMLElement;
if (
emojiContainer &&
!emojiContainer.contains(event.target as Node) &&
emojiToggleButton &&
!emojiToggleButton.contains(event.target as Node)
) {
emojiToggleButton.click(); // Simulates a click to close the emoji container
}
}, []);
useEffect(() => {
document.addEventListener('mousedown', handleClickOutside);
return () => {
document.removeEventListener('mousedown', handleClickOutside);
};
}, [handleClickOutside]);
const userSuggestionRenderer = async (
searchTerm: string,
renderList: (matches: MentionSuggestionsItem[], search: string) => void,