Wp-calypso: Gutenboarding: click outside the domain picker to close

[razvanpapadopol]

Steps to reproduce

1. Starting at URL: https://wpcalypso.wordpress.com/new/design
2. Click _sitename.com is available_
3. See the overlay open. Click outside the overlay

What I expected

When clicking outside the overlay, I expect the overlay to close, just like clicking the X button would.

What happened instead

It didn't close when clicking outside the overlay.

[simison]

Could it be we need the latest version of @wordpress/components for it to work? 🤔

https://github.com/Automattic/wp-calypso/pull/39644

[yansern]

It seems that onClickOutside is deprecated. The new prop is called onFocusOutside.

https://github.com/WordPress/gutenberg/blob/master/packages/components/src/popover/index.js#L503-L509

[simison]

oh, we don’t list @wordpress/components in package.json as a dependency :sweat_smile:

Would be good to figure out which prop we need to use with the version we have (https://unpkg.com/ can be useful).

[yansern]

The issue is that the Popover element was never focused because of focusOnMount=false. Previously, I set focusOnMount=false because the popover was automatically focusing on the first element on the domain picker which is the close button.

If you click anywhere in the domain picker, then click outside again, it will close the popover.

The @wordpress/popover component uses higher-order/with-focus-outside HOC to detect whether the element was blurred. However, it does so by comparing against the previous activeElement. Since the domain picker was never in focus, that HOC doesn't trigger when focused outside. I think that HOC can be smarter, for one, it doesn't have to rely on activeElement.

But anyway, I think I can fix both this issue and the auto-focus issue in one PR since they are related.

In the DOM tree, I would move the close button after the search input, and use absolute positioning to move it to the top right corner. Then focusOnMount=false can be removed, and we can rely on Popover's autofocusing to focus on the search input element for us automatically.

[yansern]

This PR fixes it. https://github.com/Automattic/wp-calypso/pull/41007

[yansern]

UPDATE: https://github.com/Automattic/wp-calypso/pull/41007 is now closed for a more simple solution at https://github.com/Automattic/wp-calypso/pull/41014. @alshakero

[alshakero]

Closing as fixed in #41014