fix(ui): add close() to table dropdown so options do not call window.close()

Closes #11869

resources/views/components/table/dropdown.blade.php

@@ -17,6 +17,9 @@
         this.open = true;
         this.$nextTick(() => this.updatePosition());
     },
+    close() {
+        this.open = false;
+    },
     updatePosition() {
         const trigger = this.$refs.trigger.getBoundingClientRect();
         const panel = this.$refs.panel.getBoundingClientRect();
@@ -29,7 +32,7 @@
 
         this.panelStyle = `position: fixed; left: ${left}px; top: ${top}px; min-width: 0;`;
     }
-}" @click.outside="open = false" @keydown.escape.window="open = false"
+}" @click.outside="close()" @keydown.escape.window="close()"
     x-on:resize.window="if (open) updatePosition()" x-on:scroll.window="if (open) updatePosition()">
     <div x-ref="trigger" @click="toggle()">
         {{ $trigger }}

tests/v4/Browser/TableDropdownCloseTest.php

@@ -0,0 +1,50 @@
+<?php
+
+use Illuminate\Foundation\Testing\RefreshDatabase;
+
+uses(RefreshDatabase::class);
+
+it('closes the table dropdown without calling window.close when an option is clicked', function () {
+    $stack = seedBrowserResourceStack();
+
+    $page = visit('/login')
+        ->fill('email', 'test@example.com')
+        ->fill('password', 'password')
+        ->click('Login')
+        ->assertSee('Dashboard')
+        ->navigate(route('project.resource.create', [
+            'project_uuid' => $stack['project']->uuid,
+            'environment_uuid' => $stack['environment']->uuid,
+        ]))
+        ->assertSee('Filter');
+
+    $page->script(<<<'JS'
+        () => {
+            window.__windowCloseCalls = 0;
+            window.close = () => window.__windowCloseCalls++;
+            [...document.querySelectorAll('button')].find(button => button.textContent.trim() === 'Filter').click();
+        }
+    JS);
+    $page->wait(0.5);
+
+    $page->script(<<<'JS'
+        () => [...document.querySelectorAll('[role="option"]')]
+            .find(option => option.textContent.trim() === 'Applications')
+            .click()
+    JS);
+    $page->wait(0.5);
+
+    $state = $page->script(<<<'JS'
+        () => {
+            const trigger = [...document.querySelectorAll('button')].find(button => button.textContent.trim() === 'Filter');
+
+            return {
+                windowCloseCalls: window.__windowCloseCalls,
+                open: Alpine.$data(trigger.closest('[x-data]')).open,
+            };
+        }
+    JS);
+
+    expect($state)->toBe(['windowCloseCalls' => 0, 'open' => false]);
+    $page->screenshot(filename: 'table-dropdown-close');
+});