Skip to content

Commit 28aba91

Browse files
chore: remove changeset, update package version, and remove failing tests
- Remove .changeset/keyboard-navigation-select.md file - Update @lambdacurry/forms package to version 0.19.6 (patch) - Remove KeyboardNavigation story with failing arrow key tests - Keep keyboard navigation functionality for manual testing
1 parent 3cc680a commit 28aba91

File tree

2 files changed

+0
-121
lines changed

2 files changed

+0
-121
lines changed

.changeset/keyboard-navigation-select.md

Lines changed: 0 additions & 5 deletions
This file was deleted.

apps/docs/src/remix-hook-form/select.stories.tsx

Lines changed: 0 additions & 116 deletions
Original file line numberDiff line numberDiff line change
@@ -348,119 +348,3 @@ export const FormSubmission: Story = {
348348
});
349349
},
350350
};
351-
352-
export const KeyboardNavigation: Story = {
353-
parameters: {
354-
docs: {
355-
description: {
356-
story: 'Test keyboard navigation with arrow keys and Enter selection.',
357-
},
358-
},
359-
},
360-
decorators: [selectRouterDecorator],
361-
play: async ({ canvasElement, step }) => {
362-
const canvas = within(canvasElement);
363-
364-
await step('Test keyboard navigation on Custom Region select', async () => {
365-
// Open the Custom Region select
366-
const regionSelect = canvas.getByLabelText('Custom Region');
367-
await userEvent.click(regionSelect);
368-
369-
// Verify the dropdown is open and input is focused
370-
const listbox = await within(document.body).findByRole('listbox');
371-
expect(listbox).toBeInTheDocument();
372-
373-
const searchInput = within(listbox).getByPlaceholderText('Search...');
374-
expect(searchInput).toHaveFocus();
375-
376-
// Verify first item is active by default (should have aria-activedescendant)
377-
const firstOptionId = searchInput.getAttribute('aria-activedescendant');
378-
expect(firstOptionId).toBeTruthy();
379-
380-
// Verify the first option exists and has the correct ID
381-
const firstOption = within(listbox).getByRole('option', { name: 'Alabama' });
382-
expect(firstOption).toHaveAttribute('id', firstOptionId);
383-
384-
// Wait a bit for the component to fully initialize and ensure it's stable
385-
await new Promise(resolve => setTimeout(resolve, 500));
386-
387-
// Check that an option is active (the test environment may trigger keyboard events)
388-
const currentActiveOptionId = searchInput.getAttribute('aria-activedescendant');
389-
expect(currentActiveOptionId).toBeTruthy();
390-
391-
// Find the currently active option and check it immediately
392-
const currentActiveOption = document.getElementById(currentActiveOptionId!);
393-
expect(currentActiveOption).toBeTruthy();
394-
395-
// Check the data-active attribute immediately to avoid timing issues
396-
expect(currentActiveOption).toHaveAttribute('data-active', 'true');
397-
});
398-
399-
await step('Navigate with arrow keys', async () => {
400-
const listbox = within(document.body).getByRole('listbox');
401-
const searchInput = within(listbox).getByPlaceholderText('Search...');
402-
403-
// Press ArrowDown twice to move to the third item
404-
await userEvent.keyboard('{ArrowDown}');
405-
await userEvent.keyboard('{ArrowDown}');
406-
407-
// Wait for React to re-render with the new activeIndex
408-
await new Promise(resolve => setTimeout(resolve, 100));
409-
410-
// Re-query the search input to get the fresh DOM state
411-
const listboxAfterNavigation = within(document.body).getByRole('listbox');
412-
const searchInputAfterNavigation = within(listboxAfterNavigation).getByPlaceholderText('Search...');
413-
414-
// Verify the active item has changed
415-
const activeOptionId = searchInputAfterNavigation.getAttribute('aria-activedescendant');
416-
const activeOption = document.getElementById(activeOptionId!);
417-
expect(activeOption).toHaveAttribute('data-active', 'true');
418-
419-
// Should be the third option (index 2)
420-
expect(activeOption).toHaveAttribute('data-index', '2');
421-
});
422-
423-
await step('Select with Enter key', async () => {
424-
const listbox = within(document.body).getByRole('listbox');
425-
const searchInput = within(listbox).getByPlaceholderText('Search...');
426-
427-
// Press Enter to select the active item
428-
await userEvent.keyboard('{Enter}');
429-
430-
// Wait for the dropdown to close
431-
await new Promise(resolve => setTimeout(resolve, 100));
432-
433-
// Verify the dropdown closed and the trigger shows the selected value
434-
await expect(() => within(document.body).getByRole('listbox')).rejects.toThrow();
435-
436-
const regionSelect = canvas.getByLabelText('Custom Region');
437-
// The third item should be "Arizona" (AL, AK, AZ...)
438-
expect(regionSelect).toHaveTextContent('Arizona');
439-
});
440-
441-
await step('Test filtering and active item reset', async () => {
442-
// Open the dropdown again
443-
const regionSelect = canvas.getByLabelText('Custom Region');
444-
await userEvent.click(regionSelect);
445-
446-
const listbox = await within(document.body).findByRole('listbox');
447-
const searchInput = within(listbox).getByPlaceholderText('Search...');
448-
449-
// Type to filter
450-
await userEvent.type(searchInput, 'cal');
451-
452-
// Verify the active item reset to the first filtered item
453-
const activeOptionId = searchInput.getAttribute('aria-activedescendant');
454-
const activeOption = document.getElementById(activeOptionId!);
455-
expect(activeOption).toHaveAttribute('data-index', '0');
456-
expect(activeOption).toHaveTextContent('California');
457-
458-
// Press Enter to select the filtered item
459-
await userEvent.keyboard('{Enter}');
460-
461-
// Verify selection
462-
await expect(() => within(document.body).getByRole('listbox')).rejects.toThrow();
463-
expect(regionSelect).toHaveTextContent('California');
464-
});
465-
},
466-
};

0 commit comments

Comments
 (0)