Skip to content

feat!: Combobox にフォーカスした時に検索できることが伝わる振る舞いに変更 #5790

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 4 commits into
base: master
Choose a base branch
from
Open

feat!: Combobox にフォーカスした時に検索できることが伝わる振る舞いに変更 #5790

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
31ba4d7
feat: Combobox にフォーカスした時に検索できることが伝わる振る舞いに変更
uknmr Jul 11, 2025
5c7fea3
fix: dropdownHelpMessage の消し忘れ
uknmr Jul 11, 2025
261c70c
fix: test
uknmr Jul 11, 2025
796ee4b
fix: 検索視差アイコンを SearchInputIcon に差し替え
uknmr Jul 11, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
61 changes: 13 additions & 48 deletions packages/smarthr-ui/src/components/Combobox/MultiCombobox/MultiCombobox.test.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@ import { FormControl } from '../../FormControl'

import { MultiCombobox } from './MultiCombobox'

describe('SingleCombobox', () => {
describe('MultiCombobox', () => {
beforeEach(() => {
vi.spyOn(window, 'requestAnimationFrame').mockImplementation((cb) => {
cb(0)
Expand All @@ -16,6 +16,7 @@ describe('SingleCombobox', () => {
})

const combobox = () => screen.getByRole('combobox', { name: 'コンボボックス' })
const searchInput = () => screen.getByRole('textbox')
const listbox = () => screen.queryByRole('listbox')
const deleteButtons = () => screen.getAllByRole('button', { name: /を削除$/ })

Expand Down Expand Up @@ -57,7 +58,7 @@ describe('SingleCombobox', () => {

// コンボボックスをクリックしてリストボックスを表示
await act(() => userEvent.click(combobox()))
expect(combobox()).toHaveFocus()
expect(searchInput()).toHaveFocus()
expect(screen.queryByRole('listbox')).toBeInTheDocument()

// リストボックスからアイテムを2種続けて選択して、選択イベントの発火を確認
Expand Down Expand Up @@ -218,7 +219,7 @@ describe('SingleCombobox', () => {
expect(onDelete).toHaveBeenCalledWith({ label: 'option 3', value: 'value-3' })
})

it('キーボードで選択中アイテムのフォーカス移動ができること', async () => {
it('キーボードで選択中アイテムにフォーカスを移動できること', async () => {
render(
template({
selectedItems: [
Expand All @@ -235,34 +236,21 @@ describe('SingleCombobox', () => {
// 適当にキー入力
await act(() => userEvent.keyboard('ops'))

// カーソルを左に移動をしても、キャレットがテキストの先頭にない間は削除ボタンにフォーカスが移動しないこと
await act(() => userEvent.keyboard('{arrowleft}'))
expect(deleteButtons()[2]).not.toHaveFocus()
await act(() => userEvent.keyboard('{arrowleft}'))
expect(deleteButtons()[2]).not.toHaveFocus()
await act(() => userEvent.keyboard('{arrowleft}'))
expect(deleteButtons()[2]).not.toHaveFocus()

// キャレットが先頭にある状態でカーソルを左に移動すると、末尾の削除ボタンにフォーカスが移動すること
await act(() => userEvent.keyboard('{arrowleft}'))
await act(() => userEvent.keyboard('{shift>}{tab}'))
expect(deleteButtons()[2]).toHaveFocus()

// 削除ボタンにフォーカスがある状態でさらに手前の削除ボタンに移動できること
await act(() => userEvent.keyboard('{arrowleft}'))
await act(() => userEvent.keyboard('{shift>}{tab}'))
expect(deleteButtons()[1]).toHaveFocus()
await act(() => userEvent.keyboard('{arrowleft}'))
expect(deleteButtons()[0]).toHaveFocus()

// 一番手前の削除ボタンにフォーカスがある場合は、左矢印キーを押下してもこれ以上フォーカス移動できないこと
await act(() => userEvent.keyboard('{arrowleft}'))
await act(() => userEvent.keyboard('{shift>}{tab}'))
expect(deleteButtons()[0]).toHaveFocus()

// 末尾日の削除ボタンにフォーカスがある場合、右矢印キーを押下すると input いフォーカスが移動すること
await act(() => userEvent.keyboard('{arrowright}'))
await act(() => userEvent.keyboard('{arrowright}'))
await act(() => userEvent.keyboard('{arrowright}'))
expect(deleteButtons()[2]).not.toHaveFocus()
expect(combobox()).toHaveFocus()
// 削除ボタンにフォーカスがある状態で、tab を押すと次の削除ボタンに移動できること
await act(() => userEvent.keyboard('{tab}'))
expect(deleteButtons()[1]).toHaveFocus()
await act(() => userEvent.keyboard('{tab}'))
expect(deleteButtons()[2]).toHaveFocus()
})

it('キーボードで選択中アイテムにフォーカス移動して削除できること', async () => {
Expand All @@ -281,34 +269,11 @@ describe('SingleCombobox', () => {
await act(() => userEvent.keyboard('{tab}'))

// 選択中のアイテムにフォーカスを移動
await act(() => userEvent.keyboard('{arrowleft}'))
await act(() => userEvent.keyboard('{shift>}{tab}'))
expect(deleteButtons()[1]).toHaveFocus()

// Enter キーで削除
await act(() => userEvent.keyboard('{enter}'))
expect(onDelete).toHaveBeenCalledWith({ label: 'option 2', value: 'value-2' })
})

it('Backspaceキーでアイテムを削除できること', async () => {
const onDelete = vi.fn()
render(
template({
selectedItems: [
{ label: 'option 1', value: 'value-1' },
{ label: 'option 2', value: 'value-2' },
],
onDelete,
}),
)

// リストボックスを開く
await act(() => userEvent.keyboard('{tab}'))

// Backspace キーで末尾のアイテムが削除されること
await act(() => userEvent.keyboard('{backspace}'))
expect(onDelete).toHaveBeenCalledWith({ label: 'option 2', value: 'value-2' })

// Backspace によって削除した末尾アイテムはテキスト化されること
expect(combobox()).toHaveValue('option 2')
})
})
Loading