chore: Revert "feat!: Combobox の inputAttributes を消し、input に直接渡すように修正" (

#4909)

packages/smarthr-ui/e2e/components/ComboBox/MultiComboBox.test.ts

@@ -14,14 +14,15 @@ function elementWithId(id: string | null | undefined) {
 }
 
 test('アイテムの選択と選択解除ができること', async (t) => {
-  const combobox = Selector('[data-test=multi-combobox-default]')
+  const wrapper = Selector('[data-test=multi-combobox-default]')
+  const combobox = wrapper.find('input[role=combobox]')
   const comboboxControls = ((await combobox.getAttribute('aria-controls')) || '').split(' ')
   const listbox = elementWithId(comboboxControls[0])
   const selectedItems = elementWithId(comboboxControls[1])
 
   await t
     // コンボボックスをクリックするとテキストボックスがフォーカスされること
-    .click(combobox)
+    .click(wrapper)
     .expect(combobox.focused)
     .ok()
     // アイテムを選択できること
@@ -45,42 +46,44 @@ test('アイテムの選択と選択解除ができること', async (t) => {
 })
 
 test('リストボックスが開閉できること', async (t) => {
-  const combobox = Selector('[data-test=multi-combobox-default]')
+  const wrapper = Selector('[data-test=multi-combobox-default]')
+  const combobox = wrapper.find('input[role=combobox]')
   const comboboxControls = ((await combobox.getAttribute('aria-controls')) || '').split(' ')
   const listbox = elementWithId(comboboxControls[0])
 
   await t
     // コンボボックスをクリックするとリストボックスが表示されること
-    .click(combobox)
+    .click(wrapper)
     .expect(listbox.visible)
     .ok()
     // 外側をクリックするとリストボックスが非表示になること
     .click('body', { offsetX: 0, offsetY: 0 })
     .expect(listbox.visible)
     .notOk()
     // 再度リストボックスを開く
-    .click(combobox)
+    .click(wrapper)
     // リストボックス表示中に Escape キーを押下するとリストボックスが非表示になること
     .pressKey('esc')
     .expect(listbox.visible)
     .notOk()
     // 再度リストボックスを開く
-    .click(combobox)
+    .click(wrapper)
     // リストボックス表示中に Tab キーを押下するとリストボックスが非表示になること
     .pressKey('tab')
     .expect(listbox.visible)
     .notOk()
 })
 
 test('コンボボックスがフォーカスされていない時に選択解除ボタンを押下してもリストボックスが表示されないこと', async (t) => {
-  const combobox = Selector('[data-test=multi-combobox-default]')
+  const wrapper = Selector('[data-test=multi-combobox-default]')
+  const combobox = wrapper.find('input[role=combobox]')
   const comboboxControls = ((await combobox.getAttribute('aria-controls')) || '').split(' ')
   const listbox = elementWithId(comboboxControls[0])
   const selectedItems = elementWithId(comboboxControls[1])
 
   await t
     // アイテムを選択
-    .click(combobox)
+    .click(wrapper)
     .click(listbox.find('.smarthr-ui-ComboBox-selectButton').withText('option 1'))
     // 外側をクリックしてフォーカスを外す
     .click('body', { offsetX: 0, offsetY: 0 })
@@ -91,15 +94,16 @@ test('コンボボックスがフォーカスされていない時に選択解
 })
 
 test('新しいアイテムを追加できること', async (t) => {
-  const combobox = Selector('[data-test=multi-combobox-creatable]')
+  const wrapper = Selector('[data-test=multi-combobox-creatable]')
+  const combobox = wrapper.find('input[role=combobox]')
   const comboboxControls = ((await combobox.getAttribute('aria-controls')) || '').split(' ')
   const listbox = elementWithId(comboboxControls[0])
   const addButton = listbox.find('.smarthr-ui-ComboBox-addButton')
   const selectedItems = elementWithId(comboboxControls[1])
 
   await t
     // 新しいアイテムを追加できること
-    .click(combobox)
+    .click(wrapper)
     .typeText(combobox, 'test new item')
     .click(addButton)
     .expect(selectedItems.withText('test new item').exists)
@@ -109,61 +113,58 @@ test('新しいアイテムを追加できること', async (t) => {
     .expect(selectedItems.withText('test new item').exists)
     .notOk()
     // 新しく追加したアイテムがリストボックス内に存在すること
-    .click(combobox)
+    .click(wrapper)
     .expect(listbox.find('.smarthr-ui-ComboBox-selectButton').withText('test new item').exists)
     .ok()
 })
 
 test('deletable でないコンボボックスアイテムは削除できないこと', async (t) => {
-  const combobox = Selector('[data-test=multi-combobox-undeletable]')
+  const wrapper = Selector('[data-test=multi-combobox-undeletable]')
+  const combobox = wrapper.find('input[role=combobox]')
   const comboboxControls = ((await combobox.getAttribute('aria-controls')) || '').split(' ')
   const listbox = elementWithId(comboboxControls[0])
 
   await t
     // アイテムを選択
-    .click(combobox)
+    .click(wrapper)
     .click(listbox.find('.smarthr-ui-ComboBox-selectButton').withText('option 1'))
     // 削除ボタンが表示されていない
     .expect(
-      combobox
-        .parent(0)
-        .sibling()
+      wrapper
         .find('.smarthr-ui-MultiComboBox-selectedItem')
         .withText('option 1')
         .find('.smarthr-ui-MultiComboBox-deleteButton').exists,
     )
     .notOk()
     // Backspace キーで削除できないこと
     .pressKey('backspace')
-    .expect(
-      combobox
-        .parent(0)
-        .sibling()
-        .find('.smarthr-ui-MultiComboBox-selectedItem')
-        .withText('option 1').exists,
-    )
+    .expect(wrapper.find('.smarthr-ui-MultiComboBox-selectedItem').withText('option 1').exists)
     .ok()
 })
 
 test('disabled なコンボボックスではアイテムの選択と選択解除ができないこと', async (t) => {
-  const normalCombobox = Selector('[data-test=multi-combobox-default]')
+  const normal = Selector('[data-test=multi-combobox-default]')
+  const normalCombobox = normal.find('input[role=combobox]')
   const normalComboboxControls = ((await normalCombobox.getAttribute('aria-controls')) || '').split(
     ' ',
   )
   const normalListbox = elementWithId(normalComboboxControls[0])
 
-  const disabledCombobox = Selector('[data-test=multi-combobox-disabled]')
+  const disabled = Selector('[data-test=multi-combobox-disabled]')
+  const disabledCombobox = disabled.find('input[role=combobox]')
   const disabledComboboxControls = (
     (await disabledCombobox.getAttribute('aria-controls')) || ''
   ).split(' ')
+  const disabledListbox = elementWithId(disabledComboboxControls[0])
   const disabledSelectedItems = elementWithId(disabledComboboxControls[1])
 
   await t
-    // disabled なコンボボックスが不可視であること
-    .expect(disabledCombobox.visible)
+    // disabled なコンボボックスをクリックしてもリストボックスは表示されないこと
+    .click(disabled)
+    .expect(disabledListbox.visible)
     .notOk()
     // 有効なコンボボックスでアイテム選択
-    .click(normalCombobox)
+    .click(normal)
     .click(normalListbox.find('.smarthr-ui-ComboBox-selectButton').withText('option 1'))
     // disabled なコンボボックスの選択済みアイテムの削除ボタンが disabled であること
     .expect(
@@ -176,23 +177,22 @@ test('disabled なコンボボックスではアイテムの選択と選択解
 })
 
 test('キーボードで選択済みアイテムリストが操作できること', async (t) => {
-  const combobox = Selector('[data-test=multi-combobox-default]')
+  const wrapper = Selector('[data-test=multi-combobox-default]')
+  const combobox = wrapper.find('input[role=combobox]')
   const comboboxControls = ((await combobox.getAttribute('aria-controls')) || '').split(' ')
   const listbox = elementWithId(comboboxControls[0])
 
   const findOption = (label: string) =>
     listbox.find('.smarthr-ui-ComboBox-selectButton').withText(label)
   const findDeleteButton = (label: string) =>
-    combobox
-      .parent(0)
-      .sibling()
+    wrapper
       .find('.smarthr-ui-MultiComboBox-selectedItem')
       .withText(label)
       .find('.smarthr-ui-MultiComboBox-deleteButton')
 
   await t
     // アイテムを選択
-    .click(combobox)
+    .click(wrapper)
     .click(findOption('option 1'))
     .click(findOption('option 2'))
     .click(findOption('option 5'))
@@ -235,53 +235,32 @@ test('キーボードで選択済みアイテムリストが操作できるこ
     // 削除ボタンを操作できること
     .pressKey('left')
     .pressKey('enter')
-    .expect(
-      combobox
-        .parent(0)
-        .sibling()
-        .find('.smarthr-ui-MultiComboBox-selectedItem')
-        .withText('option 6').exists,
-    )
+    .expect(wrapper.find('.smarthr-ui-MultiComboBox-selectedItem').withText('option 5').exists)
     .notOk()
     .pressKey('left')
     .pressKey('backspace')
-    .expect(
-      combobox
-        .parent(0)
-        .sibling()
-        .find('.smarthr-ui-MultiComboBox-selectedItem')
-        .withText('option 3').exists,
-    )
+    .expect(wrapper.find('.smarthr-ui-MultiComboBox-selectedItem').withText('option 2').exists)
     .notOk()
     // テキストボックスにフォーカスがあたってる場合は Backspace で末尾のアイテムを削除できること
     .pressKey('backspace')
-    .expect(
-      combobox
-        .parent(0)
-        .sibling()
-        .find('.smarthr-ui-MultiComboBoxyy-selectedItem')
-        .withText('option 2').exists,
-    )
+    .expect(wrapper.find('.smarthr-ui-MultiComboBoxyy-selectedItem').withText('option 1').exists)
     .notOk()
     // Backspace によって削除した末尾アイテムはテキスト化されるが、選択状態になっているので再度 Backspace でテキストも削除できること
-    .expect(combobox.value)
+    .expect(wrapper.find('.smarthr-ui-MultiComboBox-input').value)
     .eql('option 1')
     .pressKey('backspace')
-    .expect(combobox.value)
+    .expect(wrapper.find('.smarthr-ui-MultiComboBox-input').value)
     .eql('')
 })
 
 test('キーボードでリストボックスが操作できること', async (t) => {
-  const combobox = Selector('[data-test=multi-combobox-default]')
-  const comboBoxSelected = combobox
-    .parent(0)
-    .sibling()
-    .find('.smarthr-ui-MultiComboBox-selectedItem')
+  const wrapper = Selector('[data-test=multi-combobox-default]')
+  const comboBoxSelected = wrapper.find('.smarthr-ui-MultiComboBox-selectedItem')
 
   await t
     // タブキーでフォーカスされたとき、テキストボックスがフォーカスされること
     .pressKey('tab')
-    .expect(combobox.focused)
+    .expect(wrapper.find('.smarthr-ui-MultiComboBox-input').focused)
     .ok()
     // アイテムが選択できること
     .pressKey('down')
@@ -304,12 +283,13 @@ test('キーボードでリストボックスが操作できること', async (t
 })
 
 test('部分的レンダリングしているアイテム数がスクロールにより順次増加すること', async (t) => {
-  const combobox = Selector('[data-test=multi-combobox-many]')
+  const wrapper = Selector('[data-test=multi-combobox-many]')
+  const combobox = wrapper.find('input[role=combobox]')
   const comboboxControls = ((await combobox.getAttribute('aria-controls')) || '').split(' ')
   const listbox = elementWithId(comboboxControls[0])
 
   await t
-    .click(combobox)
+    .click(wrapper)
     .expect(listbox.find('.smarthr-ui-ComboBox-selectButton').count)
     .eql(100)
     .scroll(listbox, 'bottom')