some fixes around popover preventDefault

Talend · Dec 6, 2023 · 9604338 · 9604338
1 parent 33577af
commit 9604338
Show file tree

Hide file tree

Showing 3 changed files with 61 additions and 11 deletions.
diff --git a/packages/design-system/src/components/Popover/Popover.cy.tsx b/packages/design-system/src/components/Popover/Popover.cy.tsx
@@ -1,7 +1,9 @@
 /* eslint-disable testing-library/prefer-screen-queries */
 
 /* eslint-disable testing-library/await-async-queries */
-import { Popover, ButtonPrimary, CollapsiblePanel } from '../../';
+import { useState } from 'react';
+
+import { ButtonPrimary, CollapsiblePanel, Popover } from '../../';
 
 context('<Popover />', () => {
 	describe('default', () => {
@@ -11,7 +13,7 @@ context('<Popover />', () => {
 					data-testid="my.popover"
 					disclosure={<ButtonPrimary data-testid="my.button">Open popover</ButtonPrimary>}
 				>
-					Popover content
+					<p>Popover content</p>
 				</Popover>,
 			);
 
@@ -21,19 +23,16 @@ context('<Popover />', () => {
 			cy.findByTestId('my.popover').should('be.visible');
 		});
 
-		it('should prevent default', () => {
+		it('should prevent default without controlled state', () => {
 			cy.mount(
 				<CollapsiblePanel
 					title="panel"
 					metadata={[
 						<Popover
 							key="my.popover"
+							placement="left"
 							data-testid="my.popover"
-							disclosure={
-								<ButtonPrimary onClick={() => {}} data-testid="my.button">
-									Open popover
-								</ButtonPrimary>
-							}
+							disclosure={<ButtonPrimary data-testid="my.button">Open popover</ButtonPrimary>}
 						>
 							<p>Popover content</p>
 						</Popover>,
@@ -47,6 +46,51 @@ context('<Popover />', () => {
 			cy.findByTestId('panel.section').should('not.exist');
 			cy.findByTestId('my.button').click();
 			cy.findByTestId('panel.section').should('not.exist');
+			cy.findByTestId('my.popover').should('be.visible');
+		});
+
+		it('should prevent default with controlled state', () => {
+			const PopoverWithControlledState = () => {
+				const [open, setOpen] = useState(false);
+				return (
+					<CollapsiblePanel
+						title="panel"
+						metadata={[
+							<Popover
+								key="my.popover"
+								data-testid="my.popover"
+								placement="left"
+								open={open}
+								onOpenChange={setOpen}
+								disclosure={
+									<ButtonPrimary
+										onClick={event => {
+											event.preventDefault();
+											event.stopPropagation();
+											setOpen(!open);
+										}}
+										data-testid="my.button"
+									>
+										Open popover
+									</ButtonPrimary>
+								}
+							>
+								<p>Popover content</p>
+							</Popover>,
+						]}
+					>
+						Some text
+					</CollapsiblePanel>
+				);
+			};
+
+			cy.mount(<PopoverWithControlledState />);
+
+			// Disclosure onClick should stop propagation and not open the CollapsiblePanel container
+			cy.findByTestId('panel.section').should('not.exist');
+			cy.findByTestId('my.button').click();
+			cy.findByTestId('panel.section').should('not.exist');
+			cy.findByTestId('my.popover').should('be.visible');
 		});
 	});
 });
diff --git a/packages/design-system/src/components/Popover/Popover.tsx b/packages/design-system/src/components/Popover/Popover.tsx
@@ -1,5 +1,5 @@
 import React, { Fragment, useRef } from 'react';
-import type { ReactNode } from 'react';
+import type { MouseEvent, ReactNode } from 'react';
 
 import { FloatingArrow, FloatingPortal, Placement } from '@floating-ui/react';
 import classNames from 'classnames';
@@ -44,10 +44,14 @@ export function Popover({
 	const popover = usePopover({ modal, arrowRef, ...restOptions });
 
 	const Wrapper = isFixed ? FloatingPortal : Fragment;
+	const onClick = (e: MouseEvent<HTMLElement>) => {
+		e.preventDefault();
+		e.stopPropagation();
+	};
 
-	let childrenProps = popover.getReferenceProps();
+	let childrenProps = popover.getReferenceProps({ onClick });
 	if (disclosure && React.isValidElement(disclosure)) {
-		childrenProps = popover.getReferenceProps(disclosure.props);
+		childrenProps = popover.getReferenceProps({ onClick, ...disclosure.props });
 	}
 
 	return (

diff --git a/packages/faceted-search/src/components/Badges/BadgeOperator/BadgeOperator.module.scss b/packages/faceted-search/src/components/Badges/BadgeOperator/BadgeOperator.module.scss
@@ -27,6 +27,8 @@ $circle-size-small: 1.8rem !default;
 			> span {
 				border-bottom: none !important;
 				padding: 0 $padding-smaller;
+				align-items: center;
+				display: flex;
 			}
 		}
 	}