Skip to content

Commit

Permalink
Showing 2 changed files with 29 additions and 0 deletions.
1 change: 1 addition & 0 deletions packages/components/combobox/src/ComboboxContext.tsx
Original file line number Diff line number Diff line change
@@ -312,6 +312,7 @@ export const ComboboxProvider = ({
* - output: https://github.com/downshift-js/downshift/tree/master/src/hooks/useCombobox#returned-props
*/
const downshift = useCombobox<ComboboxItem>({
inputId: id,
items: filteredItems,
selectedItem: multiple ? undefined : selectedItem,
id,
28 changes: 28 additions & 0 deletions packages/components/combobox/src/tests/withFormField.test.tsx
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
import { FormField } from '@spark-ui/form-field'
import { render, screen } from '@testing-library/react'
import userEvent from '@testing-library/user-event'
import { describe, expect, it } from 'vitest'

import { Combobox } from '..'
@@ -31,5 +32,32 @@ describe('Combobox', () => {

expect(screen.getByText('You forgot to select a book')).toBeInTheDocument()
})

it('should move focus to the input field when the corresponding label is clicked', async () => {
const user = userEvent.setup()

render(
<FormField>
<FormField.Label>Click me</FormField.Label>
<Combobox>
<Combobox.Trigger>
<Combobox.Input aria-label="Book" placeholder="Pick a book" />
</Combobox.Trigger>
<Combobox.Popover>
<Combobox.Items>
<Combobox.Item value="book-1">War and Peace</Combobox.Item>
<Combobox.Item value="book-2">1984</Combobox.Item>
<Combobox.Item value="book-3">Pride and Prejudice</Combobox.Item>
</Combobox.Items>
</Combobox.Popover>
</Combobox>
<FormField.ErrorMessage>You forgot to select a book</FormField.ErrorMessage>
</FormField>
)

await user.click(screen.getByText('Click me'))

expect(getInput('Click me')).toHaveFocus()
})
})
})

0 comments on commit 28bb25e

Please sign in to comment.