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/fixture/toolpad/pages/page23/page.yml

@@ -17,3 +17,4 @@ spec:
           name: text
           props:
             value: text-foo
+            fullWidth: true

test/integration/editor/index.spec.ts

@@ -195,6 +195,25 @@ test('code editor auto-complete', async ({ page }) => {
   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 textField = editorModel.appCanvas.locator('input');
+  const textFieldNodeHudTag = editorModel.appCanvas
+    .getByTestId('node-hud-tag')
+    .filter({ hasText: 'textField' });
+
+  await clickCenter(page, textField);
+  await expect(textFieldNodeHudTag).toBeVisible();
+
+  const textFieldBoundingBox = await textField.boundingBox();
+  await page.mouse.click(textFieldBoundingBox!.x + 150, textFieldBoundingBox!.y + 150);
+  await expect(textFieldNodeHudTag).toBeHidden();
+});
 test('can rename page', async ({ page, localApp }) => {
   const editorModel = new ToolpadEditor(page);
   await editorModel.goto();