fix background color style

packages/toolpad-app/src/PinholeOverlay.tsx

@@ -13,7 +13,7 @@ const PinholeOverlayRoot = styled('div')({
     right: 0,
     bottom: 0,
     background: '#000',
-    opacity: 0.03,
+    opacity: 0,
   },
 });
 

test/integration/editor/index.spec.ts

@@ -192,3 +192,18 @@ test('code editor auto-complete', async ({ page }) => {
   await page.keyboard.type('textF');
   await expect(page.getByRole('option', { name: 'textField' })).toBeVisible();
 });
+
+test('must deselect selected element when clicking outside of it', async ({ page }) => {
+  const editorModel = new ToolpadEditor(page);
+
+  await editorModel.goToPageById('K7SkzhT');
+
+  await editorModel.waitForOverlay();
+  const nodeHudTag = editorModel.appCanvas.getByTestId('node-hud-tag');
+  const input = editorModel.appCanvas.locator('input:nth-child(1)');
+  const boundingBox = await input.boundingBox();
+  await clickCenter(page, input);
+  await expect(nodeHudTag).toBeVisible();
+  await page.mouse.click(boundingBox!.x + 150, boundingBox!.y + 150);
+  await expect(nodeHudTag).toBeHidden();
+});