improvements

e2e/debug-typeahead.spec.ts

@@ -0,0 +1,85 @@
+import { test, expect } from '@playwright/test';
+
+test('debug typeahead', async ({ page }) => {
+  // Navigate to transactions page
+  await page.goto('/transaction2');
+  await page.waitForSelector('table tbody tr');
+  
+  // Click edit
+  const editButton = page.locator('button[hx-get*="/transaction2/"][hx-get*="/edit"]').first();
+  await editButton.click();
+  
+  await page.waitForSelector('#modal-holder[x-show="open"]', { state: 'visible' });
+  await page.click('button:has-text("Transaction Actions")');
+  await page.waitForSelector('text=Transaction Actions', { state: 'visible' });
+  await page.click('button:has-text("Manual")');
+  await page.waitForSelector('#account-grid-body');
+  
+  // Switch to percentage mode
+  await page.locator('input[name="step-params[amount-mode]"][value="%"]').click();
+  await page.waitForResponse(response => 
+    response.url().includes('/toggle-amount-mode') && response.status() === 200
+  );
+  await page.waitForTimeout(200);
+  
+  // Click New account
+  await page.click('text=New account');
+  await page.waitForTimeout(500);
+  
+  // Find the typeahead
+  const row = page.locator('#account-grid-body tbody tr').nth(0);
+  const typeaheadContainer = row.locator('div.relative[x-data*="baseUrl"]').first();
+  const typeaheadTrigger = typeaheadContainer.locator('a[x-ref="input"]').first();
+  
+  // Click to open dropdown
+  await typeaheadTrigger.click();
+  await page.waitForTimeout(500);
+  
+  // Take a screenshot to see what's on screen
+  await page.screenshot({ path: '/tmp/typeahead-debug.png' });
+  
+  // Find all tippy dropdowns
+  const tippies = page.locator('div[id^="tippy"]');
+  console.log('Number of tippy elements:', await tippies.count());
+  
+  // Get HTML of first tippy
+  if (await tippies.count() > 0) {
+    const html = await tippies.first().innerHTML();
+    console.log('First tippy HTML:', html.substring(0, 1000));
+  }
+  
+  // Try to find search input
+  const searchInputs = page.locator('input[type="text"]');
+  console.log('Number of text inputs:', await searchInputs.count());
+  
+  // Find visible text inputs
+  for (let i = 0; i < Math.min(await searchInputs.count(), 10); i++) {
+    const input = searchInputs.nth(i);
+    const isVisible = await input.isVisible().catch(() => false);
+    console.log(`Input ${i}: visible=${isVisible}`);
+  }
+  
+  // Type in the search input
+  const searchInput = page.locator('div[id^="tippy"] input[type="text"]').first();
+  await searchInput.fill('Test');
+  await page.waitForTimeout(1000);
+  
+  // Take another screenshot
+  await page.screenshot({ path: '/tmp/typeahead-debug-2.png' });
+  
+  // Check for dropdown options
+  const options = page.locator('div[id^="tippy"] .dropdown-options a');
+  console.log('Number of dropdown options:', await options.count());
+  
+  // Get HTML of dropdown options
+  if (await options.count() > 0) {
+    for (let i = 0; i < Math.min(await options.count(), 3); i++) {
+      const html = await options.nth(i).innerHTML();
+      console.log(`Option ${i}:`, html);
+    }
+  }
+  
+  // Also check if there are any li elements
+  const lis = page.locator('div[id^="tippy"] li');
+  console.log('Number of li elements:', await lis.count());
+});