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

* handle outside click for emoji feed editor

* added  test

* address pr comments

* address pr comments

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,

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

@@ -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,