diff --git a/openmetadata-ui/src/main/resources/ui/playwright/e2e/Features/ActivityFeed.spec.ts b/openmetadata-ui/src/main/resources/ui/playwright/e2e/Features/ActivityFeed.spec.ts index eac4b010b3a..62b284c533a 100644 --- a/openmetadata-ui/src/main/resources/ui/playwright/e2e/Features/ActivityFeed.spec.ts +++ b/openmetadata-ui/src/main/resources/ui/playwright/e2e/Features/ActivityFeed.spec.ts @@ -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, diff --git a/openmetadata-ui/src/main/resources/ui/src/components/ActivityFeed/FeedEditor/FeedEditor.tsx b/openmetadata-ui/src/main/resources/ui/src/components/ActivityFeed/FeedEditor/FeedEditor.tsx index 81e91ad5393..84b24f884e7 100644 --- a/openmetadata-ui/src/main/resources/ui/src/components/ActivityFeed/FeedEditor/FeedEditor.tsx +++ b/openmetadata-ui/src/main/resources/ui/src/components/ActivityFeed/FeedEditor/FeedEditor.tsx @@ -90,6 +90,31 @@ export const FeedEditor = forwardRef( 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,