Popover: Refactor popover to clarify computations #6799

youknowriad · 2018-05-17T12:29:46Z

and support setting max-width/max-height depending on the available space

This will fix the issues we have where popovers are cut over the edges of the browser window by adapting the height/width of the popovers.

Still having trouble with a z-index issue at the moment.

closes #4519, #6026, #6026, #4949, #5276, #6504,

… max-width/max-height depending on the available space

jorgefilipecosta · 2018-05-17T15:00:59Z

components/popover/index.js

+		if ( event.type === 'scroll' && this.nodes.content.contains( event.target ) ) {
+			return;
+		}
+		this.rafHandle = window.requestAnimationFrame( () => this.computePopoverPosition() );


Minor: maybe we should save the id returned by requestAnimationFrame and invoke window.cancelAnimationFrame() when unMounting if we have a valid id to cancel.

It's already the case I believe

jorgefilipecosta · 2018-05-17T15:23:17Z

components/popover/index.js

-			forcedXAxis || xAxis,
-		];
+		if (
+			! this.state.popoverLeft ||


I'm not understanding why we have the condition ! this.state.popoverLeftshouldn't this case be covered by this.state.popoverLeft !== popoverLeft? I think I'm missing something.

Yes, it's a leftover :)

jorgefilipecosta · 2018-05-17T15:25:33Z

Automatic test cases need an update, but manually testing things are looking good and I did not notice any problem in my initial tests :)

youknowriad · 2018-05-17T15:33:56Z

I fixed the tests, extracted the computing to an utility to ease unit-testing. I'm adding a design feedback. I think this improves things above popovers. It's not solving everything but it's a good improvement I think.

youknowriad · 2018-05-22T14:18:42Z

components/popover/index.js

 		this.toggleWindowEvents( true );
-		this.focus();
+		setTimeout( () => this.focus() );


I'd love to get rid of this timeout but for some mysterious reason, it's not working properly without it.

Try removing the timeout

Open the inserter

The search input is not focused.

I tried debugging and for some reason the call to input.focus() is not focusing the input (console logging the document.actiiveElement.

I tried to debug, and I did not find a good solution to this, It looks like although the parent component was mounted the child is not right away in a state that we can focus, this discussion seems related https://stackoverflow.com/questions/35522220/react-ref-with-focus-doesnt-work-without-settimeout-my-example.

What complicates, even more, the things is that if we use withSafeTimeout, we create the z-index bug ( i tested it again).

Maybe we can move the setTimeout inside the focus function so inside the timeout we don't reference this, props, etc.. we reference the dom node something like:

const focusNode = ( domNode ) => setTimeout( () => domNode.focus() ); const domNode = this.contentNode.current; // Find first tabbable node within content and shift focus, falling // back to the popover panel itself. const firstTabbable = focus.tabbable.find( domNode )[ 0 ]; focusNode( firstTabbable ? firstTabbable : domNode );

I don't expect this to create any issue regarding "this" because it's during mounting but even though, I like your proposal let's move it to focus and add a comment.

Maybe we can also add a comment specifying why we are using a set timeout, and why withSafeTimeout was not possible to use.

youknowriad · 2018-05-22T15:47:00Z

I think we get this in as it solves a lot of issues. thoughts @jorgefilipecosta

jorgefilipecosta · 2018-05-22T22:25:40Z

editor/components/rich-text/index.js

@@ -794,7 +794,7 @@ export class RichText extends Component {
 	changeFormats( formats ) {
 		forEach( formats, ( formatValue, format ) => {
 			if ( format === 'link' ) {
-				if ( formatValue !== undefined ) {
+				if ( !! formatValue ) {


I'm not understanding the relation of this changes in RichText with the changes in popover. Is it because of the link component? Without this changes we cause an unexpected bahaviour or they are just code improvement?

The relation is indirect. There's a bug in master where if you click "Escape" on a newly created link (empty), the modal is not closed. This change ensures the modal is closed when you do so.

The reason it's in this PR is that the popover change makes the e2e test fail while it's not failing in master (false positive). I'm not certain I understand exactly why it's not failing in master tests because, in my manual testing, it's not working properly.

Thank you for the clarification, e2e tests on our CI sometimes pass when they should fail. For example in #6877 I added a test case that should fail because the fix was not yet merged, running tests in my computer the test fails all the time, but in our CI it is reported as passing, not certain why.

jorgefilipecosta · 2018-05-22T22:41:10Z

components/popover/test/utils.js

+		expect( computePopoverPosition( anchorRect, contentSize, 'top right' ) ).toEqual( {
+			contentHeight: null,
+			contentWidth: null,
+			isMobile: false,


All the test cases test the non-mobile case should we add a mobile test case?

Yep, good catch it was less important but I'll see if I can tweak the window size.

jorgefilipecosta · 2018-05-22T22:43:29Z

components/popover/utils.js

+	};
+	const bottomAlignment = {
+		popoverTop: anchorRect.bottom,
+		contentHeight: anchorRect.bottom + HEIGHT_OFFSET + height > window.innerHeight ? window.innerHeight - HEIGHT_OFFSET - anchorRect.bottom : height,


Maybe window.innerHeight, and window.innerWidth can be parameters with default values to the window properties. I think it may simplify the addition of test cases in the future.

jorgefilipecosta · 2018-05-22T23:13:40Z

components/popover/utils.js

+	// Choosing the x axis
+	let chosenXAxis;
+	let contentWidth = null;
+	if ( xAxis === 'center' && centerAlignment.contentWidth === width ) {


Minor: Maybe we can use a switch.

On the switches we would do:

case 'center': chosenXAxis = centerAlignment.contentWidth === width ? 'center' : undefined;

After the switch, we would check if chosenXAxis was undefined if yes we would use our last else. It is just a personal preference normally I prefer switches instead of a series of else.

It may also make sense to extract some parts of the function into smaller ones e.g: one part that deals with the x and other that deals with y, just to make computePopoverPosition smaller :)

I don't like the switch in this case personally, I like "dumb" code :P but I like the splitting proposal which I did.

jorgefilipecosta

Excellent work on this refactor. Testing the popover it looks like a big improvement. 👍
There is some debugging that could be made like understand why withSafeTimeout interferes with z-index if time allows in the future. But given the number of issues closed and the noticeable improvements for the user that we have I feel we should get it in soon so we can test it more before the next release.

aduth · 2018-06-25T15:30:33Z

components/popover/index.js

 			return;
 		}

+		// Without the setTimeout, the dom node is not being focused
+		// Related https://stackoverflow.com/questions/35522220/react-ref-with-focus-doesnt-work-without-settimeout-my-example
+		const focusNode = ( domNode ) => setTimeout( () => domNode.focus() );


Where are we canceling this timeout if the component is unmounted? Why aren't we using withSafeTimeout ?

I did use withSafeTimeout originally but It breaks the design in a super weird way. (see 66b3444) The usage of the higher order component even if it's not doing anything to the DOM was creating some weird z-index issues, especially visible on mobile.

What about:

Where are we canceling this timeout if the component is unmounted?

This is already done in master

aduth · 2018-07-30T15:40:31Z

components/popover/index.js

 			return;
 		}

+		// Without the setTimeout, the dom node is not being focused


This is treating the symptom, not the cause, and the comment reads as such.

The real cause is a combination of:

When initially mounted, the popover doesn't have a Slot context in which to render. When this becomes available, it re-renders the content into the slot (an unmount and remount operation).

When initially mounted, the container has a style of visibility: hidden, so focusing would not select the container.

See also: #8218

aduth · 2018-07-30T18:04:38Z

components/popover/index.js

@@ -100,27 +96,22 @@ class Popover extends Component {
 			return;
 		}

-		const { content } = this.nodes;
-		if ( ! content ) {
+		if ( ! this.contentNode.current ) {


Related to earlier comment, we shouldn't need to check this here. If the component causes Popover#focus to be called during its componentDidMount, we should be able to assume that the ref.current is assigned.

aduth · 2018-11-02T17:54:10Z

components/popover/index.js

+	}
+
+	throttledComputePopoverPosition( event ) {
+		if ( event.type === 'scroll' && this.contentNode.current.contains( event.target ) ) {


It took me more than a minute to grasp why this condition is here. It seems obvious in retrospect, but a comment would have been nice.

youknowriad added 2 commits May 17, 2018 13:27

Popover: Refactor popover to clarify computations and support setting…

3a34c44

… max-width/max-height depending on the available space

Fix popover z-index

66b3444

jorgefilipecosta reviewed May 17, 2018

View reviewed changes

Adding unit tests

05e8db6

youknowriad added 2 commits May 17, 2018 16:27

Fix inserter popover

63cf64c

Remove useless check

a445099

youknowriad self-assigned this May 17, 2018

youknowriad added the Needs Design Feedback Needs general design feedback. label May 17, 2018

Fix e2e tests

5884da6

youknowriad force-pushed the update/popover-maxwidth-height branch from 8532bad to 5884da6 Compare May 22, 2018 13:37

Fix unit tests

2e1f8d3

youknowriad commented May 22, 2018

View reviewed changes

youknowriad added 2 commits May 22, 2018 16:51

All the popovers should show up above the UI

8788478

Leave more space for the arrow

9ad4297

jorgefilipecosta reviewed May 22, 2018

View reviewed changes

jorgefilipecosta approved these changes May 23, 2018

View reviewed changes

youknowriad added 2 commits May 23, 2018 09:32

Set timeout moved to the focus handler

a96d4cd

Split the popover utility to smaller functions and test the mobile case

3e1d6be

youknowriad merged commit c8f8806 into master May 23, 2018

youknowriad deleted the update/popover-maxwidth-height branch May 23, 2018 09:27

mtias added this to the 3.0 milestone Jun 4, 2018

aduth reviewed Jun 25, 2018

View reviewed changes

aduth reviewed Jul 30, 2018

View reviewed changes

aduth reviewed Nov 2, 2018

View reviewed changes

aduth mentioned this pull request Nov 2, 2018

Components: Improve Popover computations #11430

Closed

4 tasks

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Popover: Refactor popover to clarify computations #6799

Popover: Refactor popover to clarify computations #6799

youknowriad commented May 17, 2018 •

edited

Loading

jorgefilipecosta May 17, 2018

youknowriad May 17, 2018

jorgefilipecosta May 17, 2018

youknowriad May 17, 2018

jorgefilipecosta commented May 17, 2018

youknowriad commented May 17, 2018

youknowriad May 22, 2018

jorgefilipecosta May 22, 2018

youknowriad May 22, 2018 •

edited

Loading

jorgefilipecosta May 23, 2018

youknowriad commented May 22, 2018

jorgefilipecosta May 22, 2018

youknowriad May 22, 2018

jorgefilipecosta May 23, 2018

jorgefilipecosta May 22, 2018

youknowriad May 23, 2018

jorgefilipecosta May 22, 2018

jorgefilipecosta May 22, 2018

youknowriad May 23, 2018

jorgefilipecosta left a comment

aduth Jun 25, 2018

youknowriad Jun 25, 2018

aduth Jul 9, 2018

youknowriad Nov 5, 2018

aduth Jul 30, 2018

aduth Jul 30, 2018

aduth Jul 30, 2018

aduth Nov 2, 2018

Popover: Refactor popover to clarify computations #6799

Popover: Refactor popover to clarify computations #6799

Conversation

youknowriad commented May 17, 2018 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

jorgefilipecosta commented May 17, 2018

youknowriad commented May 17, 2018

Choose a reason for hiding this comment

Choose a reason for hiding this comment

youknowriad May 22, 2018 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

youknowriad commented May 22, 2018

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

jorgefilipecosta left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

youknowriad commented May 17, 2018 •

edited

Loading

youknowriad May 22, 2018 •

edited

Loading