termcast 1.3.48 → 1.3.50

package/src/examples/form-basic.vitest.tsx

@@ -678,3 +678,242 @@ test('form scrolls with mouse wheel', async () => {
     "
   `)
 }, 10000)
+
+test('arrow down from checkbox to dropdown lands on first item', async () => {
+  await session.text({
+    waitFor: (text) => {
+      return /Form Component Demo/i.test(text)
+    },
+  })
+
+  // Navigate to Checkbox via tab: Description → Username → Password → Bio → Checkbox
+  await session.press('tab')
+  await session.press('tab')
+  await session.press('tab')
+  await session.press('tab')
+
+  const checkboxFocused = await session.text()
+  expect(checkboxFocused).toContain('Email Preferences')
+
+  // Arrow down from Checkbox should focus the Country dropdown
+  // Bug: the dropdown also processes the arrow and moves cursor to index 1 (Canada)
+  // Expected: cursor stays at index 0 (United States)
+  await session.press('down')
+
+  const afterDown = await session.text()
+  expect(afterDown).toMatchInlineSnapshot(`
+    "
+
+
+
+
+      │  Required field
+      │
+      ◇  Password
+      │  Enter secure password
+      │
+      │  Must be at least 8 characters
+      │
+      ◇  Biography
+      │  Tell us about yourself...
+      │
+      │
+      │                                                                █
+      │                                                                ▀
+      │  Maximum 500 characters
+      │
+      ◇  Email Preferences
+      │  ○ Subscribe to newsletter
+      │
+      │  Receive weekly updates
+      │
+      ◆  Country
+      │  Select your country
+      │
+      │  Americas
+      │› ○ United States
+      │  ○ Canada
+      │  ○ Mexico
+      │  Europe
+      │
+      │  Your country of residence
+      │
+      ◇  Empty Dropdown
+      │  No items available
+      │
+      ◇  Minimal Field
+      │  No info text
+      │
+      ◇  Date of Birth
+      │
+      │   ←       2026        →
+      │   ←     February      →
+
+
+       ctrl ↵ submit   tab navigate   ^k actions
+
+    "
+  `)
+
+  // The cursor (›) should be on United States (index 0), not Canada (index 1)
+  expect(afterDown).toMatch(/›.*United States/)
+}, 10000)
+
+test('arrow down on last dropdown item moves focus to next form field', async () => {
+  await session.text({
+    waitFor: (text) => {
+      return /Form Component Demo/i.test(text)
+    },
+  })
+
+  // Description → Username → Password → Biography → Email Preferences
+  await session.press('tab')
+  await session.press('tab')
+  await session.press('tab')
+  await session.press('tab')
+
+  // Move from checkbox to country dropdown first item (United States)
+  await session.press('down')
+
+  // Move to last country option (Germany)
+  await session.press('down')
+  await session.press('down')
+  await session.press('down')
+  await session.press('down')
+  await session.press('down')
+
+  const focusedLastItemSnapshot = await session.text()
+  expect(focusedLastItemSnapshot).toMatch(/›.*Germany/)
+
+  // Repro: this should move focus to the next form field (Empty Dropdown)
+  await session.press('down')
+
+  const afterBoundaryDownSnapshot = await session.text()
+  expect(afterBoundaryDownSnapshot).toMatch(/◆\s+Empty Dropdown/)
+  expect(afterBoundaryDownSnapshot).toMatch(/◇\s+Country/)
+}, 10000)
+
+test('arrow up on first dropdown item moves focus to previous form field', async () => {
+  await session.text({
+    waitFor: (text) => {
+      return /Form Component Demo/i.test(text)
+    },
+  })
+
+  // Description → Username → Password → Biography → Email Preferences
+  await session.press('tab')
+  await session.press('tab')
+  await session.press('tab')
+  await session.press('tab')
+
+  // Move from checkbox to country dropdown first item (United States)
+  await session.press('down')
+
+  const firstItemFocusedSnapshot = await session.text()
+  expect(firstItemFocusedSnapshot).toMatch(/›.*United States/)
+
+  // Boundary up should move focus back to previous form field (Email Preferences)
+  await session.press('up')
+
+  const afterBoundaryUpSnapshot = await session.text()
+  expect(afterBoundaryUpSnapshot).toMatch(/◆\s+Email Preferences/)
+  expect(afterBoundaryUpSnapshot).toMatch(/◇\s+Country/)
+}, 10000)
+
+test('date picker down boundary moves focus to next form field', async () => {
+  await session.text({
+    waitFor: (text) => {
+      return /Form Component Demo/i.test(text)
+    },
+  })
+
+  await session.press('tab')
+  await session.press('tab')
+  await session.press('tab')
+  await session.press('tab')
+  await session.press('tab')
+  await session.press('tab')
+  await session.press('tab')
+  await session.press('tab')
+
+  const datePickerFocusedSnapshot = await session.text()
+  expect(datePickerFocusedSnapshot).toMatch(/◆\s+Date of Birth/)
+
+  await session.type('10')
+  await session.press('down')
+
+  const nonBoundaryDownSnapshot = await session.text()
+  expect(nonBoundaryDownSnapshot).toMatch(/◆\s+Date of Birth/)
+  expect(nonBoundaryDownSnapshot).not.toMatch(/◆\s+Upload Documents/)
+
+  await session.press('down')
+  await session.press('down')
+
+  const afterBoundaryDownSnapshot = await session.text()
+  expect(afterBoundaryDownSnapshot).toMatch(/◆\s+Upload Documents/)
+  expect(afterBoundaryDownSnapshot).toMatch(/◇\s+Date of Birth/)
+}, 10000)
+
+test('date picker up boundary moves focus to previous form field', async () => {
+  await session.text({
+    waitFor: (text) => {
+      return /Form Component Demo/i.test(text)
+    },
+  })
+
+  await session.press('tab')
+  await session.press('tab')
+  await session.press('tab')
+  await session.press('tab')
+  await session.press('tab')
+  await session.press('tab')
+  await session.press('tab')
+  await session.press('tab')
+
+  const datePickerFocusedSnapshot = await session.text()
+  expect(datePickerFocusedSnapshot).toMatch(/◆\s+Date of Birth/)
+
+  await session.type('1')
+  await session.press('up')
+
+  const afterFirstUpSnapshot = await session.text()
+  expect(afterFirstUpSnapshot).toMatch(/◆\s+Date of Birth/)
+
+  await session.press('up')
+
+  const afterSecondUpSnapshot = await session.text()
+  expect(afterSecondUpSnapshot).toMatch(/◆\s+Date of Birth/)
+
+  await session.press('up')
+
+  const afterBoundaryUpSnapshot = await session.text()
+  expect(afterBoundaryUpSnapshot).toMatch(/◆\s+Minimal Field/)
+  expect(afterBoundaryUpSnapshot).toMatch(/◇\s+Date of Birth/)
+}, 10000)
+
+test('textarea arrow keys move focus between adjacent form fields', async () => {
+  await session.text({
+    waitFor: (text) => {
+      return /Form Component Demo/i.test(text)
+    },
+  })
+
+  await session.press('tab')
+  await session.press('tab')
+  await session.press('tab')
+
+  const textareaFocusedSnapshot = await session.text()
+  expect(textareaFocusedSnapshot).toMatch(/◆\s+Biography/)
+
+  await session.type('hello')
+  await session.press('down')
+
+  const afterDownSnapshot = await session.text()
+  expect(afterDownSnapshot).toMatch(/◆\s+Email Preferences/)
+  expect(afterDownSnapshot).toMatch(/◇\s+Biography/)
+
+  await session.press('up')
+
+  const afterUpSnapshot = await session.text()
+  expect(afterUpSnapshot).toMatch(/◆\s+Biography/)
+}, 10000)

package/src/examples/form-dropdown.vitest.tsx

@@ -110,8 +110,8 @@ test('form dropdown shows inline options', async () => {
       │  TypeScript, Rust                                              █
       │                                                                █
       │  Frontend                                                      █
-      │  ● TypeScript                                                  █
-      │› ○ JavaScript                                                  █
+      │› ● TypeScript                                                  █
+      │  ○ JavaScript                                                  █
       │  ○ React                                                       █
       │  ○ Vue                                                         █
       │                                                                █
@@ -169,9 +169,9 @@ test('form dropdown shows inline options', async () => {
       ◆  Programming Languages                                         █
       │  TypeScript, Rust                                              █
       │                                                                █
-      │  ○ Svelte                                                      █
+      │› ○ Svelte                                                      █
       │  Backend                                                       █
-      │› ○ Node.js                                                     █
+      │  ○ Node.js                                                     █
       │  ○ Python                                                      █
       │  ○ Go                                                          █
       │                                                                █
@@ -224,11 +224,11 @@ test('form dropdown shows inline options', async () => {
       │  features                                                      █
       │                                                                █
       ◆  Programming Languages                                         █
-      │  TypeScript, Rust, Node.js                                     █
+      │  TypeScript, Rust, Svelte                                      █
       │                                                                █
-      │  ○ Svelte                                                      █
+      │› ● Svelte                                                      █
       │  Backend                                                       █
-      │› ● Node.js                                                     █
+      │  ○ Node.js                                                     █
       │  ○ Python                                                      █
       │  ○ Go                                                          █
       │                                                                █
@@ -351,11 +351,11 @@ test('form dropdown keyboard navigation', async () => {
       ◆  Programming Languages                                         █
       │  TypeScript, Rust                                              █
       │                                                                █
-      │› ○ Svelte                                                      █
-      │  Backend                                                       █
-      │  ○ Node.js                                                     █
-      │  ○ Python                                                      █
-      │  ○ Go                                                          █
+      │  Frontend                                                      █
+      │  ● TypeScript                                                  █
+      │  ○ JavaScript                                                  █
+      │  ○ React                                                       █
+      │› ○ Vue                                                         █
       │                                                                █
       │  Choose your preferred programming languages                   █
       │                                                                █
@@ -408,9 +408,9 @@ test('form dropdown keyboard navigation', async () => {
       ◆  Programming Languages                                         █
       │  TypeScript, Rust                                              █
       │                                                                █
-      │  ○ Svelte                                                      █
+      │› ○ Svelte                                                      █
       │  Backend                                                       █
-      │› ○ Node.js                                                     █
+      │  ○ Node.js                                                     █
       │  ○ Python                                                      █
       │  ○ Go                                                          █
       │                                                                █
@@ -465,11 +465,11 @@ test('form dropdown keyboard navigation', async () => {
       ◆  Programming Languages                                         █
       │  TypeScript, Rust                                              █
       │                                                                █
-      │› ○ Svelte                                                      █
-      │  Backend                                                       █
-      │  ○ Node.js                                                     █
-      │  ○ Python                                                      █
-      │  ○ Go                                                          █
+      │  Frontend                                                      █
+      │  ● TypeScript                                                  █
+      │  ○ JavaScript                                                  █
+      │  ○ React                                                       █
+      │› ○ Vue                                                         █
       │                                                                █
       │  Choose your preferred programming languages                   █
       │                                                                █
@@ -522,11 +522,11 @@ test('form dropdown keyboard navigation', async () => {
       ◆  Programming Languages                                         █
       │  TypeScript, Rust                                              █
       │                                                                █
-      │› ○ Svelte                                                      █
-      │  Backend                                                       █
-      │  ○ Node.js                                                     █
-      │  ○ Python                                                      █
-      │  ○ Go                                                          █
+      │  Frontend                                                      █
+      │  ● TypeScript                                                  █
+      │  ○ JavaScript                                                  █
+      │  ○ React                                                       █
+      │› ○ Vue                                                         █
       │                                                                █
       │  Choose your preferred programming languages                   █
       │                                                                █
@@ -717,8 +717,8 @@ test('selecting second-to-last visible item should not scroll', async () => {
       │                                                                █
       │  Frontend                                                      █
       │  ● TypeScript                                                  █
-      │  ○ JavaScript                                                  █
-      │› ○ React                                                       █
+      │› ○ JavaScript                                                  █
+      │  ○ React                                                       █
       │  ○ Vue                                                         █
       │                                                                █
       │  Choose your preferred programming languages                   █
@@ -770,12 +770,12 @@ test('selecting second-to-last visible item should not scroll', async () => {
       │  features                                                      █
       │                                                                █
       ◆  Programming Languages                                         █
-      │  TypeScript, Rust, React                                       █
+      │  TypeScript, Rust, JavaScript                                  █
       │                                                                █
       │  Frontend                                                      █
       │  ● TypeScript                                                  █
-      │  ○ JavaScript                                                  █
-      │› ● React                                                       █
+      │› ● JavaScript                                                  █
+      │  ○ React                                                       █
       │  ○ Vue                                                         █
       │                                                                █
       │  Choose your preferred programming languages                   █

package/src/examples/form-tagpicker.vitest.tsx

@@ -153,8 +153,8 @@ test('form tagpicker shows inline options', async () => {
       ◆  Favorite Sport
       │  Choose your favorite sport...
       │
-      │  ○ Basketball
-      │› ○ Football
+      │› ○ Basketball
+      │  ○ Football
       │  ○ Tennis
       │  ○ Baseball
       │  ○ Golf
@@ -213,11 +213,11 @@ test('form tagpicker shows inline options', async () => {
       ◆  Favorite Sport
       │  Choose your favorite sport...
       │
+      │  ○ Basketball
+      │  ○ Football
+      │  ○ Tennis
       │  ○ Baseball
-      │  ○ Golf
-      │› ○ Swimming
-      │  ○ Cycling
-      │  ○ Running
+      │› ○ Golf
       │
       │  Select your favorite sport from the list
       │
@@ -268,13 +268,13 @@ test('form tagpicker shows inline options', async () => {
       │  Test tag picker with multiple selection support
       │
       ◆  Favorite Sport
-      │  Swimming
+      │  Golf
       │
+      │  ○ Basketball
+      │  ○ Football
+      │  ○ Tennis
       │  ○ Baseball
-      │  ○ Golf
-      │› ● Swimming
-      │  ○ Cycling
-      │  ○ Running
+      │› ● Golf
       │
       │  Select your favorite sport from the list
       │
@@ -398,8 +398,8 @@ test('form tagpicker keyboard navigation', async () => {
       │  ○ Basketball
       │  ○ Football
       │  ○ Tennis
-      │  ○ Baseball
-      │› ○ Golf
+      │› ○ Baseball
+      │  ○ Golf
       │
       │  Select your favorite sport from the list
       │
@@ -452,11 +452,11 @@ test('form tagpicker keyboard navigation', async () => {
       ◆  Favorite Sport
       │  Choose your favorite sport...
       │
+      │  ○ Basketball
+      │  ○ Football
+      │  ○ Tennis
       │  ○ Baseball
-      │  ○ Golf
-      │› ○ Swimming
-      │  ○ Cycling
-      │  ○ Running
+      │› ○ Golf
       │
       │  Select your favorite sport from the list
       │
@@ -509,11 +509,11 @@ test('form tagpicker keyboard navigation', async () => {
       ◆  Favorite Sport
       │  Choose your favorite sport...
       │
-      │  ○ Baseball
-      │› ○ Golf
-      │  ○ Swimming
-      │  ○ Cycling
-      │  ○ Running
+      │  ○ Basketball
+      │  ○ Football
+      │  ○ Tennis
+      │› ○ Baseball
+      │  ○ Golf
       │
       │  Select your favorite sport from the list
       │
@@ -566,11 +566,11 @@ test('form tagpicker keyboard navigation', async () => {
       ◆  Favorite Sport
       │  Choose your favorite sport...
       │
-      │  ○ Baseball
-      │› ○ Golf
-      │  ○ Swimming
-      │  ○ Cycling
-      │  ○ Running
+      │  ○ Basketball
+      │  ○ Football
+      │  ○ Tennis
+      │› ○ Baseball
+      │  ○ Golf
       │
       │  Select your favorite sport from the list
       │

package/src/examples/github.vitest.tsx

@@ -97,7 +97,7 @@ test.skipIf(!extensionExists)('github extension shows command list on launch', a
 
 
 
-       ↵ run command   ↑↓ navigate   ^k actions               powered by termcast
+       ↵ run command   ↑↓ navigate   ^k actions           powered by termcast.app
 
 
 
@@ -146,7 +146,7 @@ test.skipIf(!extensionExists)('github extension can navigate commands', async ()
 
 
 
-       ↵ run command   ↑↓ navigate   ^k actions               powered by termcast
+       ↵ run command   ↑↓ navigate   ^k actions           powered by termcast.app
 
 
 
@@ -192,7 +192,7 @@ test.skipIf(!extensionExists)('github extension can open actions panel', async (
       │   Settings                                                               │
       │   Configure GitHub...                                             ⌃⇧,    │
       │   Change Theme...                                                        │
-      │   See Console Logs                                                       │
+      │   Toggle Console Logs                                                    │
       │                                                                          │
       │                                                                          │
       │                                                                          │
@@ -239,7 +239,7 @@ test.skipIf(!extensionExists)('github extension can search commands', async () =
 
 
 
-       ↵ run command   ↑↓ navigate   ^k actions               powered by termcast
+       ↵ run command   ↑↓ navigate   ^k actions           powered by termcast.app