Fix deleting newly placed components with Backspace key

[apedroferreira]

Fixes issue where it was not possible to delete a component from the editor with the "Backspace" key just after placing it, without unselecting and then selecting it again.
My solution to this issue was to refocus on the overlay element that catches keydown events after placing a new element, because dragging it from outside the editor was moving the focus outside of it.

Closes #752

• I have followed (at least) the PR section of the contributing guide.

[render]

Your Render PR Server URL is https://toolpad-pr-771.onrender.com.

Follow its progress at https://dashboard.render.com/web/srv-cbpv8gla499d2t4ac8c0.

[Janpot]

👍 makes sense, nice catch!

[oliviertassinari]

Do we need the defensive check here? I would assume React guarantees the ref is defined, hence:

Suggested change

	const overlayElement = overlayRef.current;
	if (overlayElement) {
	overlayElement.focus();
	}
	overlayRef.current!.focus();

would be better, so we catch regressions (e.g. the ref is no longer bound to a DOM element) at runtime instead of going silent.

[Janpot]

In some other places we do:

Suggested change

	const overlayElement = overlayRef.current;
	if (overlayElement) {
	overlayElement.focus();
	}
	invariant(overlayRef.current, 'Ref not bound');
	overlayRef.current.focus();

This communicates the intent a bit clearer and avoids usage of !.

Finding a few more occurrences using regex search in vscode if \([^.]+\.current\b

[apedroferreira]

good points, thanks! i used an invariant check here and also in a couple other places where it seemed right to use it

[render]

Your Render PR Server URL is https://toolpad-pr-771.onrender.com.

Follow its progress at https://dashboard.render.com/web/srv-cbtp50pgp3jh0klggbg0.