fix(dashboard): exit markdown edit mode when clicking outside of element (#35336)

(cherry picked from commit 553204e613)

superset-frontend/src/dashboard/components/menu/WithPopoverMenu.test.jsx

@@ -16,7 +16,7 @@
  * specific language governing permissions and limitations
  * under the License.
  */
-import { fireEvent, render } from 'spec/helpers/testing-library';
+import { render, userEvent } from 'spec/helpers/testing-library';
 
 import WithPopoverMenu from 'src/dashboard/components/menu/WithPopoverMenu';
 
@@ -44,40 +44,102 @@ test('should render the passed children', () => {
   expect(container.querySelector('#child')).toBeInTheDocument();
 });
 
-test('should focus on click in editMode', () => {
+test('should focus on click in editMode', async () => {
   const { container } = setup({ editMode: true });
-  fireEvent.click(container.querySelector('.with-popover-menu'));
+  await userEvent.click(container.querySelector('.with-popover-menu'));
   expect(
     container.querySelector('.with-popover-menu--focused'),
   ).toBeInTheDocument();
 });
 
-test('should render menuItems when focused', () => {
+test('should render menuItems when focused', async () => {
   const { container } = setup({ editMode: true });
   expect(container.querySelector('#menu1')).not.toBeInTheDocument();
   expect(container.querySelector('#menu2')).not.toBeInTheDocument();
 
-  fireEvent.click(container.querySelector('.with-popover-menu'));
+  await userEvent.click(container.querySelector('.with-popover-menu'));
   expect(container.querySelector('#menu1')).toBeInTheDocument();
   expect(container.querySelector('#menu2')).toBeInTheDocument();
 });
 
-test('should not focus when disableClick=true', () => {
+test('should not focus when disableClick=true', async () => {
   const { container } = setup({ disableClick: true, editMode: true });
 
-  fireEvent.click(container.querySelector('.with-popover-menu'));
+  await userEvent.click(container.querySelector('.with-popover-menu'));
   expect(
     container.querySelector('.with-popover-menu--focused'),
   ).not.toBeInTheDocument();
 });
 
-test('should use the passed shouldFocus func to determine if it should focus', () => {
+test('should use the passed shouldFocus func to determine if it should focus', async () => {
   const { container } = setup({ editMode: true, shouldFocus: () => false });
   expect(
     container.querySelector('.with-popover-menu--focused'),
   ).not.toBeInTheDocument();
-  fireEvent.click(container.querySelector('.with-popover-menu'));
+  await userEvent.click(container.querySelector('.with-popover-menu'));
   expect(
     container.querySelector('.with-popover-menu--focused'),
   ).not.toBeInTheDocument();
 });
+
+test('should allow event propagation to enable multiple components to work independently', async () => {
+  const onChangeFocus = jest.fn();
+
+  const { container } = setup({
+    editMode: true,
+    disableClick: false,
+    shouldFocus: () => true,
+    onChangeFocus,
+  });
+
+  const menuComponent = container.querySelector('.with-popover-menu');
+  await userEvent.click(menuComponent);
+
+  expect(onChangeFocus).toHaveBeenCalledWith(true);
+});
+
+test('should unfocus when another component is clicked', async () => {
+  const onChangeFocusA = jest.fn();
+  const onChangeFocusB = jest.fn();
+
+  const componentA = render(
+    <WithPopoverMenu
+      {...props}
+      editMode
+      shouldFocus={(event, container) => container?.contains(event.target)}
+      onChangeFocus={onChangeFocusA}
+    >
+      <div id="child-a" />
+    </WithPopoverMenu>,
+  );
+
+  const componentB = render(
+    <WithPopoverMenu
+      {...props}
+      editMode
+      shouldFocus={(event, container) => container?.contains(event.target)}
+      onChangeFocus={onChangeFocusB}
+    >
+      <div id="child-b" />
+    </WithPopoverMenu>,
+  );
+
+  const menuA = componentA.container.querySelector('.with-popover-menu');
+  const menuB = componentB.container.querySelector('.with-popover-menu');
+
+  await userEvent.click(menuA);
+  expect(onChangeFocusA).toHaveBeenCalledWith(true);
+  expect(
+    componentA.container.querySelector('.with-popover-menu--focused'),
+  ).toBeInTheDocument();
+
+  await userEvent.click(menuB);
+  expect(onChangeFocusB).toHaveBeenCalledWith(true);
+  expect(onChangeFocusA).toHaveBeenCalledWith(false);
+  expect(
+    componentA.container.querySelector('.with-popover-menu--focused'),
+  ).not.toBeInTheDocument();
+  expect(
+    componentB.container.querySelector('.with-popover-menu--focused'),
+  ).toBeInTheDocument();
+});