Popover: smoothly reposition on scroll (#18813)

* wip * wip2 * simplify * fix focus issue * Adjust snapshots * Fix CSS * Adjust more CSS * Fix is-mobile issue and restore IsolatedEventContainer * Add useEffect dependencies * Address feedback * Fix content size calc * Unset content width/height if none is provided
WordPress · Dec 4, 2019 · a2d0227 · a2d0227
1 parent d0085ea
commit a2d0227
Show file tree

Hide file tree

Showing 10 changed files with 182 additions and 351 deletions.
diff --git a/packages/block-editor/src/components/link-control/test/__snapshots__/index.js.snap b/packages/block-editor/src/components/link-control/test/__snapshots__/index.js.snap
@@ -1,3 +1,3 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`Basic rendering should display with required props 1`] = `"<span><div tabindex=\\"-1\\"><div><div><div class=\\"components-popover block-editor-link-control is-bottom is-center components-animate__appear is-from-top\\" style=\\"\\"><div class=\\"components-popover__content\\" tabindex=\\"-1\\"><div class=\\"block-editor-link-control__popover-inner\\"><div class=\\"block-editor-link-control__search\\"><form><div class=\\"components-base-control editor-url-input block-editor-url-input block-editor-link-control__search-input\\"><div class=\\"components-base-control__field\\"><input type=\\"text\\" aria-label=\\"URL\\" required=\\"\\" placeholder=\\"Search or type url\\" role=\\"combobox\\" aria-expanded=\\"false\\" aria-autocomplete=\\"list\\" aria-owns=\\"block-editor-url-input-suggestions-0\\" value=\\"\\"></div></div><button type=\\"reset\\" disabled=\\"\\" aria-label=\\"Reset\\" class=\\"components-button components-icon-button block-editor-link-control__search-reset\\"><svg aria-hidden=\\"true\\" role=\\"img\\" focusable=\\"false\\" class=\\"dashicon dashicons-no-alt\\" xmlns=\\"http://www.w3.org/2000/svg\\" width=\\"20\\" height=\\"20\\" viewBox=\\"0 0 20 20\\"><path d=\\"M14.95 6.46L11.41 10l3.54 3.54-1.41 1.41L10 11.42l-3.53 3.53-1.42-1.42L8.58 10 5.05 6.47l1.42-1.42L10 8.58l3.54-3.53z\\"></path></svg></button></form></div></div></div></div></div></div></div></span>"`;
+exports[`Basic rendering should display with required props 1`] = `"<span><div tabindex=\\"-1\\"><div><div><div class=\\"components-popover block-editor-link-control components-animate__appear is-from-top is-from-center\\" data-x-axis=\\"center\\" data-y-axis=\\"bottom\\" style=\\"top: 0px; left: 0px;\\"><div class=\\"components-popover__content\\" tabindex=\\"-1\\"><div class=\\"block-editor-link-control__popover-inner\\"><div class=\\"block-editor-link-control__search\\"><form><div class=\\"components-base-control editor-url-input block-editor-url-input block-editor-link-control__search-input\\"><div class=\\"components-base-control__field\\"><input type=\\"text\\" aria-label=\\"URL\\" required=\\"\\" placeholder=\\"Search or type url\\" role=\\"combobox\\" aria-expanded=\\"false\\" aria-autocomplete=\\"list\\" aria-owns=\\"block-editor-url-input-suggestions-0\\" value=\\"\\"></div></div><button type=\\"reset\\" disabled=\\"\\" aria-label=\\"Reset\\" class=\\"components-button components-icon-button block-editor-link-control__search-reset\\"><svg aria-hidden=\\"true\\" role=\\"img\\" focusable=\\"false\\" class=\\"dashicon dashicons-no-alt\\" xmlns=\\"http://www.w3.org/2000/svg\\" width=\\"20\\" height=\\"20\\" viewBox=\\"0 0 20 20\\"><path d=\\"M14.95 6.46L11.41 10l3.54 3.54-1.41 1.41L10 11.42l-3.53 3.53-1.42-1.42L8.58 10 5.05 6.47l1.42-1.42L10 8.58l3.54-3.53z\\"></path></svg></button></form></div></div></div></div></div></div></div></span>"`;
diff --git a/packages/components/src/isolated-event-container/index.js b/packages/components/src/isolated-event-container/index.js
@@ -1,35 +1,24 @@
 /**
  * WordPress dependencies
  */
-import { Component } from '@wordpress/element';
+import { forwardRef } from '@wordpress/element';
 
-class IsolatedEventContainer extends Component {
-	constructor( props ) {
-		super( props );
-
-		this.stopEventPropagationOutsideContainer = this.stopEventPropagationOutsideContainer.bind( this );
-	}
-
-	stopEventPropagationOutsideContainer( event ) {
-		event.stopPropagation();
-	}
-
-	render() {
-		const { children, ... props } = this.props;
-
-		// Disable reason: this stops certain events from propagating outside of the component.
-		//   - onMouseDown is disabled as this can cause interactions with other DOM elements
-		/* eslint-disable jsx-a11y/no-static-element-interactions */
-		return (
-			<div
-				{ ... props }
-				onMouseDown={ this.stopEventPropagationOutsideContainer }
-			>
-				{ children }
-			</div>
-		);
-		/* eslint-enable jsx-a11y/no-static-element-interactions */
-	}
+function stopPropagation( event ) {
+	event.stopPropagation();
 }
 
-export default IsolatedEventContainer;
+export default forwardRef( ( { children, ...props }, ref ) => {
+	// Disable reason: this stops certain events from propagating outside of the component.
+	//   - onMouseDown is disabled as this can cause interactions with other DOM elements
+	/* eslint-disable jsx-a11y/no-static-element-interactions */
+	return (
+		<div
+			{ ...props }
+			ref={ ref }
+			onMouseDown={ stopPropagation }
+		>
+			{ children }
+		</div>
+	);
+	/* eslint-enable jsx-a11y/no-static-element-interactions */
+} );