It'd be nice to be able to avoid checking the class here, but I'm short of other ideas beyond having LinkContainer manage a ref to the URLInput's popover.

Yes this is a bit unfortunate.

Why the check?

If the user attempted to click outside of the popover when the autocomplete list hadn't been displayed, this.autocompleteRef would be unset. Checking for contains seems to be the safest option.

Using hasIn like this makes me think that this condition is a browser compatibility check for Node.contains(). This isn't necessary since Node.contains() works in all modern browsers.

I think a clearer way to convey what's happening is to simply check for the presence of the ref.

Using hasIn like this makes me think that this condition is a browser compatibility check for Node.contains(). This isn't necessary since Node.contains() works in all modern browsers.

I think a clearer way to convey what's happening is to simply check for the presence of the ref.

It's confusing, I think, to see a mix of createRef() refs and callback refs.

This line here is redundant since bindAutocompleteRef will overwrite this.autocompleteRef when the component is mounted.

The quick way to address this is to delete this line.

A nicer approach, I think, would be to update URLInput to use createRef() refs. Then, LinkEditor can simply override the ref by passing a prop.

class URLInput extends Component {
	constructor( { autocompleteRef } ) {
		super( ...arguments );
		this.autocompleteRef = autocompleteRef || createRef();
	}
	render() {
		...
		return (
			...
			<div
				className="editor-url-input__suggestions"
				...
				ref={ this.autocompleteRef }
			>
			...
		);
	}
}