combobox.spec.js 58 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875876877878879880881882883884885886887888889890891892893894895896897898899900901902903904905906907908909910911912913914915916917918919920921922923924925926927928929930931932933934935936937938939940941942943944945946947948949950951952953954955956957958959960961962963964965966967968969970971972973974975976977978979980981982983984985986987988989990991992993994995996997998999100010011002100310041005100610071008100910101011101210131014101510161017101810191020102110221023102410251026102710281029103010311032103310341035103610371038103910401041104210431044104510461047104810491050105110521053105410551056105710581059106010611062106310641065106610671068106910701071107210731074107510761077107810791080108110821083108410851086108710881089109010911092109310941095109610971098109911001101110211031104110511061107110811091110111111121113111411151116111711181119112011211122112311241125112611271128112911301131113211331134113511361137113811391140114111421143114411451146114711481149115011511152115311541155115611571158115911601161116211631164116511661167116811691170117111721173117411751176117711781179118011811182118311841185118611871188118911901191119211931194119511961197119811991200120112021203120412051206120712081209121012111212121312141215121612171218121912201221122212231224122512261227122812291230123112321233123412351236123712381239124012411242124312441245124612471248124912501251125212531254125512561257125812591260126112621263126412651266126712681269127012711272127312741275127612771278127912801281128212831284128512861287128812891290129112921293129412951296129712981299130013011302130313041305130613071308130913101311131213131314131513161317131813191320132113221323132413251326132713281329133013311332133313341335133613371338133913401341134213431344134513461347134813491350135113521353135413551356135713581359136013611362136313641365136613671368136913701371137213731374137513761377137813791380138113821383138413851386138713881389139013911392139313941395139613971398139914001401140214031404140514061407140814091410141114121413141414151416141714181419142014211422142314241425142614271428142914301431143214331434143514361437143814391440144114421443144414451446144714481449145014511452145314541455145614571458145914601461146214631464146514661467146814691470147114721473147414751476147714781479148014811482148314841485148614871488148914901491149214931494149514961497149814991500150115021503150415051506150715081509151015111512151315141515151615171518151915201521152215231524152515261527152815291530153115321533153415351536153715381539154015411542154315441545154615471548154915501551155215531554155515561557155815591560
  1. import { beVisible, beHidden, haveAttribute, haveClasses, notHaveClasses, haveText, contain, notContain, html, notBeVisible, notHaveAttribute, notExist, haveFocus, test, haveValue, haveLength} from '../../../utils'
  2. test('it works with x-model',
  3. [html`
  4. <div
  5. x-data="{
  6. query: '',
  7. selected: null,
  8. people: [
  9. { id: 1, name: 'Wade Cooper' },
  10. { id: 2, name: 'Arlene Mccoy' },
  11. { id: 3, name: 'Devon Webb' },
  12. { id: 4, name: 'Tom Cook' },
  13. { id: 5, name: 'Tanya Fox', disabled: true },
  14. { id: 6, name: 'Hellen Schmidt' },
  15. { id: 7, name: 'Caroline Schultz' },
  16. { id: 8, name: 'Mason Heaney' },
  17. { id: 9, name: 'Claudie Smitham' },
  18. { id: 10, name: 'Emil Schaefer' },
  19. ],
  20. get filteredPeople() {
  21. return this.query === ''
  22. ? this.people
  23. : this.people.filter((person) => {
  24. return person.name.toLowerCase().includes(this.query.toLowerCase())
  25. })
  26. },
  27. }"
  28. >
  29. <div x-combobox x-model="selected">
  30. <label x-combobox:label>Select person</label>
  31. <div>
  32. <div>
  33. <input
  34. x-combobox:input
  35. :display-value="person => person.name"
  36. @change="query = $event.target.value"
  37. placeholder="Search..."
  38. />
  39. <button x-combobox:button>Toggle</button>
  40. </div>
  41. <div x-combobox:options>
  42. <ul>
  43. <template
  44. x-for="person in filteredPeople"
  45. :key="person.id"
  46. hidden
  47. >
  48. <li
  49. x-combobox:option
  50. :option="person.id"
  51. :value="person"
  52. :disabled="person.disabled"
  53. x-text="person.name"
  54. >
  55. </li>
  56. </template>
  57. </ul>
  58. <p x-show="filteredPeople.length == 0">No people match your query.</p>
  59. </div>
  60. </div>
  61. <article x-text="selected?.name"></article>
  62. </div>
  63. </div>
  64. `],
  65. ({ get }) => {
  66. get('ul').should(notBeVisible())
  67. get('button').click()
  68. get('ul').should(beVisible())
  69. get('button').click()
  70. get('ul').should(notBeVisible())
  71. get('button').click()
  72. get('[option="2"]').click()
  73. get('ul').should(notBeVisible())
  74. get('input').should(haveValue('Arlene Mccoy'))
  75. get('article').should(haveText('Arlene Mccoy'))
  76. get('button').click()
  77. get('ul').should(contain('Wade Cooper'))
  78. .should(contain('Arlene Mccoy'))
  79. .should(contain('Devon Webb'))
  80. get('[option="3"]').click()
  81. get('ul').should(notBeVisible())
  82. get('input').should(haveValue('Devon Webb'))
  83. get('article').should(haveText('Devon Webb'))
  84. get('button').click()
  85. get('ul').should(contain('Wade Cooper'))
  86. .should(contain('Arlene Mccoy'))
  87. .should(contain('Devon Webb'))
  88. get('[option="1"]').click()
  89. get('ul').should(notBeVisible())
  90. get('input').should(haveValue('Wade Cooper'))
  91. get('article').should(haveText('Wade Cooper'))
  92. },
  93. )
  94. test('it works with internal state',
  95. [html`
  96. <div
  97. x-data="{ people: [
  98. { id: 1, name: 'Wade Cooper' },
  99. { id: 2, name: 'Arlene Mccoy' },
  100. { id: 3, name: 'Devon Webb' },
  101. { id: 4, name: 'Tom Cook' },
  102. { id: 5, name: 'Tanya Fox', disabled: true },
  103. { id: 6, name: 'Hellen Schmidt' },
  104. { id: 7, name: 'Caroline Schultz' },
  105. { id: 8, name: 'Mason Heaney' },
  106. { id: 9, name: 'Claudie Smitham' },
  107. { id: 10, name: 'Emil Schaefer' },
  108. ]}"
  109. x-combobox
  110. >
  111. <label x-combobox:label>Assigned to</label>
  112. <input x-combobox:input :display-value="(person) => person.name" type="text">
  113. <button x-combobox:button x-text="$combobox.value ? $combobox.value.name : 'Select Person'"></button>
  114. <ul x-combobox:options>
  115. <template x-for="person in people" :key="person.id">
  116. <li
  117. :option="person.id"
  118. x-combobox:option
  119. :value="person"
  120. :disabled="person.disabled"
  121. >
  122. <span x-text="person.name"></span>
  123. </li>
  124. </template>
  125. </ul>
  126. </div>
  127. `],
  128. ({ get }) => {
  129. get('ul').should(notBeVisible())
  130. get('button')
  131. .should(haveText('Select Person'))
  132. .click()
  133. get('ul').should(beVisible())
  134. get('button').click()
  135. get('ul').should(notBeVisible())
  136. get('button').click()
  137. get('[option="2"]').click()
  138. get('ul').should(notBeVisible())
  139. get('button').should(haveText('Arlene Mccoy'))
  140. get('input').should(haveValue('Arlene Mccoy'))
  141. },
  142. )
  143. test('$combobox/$comboboxOption',
  144. [html`
  145. <div
  146. x-data="{ people: [
  147. { id: 1, name: 'Wade Cooper' },
  148. { id: 2, name: 'Arlene Mccoy' },
  149. { id: 3, name: 'Devon Webb' },
  150. { id: 4, name: 'Tom Cook' },
  151. { id: 5, name: 'Tanya Fox', disabled: true },
  152. { id: 6, name: 'Hellen Schmidt' },
  153. { id: 7, name: 'Caroline Schultz' },
  154. { id: 8, name: 'Mason Heaney' },
  155. { id: 9, name: 'Claudie Smitham' },
  156. { id: 10, name: 'Emil Schaefer' },
  157. ]}"
  158. x-combobox
  159. >
  160. <label x-combobox:label>Assigned to</label>
  161. <input x-combobox:input :display-value="(person) => person.name" type="text">
  162. <button x-combobox:button x-text="$combobox.value ? $combobox.value.name : 'Select Person'"></button>
  163. <p x-text="$combobox.activeIndex"></p>
  164. <article x-text="$combobox.activeOption?.name"></article>
  165. <ul x-combobox:options>
  166. <template x-for="person in people" :key="person.id">
  167. <li
  168. :option="person.id"
  169. x-combobox:option
  170. :value="person"
  171. :disabled="person.disabled"
  172. :class="{
  173. 'selected': $comboboxOption.isSelected,
  174. 'active': $comboboxOption.isActive,
  175. 'disabled': $comboboxOption.isDisabled,
  176. }"
  177. >
  178. <span x-text="person.name"></span>
  179. </li>
  180. </template>
  181. </ul>
  182. </div>
  183. `],
  184. ({ get }) => {
  185. get('article').should(haveText(''))
  186. get('[option="5"]').should(haveClasses(['disabled']))
  187. get('button')
  188. .should(haveText('Select Person'))
  189. .click()
  190. get('[option="1"]').should(haveClasses(['active']))
  191. get('input').type('{downarrow}')
  192. get('article').should(haveText('Arlene Mccoy'))
  193. get('p').should(haveText('1'))
  194. get('[option="2"]').should(haveClasses(['active']))
  195. get('button').should(haveText('Select Person'))
  196. get('[option="2"]').click()
  197. get('button').should(haveText('Arlene Mccoy'))
  198. get('[option="2"]').should(haveClasses(['selected']))
  199. },
  200. )
  201. test('"name" prop',
  202. [html`
  203. <div
  204. x-data="{ people: [
  205. { id: 1, name: 'Wade Cooper' },
  206. { id: 2, name: 'Arlene Mccoy' },
  207. { id: 3, name: 'Devon Webb' },
  208. { id: 4, name: 'Tom Cook' },
  209. { id: 5, name: 'Tanya Fox', disabled: true },
  210. { id: 6, name: 'Hellen Schmidt' },
  211. { id: 7, name: 'Caroline Schultz' },
  212. { id: 8, name: 'Mason Heaney' },
  213. { id: 9, name: 'Claudie Smitham' },
  214. { id: 10, name: 'Emil Schaefer' },
  215. ]}"
  216. x-combobox
  217. name="person"
  218. >
  219. <label x-combobox:label>Assigned to</label>
  220. <input x-combobox:input :display-value="(person) => person.name" type="text">
  221. <button x-combobox:button x-text="$combobox.value ? $combobox.value : 'Select Person'"></button>
  222. <ul x-combobox:options>
  223. <template x-for="person in people" :key="person.id">
  224. <li
  225. :option="person.id"
  226. x-combobox:option
  227. :value="person.id"
  228. :disabled="person.disabled"
  229. :class="{
  230. 'selected': $comboboxOption.isSelected,
  231. 'active': $comboboxOption.isActive,
  232. }"
  233. >
  234. <span x-text="person.name"></span>
  235. </li>
  236. </template>
  237. </ul>
  238. </div>
  239. `],
  240. ({ get }) => {
  241. get('input').should(haveAttribute('value', 'null'))
  242. get('button').click()
  243. get('input').should(haveAttribute('value', 'null'))
  244. get('[option="2"]').click()
  245. get('input').should(beHidden())
  246. .should(haveAttribute('name', 'person'))
  247. .should(haveAttribute('value', '2'))
  248. .should(haveAttribute('type', 'hidden'))
  249. get('button').click()
  250. get('[option="4"]').click()
  251. get('input').should(beHidden())
  252. .should(haveAttribute('name', 'person'))
  253. .should(haveAttribute('value', '4'))
  254. .should(haveAttribute('type', 'hidden'))
  255. },
  256. );
  257. test('Preserves currently active keyboard selection while options change from searching even if there\'s a selected option in the filtered results',
  258. [html`
  259. <div
  260. x-data="{
  261. query: '',
  262. selected: null,
  263. people: [
  264. { id: 1, name: 'Wade Cooper' },
  265. { id: 2, name: 'Arlene Mccoy' },
  266. { id: 3, name: 'Devon Webb' },
  267. { id: 4, name: 'Tom Cook' },
  268. { id: 5, name: 'Tanya Fox', disabled: true },
  269. { id: 6, name: 'Hellen Schmidt' },
  270. { id: 7, name: 'Caroline Schultz' },
  271. { id: 8, name: 'Mason Heaney' },
  272. { id: 9, name: 'Claudie Smitham' },
  273. { id: 10, name: 'Emil Schaefer' },
  274. ],
  275. get filteredPeople() {
  276. return this.query === ''
  277. ? this.people
  278. : this.people.filter((person) => {
  279. return person.name.toLowerCase().includes(this.query.toLowerCase())
  280. })
  281. },
  282. }"
  283. >
  284. <div x-combobox x-model="selected">
  285. <label x-combobox:label>Select person</label>
  286. <div>
  287. <div>
  288. <input
  289. x-combobox:input
  290. :display-value="person => person.name"
  291. @change="query = $event.target.value"
  292. placeholder="Search..."
  293. />
  294. <button x-combobox:button>Toggle</button>
  295. </div>
  296. <div x-combobox:options>
  297. <ul>
  298. <template
  299. x-for="person in filteredPeople"
  300. :key="person.id"
  301. hidden
  302. >
  303. <li
  304. x-combobox:option
  305. :option="person.id"
  306. :value="person"
  307. :disabled="person.disabled"
  308. >
  309. <span x-text="person.name"></span>
  310. <span x-show="$comboboxOption.isActive">*</span>
  311. <span x-show="$comboboxOption.isSelected">x</span>
  312. </li>
  313. </template>
  314. </ul>
  315. <p x-show="filteredPeople.length == 0">No people match your query.</p>
  316. </div>
  317. </div>
  318. </div>
  319. <article>lorem ipsum</article>
  320. </div>
  321. `],
  322. ({ get }) => {
  323. get('input').should(haveText(''))
  324. get('button').click()
  325. get('[option="3"]').click()
  326. cy.wait(100)
  327. get('input').type('{selectAll}{backspace}')
  328. cy.wait(100)
  329. get('input').type('{downArrow}')
  330. cy.wait(100)
  331. get('[option="3"]').should(contain('*'))
  332. get('input').type('{upArrow}{upArrow}')
  333. cy.wait(100)
  334. get('[option="1"]').should(contain('*'))
  335. cy.wait(100)
  336. get('input').type('d')
  337. get('input').trigger('change')
  338. cy.wait(100)
  339. get('[option="1"]').should(contain('*'))
  340. },
  341. );
  342. test('Ignore active selection while options change if not selected by a keyboard event',
  343. [html`
  344. <div
  345. x-data="{
  346. query: '',
  347. selected: null,
  348. people: [
  349. { id: 1, name: 'Wade Cooper' },
  350. { id: 2, name: 'Arlene Mccoy' },
  351. { id: 3, name: 'Devon Webb' },
  352. { id: 4, name: 'Tom Cook' },
  353. { id: 5, name: 'Tanya Fox', disabled: true },
  354. { id: 6, name: 'Hellen Schmidt' },
  355. { id: 7, name: 'Caroline Schultz' },
  356. { id: 8, name: 'Mason Heaney' },
  357. { id: 9, name: 'Claudie Smitham' },
  358. { id: 10, name: 'Emil Schaefer' },
  359. ],
  360. get filteredPeople() {
  361. return this.query === ''
  362. ? this.people
  363. : this.people.filter((person) => {
  364. return person.name.toLowerCase().includes(this.query.toLowerCase())
  365. })
  366. },
  367. }"
  368. >
  369. <div x-combobox x-model="selected">
  370. <label x-combobox:label>Select person</label>
  371. <div>
  372. <div>
  373. <input
  374. x-combobox:input
  375. :display-value="person => person.name"
  376. @change="query = $event.target.value"
  377. placeholder="Search..."
  378. />
  379. <button x-combobox:button>Toggle</button>
  380. </div>
  381. <div x-combobox:options>
  382. <ul>
  383. <template
  384. x-for="person in filteredPeople"
  385. :key="person.id"
  386. hidden
  387. >
  388. <li
  389. x-combobox:option
  390. :option="person.id"
  391. :value="person"
  392. :disabled="person.disabled"
  393. >
  394. <span x-text="person.name"></span>
  395. <span x-show="$comboboxOption.isActive">*</span>
  396. <span x-show="$comboboxOption.isSelected">x</span>
  397. </li>
  398. </template>
  399. </ul>
  400. <p x-show="filteredPeople.length == 0">No people match your query.</p>
  401. </div>
  402. </div>
  403. </div>
  404. <article>lorem ipsum</article>
  405. </div>
  406. `],
  407. ({ get }) => {
  408. get('input').should(haveText(''))
  409. get('button').click()
  410. get('[option="1"]').should(contain('*'))
  411. get('input').type('t')
  412. get('input').trigger('change')
  413. get('[option="4"]').should(contain('*'))
  414. get('input').type('{backspace}')
  415. get('input').trigger('change')
  416. get('[option="1"]').should(contain('*'))
  417. },
  418. );
  419. test('"name" prop with object value',
  420. [html`
  421. <div
  422. x-data="{ people: [
  423. { id: 1, name: 'Wade Cooper' },
  424. { id: 2, name: 'Arlene Mccoy' },
  425. { id: 3, name: 'Devon Webb' },
  426. { id: 4, name: 'Tom Cook' },
  427. { id: 5, name: 'Tanya Fox', disabled: true },
  428. { id: 6, name: 'Hellen Schmidt' },
  429. { id: 7, name: 'Caroline Schultz' },
  430. { id: 8, name: 'Mason Heaney' },
  431. { id: 9, name: 'Claudie Smitham' },
  432. { id: 10, name: 'Emil Schaefer' },
  433. ]}"
  434. x-combobox
  435. name="person"
  436. >
  437. <label x-combobox:label>Assigned to</label>
  438. <input x-combobox:input :display-value="(person) => person.name" type="text">
  439. <button x-combobox:button x-text="$combobox.value ? $combobox.value.name : 'Select Person'"></button>
  440. <ul x-combobox:options>
  441. <template x-for="person in people" :key="person.id">
  442. <li
  443. :option="person.id"
  444. x-combobox:option
  445. :value="person"
  446. :disabled="person.disabled"
  447. :class="{
  448. 'selected': $comboboxOption.isSelected,
  449. 'active': $comboboxOption.isActive,
  450. }"
  451. >
  452. <span x-text="person.name"></span>
  453. </li>
  454. </template>
  455. </ul>
  456. </div>
  457. `],
  458. ({ get }) => {
  459. get('input[name="person"]').should(haveAttribute('value', 'null'))
  460. get('button').click()
  461. get('[name="person[id]"]').should(notExist())
  462. get('[option="2"]').click()
  463. get('input[name="person"]').should(notExist())
  464. get('[name="person[id]"]').should(beHidden())
  465. .should(haveAttribute('value', '2'))
  466. .should(haveAttribute('type', 'hidden'))
  467. get('[name="person[name]"]').should(beHidden())
  468. .should(haveAttribute('value', 'Arlene Mccoy'))
  469. .should(haveAttribute('type', 'hidden'))
  470. get('button').click()
  471. get('[option="4"]').click()
  472. get('[name="person[id]"]').should(beHidden())
  473. .should(haveAttribute('value', '4'))
  474. .should(haveAttribute('type', 'hidden'))
  475. get('[name="person[name]"]').should(beHidden())
  476. .should(haveAttribute('value', 'Tom Cook'))
  477. .should(haveAttribute('type', 'hidden'))
  478. },
  479. );
  480. test('"default-value" prop',
  481. [html`
  482. <div
  483. x-data="{ people: [
  484. { id: 1, name: 'Wade Cooper' },
  485. { id: 2, name: 'Arlene Mccoy' },
  486. { id: 3, name: 'Devon Webb' },
  487. { id: 4, name: 'Tom Cook' },
  488. { id: 5, name: 'Tanya Fox', disabled: true },
  489. { id: 6, name: 'Hellen Schmidt' },
  490. { id: 7, name: 'Caroline Schultz' },
  491. { id: 8, name: 'Mason Heaney' },
  492. { id: 9, name: 'Claudie Smitham' },
  493. { id: 10, name: 'Emil Schaefer' },
  494. ]}"
  495. x-combobox
  496. name="person"
  497. default-value="2"
  498. >
  499. <label x-combobox:label>Assigned to</label>
  500. <input x-combobox:input :display-value="(person) => person.name" type="text">
  501. <button x-combobox:button x-text="$combobox.value ? $combobox.value : 'Select Person'"></button>
  502. <ul x-combobox:options>
  503. <template x-for="person in people" :key="person.id">
  504. <li
  505. :option="person.id"
  506. x-combobox:option
  507. :value="person.id"
  508. :disabled="person.disabled"
  509. :class="{
  510. 'selected': $comboboxOption.isSelected,
  511. 'active': $comboboxOption.isActive,
  512. }"
  513. >
  514. <span x-text="person.name"></span>
  515. </li>
  516. </template>
  517. </ul>
  518. </div>
  519. `],
  520. ({ get }) => {
  521. get('input[name="person"]').should(beHidden())
  522. .should(haveAttribute('value', '2'))
  523. .should(haveAttribute('type', 'hidden'))
  524. },
  525. );
  526. test('"multiple" prop',
  527. [html`
  528. <div
  529. x-data="{
  530. people: [
  531. { id: 1, name: 'Wade Cooper' },
  532. { id: 2, name: 'Arlene Mccoy' },
  533. { id: 3, name: 'Devon Webb' },
  534. { id: 4, name: 'Tom Cook' },
  535. { id: 5, name: 'Tanya Fox', disabled: true },
  536. { id: 6, name: 'Hellen Schmidt' },
  537. { id: 7, name: 'Caroline Schultz' },
  538. { id: 8, name: 'Mason Heaney' },
  539. { id: 9, name: 'Claudie Smitham' },
  540. { id: 10, name: 'Emil Schaefer' },
  541. ]
  542. }"
  543. x-combobox
  544. multiple
  545. >
  546. <label x-combobox:label>Assigned to</label>
  547. <input x-combobox:input :display-value="(person) => person.name" type="text">
  548. <button x-combobox:button x-text="$combobox.value ? $combobox.value.join(',') : 'Select People'"></button>
  549. <ul x-combobox:options>
  550. <template x-for="person in people" :key="person.id">
  551. <li
  552. :option="person.id"
  553. x-combobox:option
  554. :value="person.id"
  555. :disabled="person.disabled"
  556. :class="{
  557. 'selected': $comboboxOption.isSelected,
  558. 'active': $comboboxOption.isActive,
  559. }"
  560. >
  561. <span x-text="person.name"></span>
  562. </li>
  563. </template>
  564. </ul>
  565. </div>
  566. `],
  567. ({ get }) => {
  568. get('button').click()
  569. get('[option="2"]').click()
  570. get('ul').should(beVisible())
  571. get('button').should(haveText('2'))
  572. get('[option="4"]').click()
  573. get('button').should(haveText('2,4'))
  574. get('ul').should(beVisible())
  575. get('[option="4"]').click()
  576. get('button').should(haveText('2'))
  577. get('ul').should(beVisible())
  578. get('input').type('Tom')
  579. get('input').type('{enter}')
  580. get('button').should(haveText('2,4'))
  581. // input field doesn't reset when a new option is selected
  582. get('input').should(haveValue('Tom'))
  583. },
  584. );
  585. test('"multiple" and "name" props together',
  586. [html`
  587. <div
  588. x-data="{
  589. people: [
  590. { id: 1, name: 'Wade Cooper' },
  591. { id: 2, name: 'Arlene Mccoy' },
  592. { id: 3, name: 'Devon Webb' },
  593. { id: 4, name: 'Tom Cook' },
  594. { id: 5, name: 'Tanya Fox', disabled: true },
  595. { id: 6, name: 'Hellen Schmidt' },
  596. { id: 7, name: 'Caroline Schultz' },
  597. { id: 8, name: 'Mason Heaney' },
  598. { id: 9, name: 'Claudie Smitham' },
  599. { id: 10, name: 'Emil Schaefer' },
  600. ]
  601. }"
  602. x-combobox
  603. multiple
  604. name="people"
  605. >
  606. <label x-combobox:label>Assigned to</label>
  607. <input x-combobox:input :display-value="(person) => person.name" type="text">
  608. <button x-combobox:button x-text="$combobox.value ? $combobox.value.map(p => p.id).join(',') : 'Select People'"></button>
  609. <ul x-combobox:options>
  610. <template x-for="person in people" :key="person.id">
  611. <li
  612. :option="person.id"
  613. x-combobox:option
  614. :value="person"
  615. :disabled="person.disabled"
  616. :class="{
  617. 'selected': $comboboxOption.isSelected,
  618. 'active': $comboboxOption.isActive,
  619. }"
  620. >
  621. <span x-text="person.name"></span>
  622. </li>
  623. </template>
  624. </ul>
  625. </div>
  626. `],
  627. ({ get }) => {
  628. // get('input[name="people"]').should(haveAttribute('value', 'null'))
  629. get('button').click()
  630. get('[name="people[0][id]"]').should(notExist())
  631. get('[option="2"]').click()
  632. get('ul').should(beVisible())
  633. get('button').should(haveText('2'))
  634. get('input[name="people"]').should(notExist())
  635. get('[name="people[0][id]"]').should(beHidden())
  636. .should(haveAttribute('value', '2'))
  637. .should(haveAttribute('type', 'hidden'))
  638. get('[name="people[0][name]"]').should(beHidden())
  639. .should(haveAttribute('value', 'Arlene Mccoy'))
  640. .should(haveAttribute('type', 'hidden'))
  641. get('[option="4"]').click()
  642. get('[name="people[0][id]"]').should(beHidden())
  643. .should(haveAttribute('value', '2'))
  644. .should(haveAttribute('type', 'hidden'))
  645. get('[name="people[0][name]"]').should(beHidden())
  646. .should(haveAttribute('value', 'Arlene Mccoy'))
  647. .should(haveAttribute('type', 'hidden'))
  648. get('[name="people[1][id]"]').should(beHidden())
  649. .should(haveAttribute('value', '4'))
  650. .should(haveAttribute('type', 'hidden'))
  651. get('[name="people[1][name]"]').should(beHidden())
  652. .should(haveAttribute('value', 'Tom Cook'))
  653. .should(haveAttribute('type', 'hidden'))
  654. get('button').should(haveText('2,4'))
  655. get('ul').should(beVisible())
  656. get('[option="4"]').click()
  657. get('[name="people[0][id]"]').should(beHidden())
  658. .should(haveAttribute('value', '2'))
  659. .should(haveAttribute('type', 'hidden'))
  660. get('[name="people[0][name]"]').should(beHidden())
  661. .should(haveAttribute('value', 'Arlene Mccoy'))
  662. .should(haveAttribute('type', 'hidden'))
  663. get('[name="people[1][id]"]').should(notExist())
  664. get('[name="people[1][name]"]').should(notExist())
  665. get('button').should(haveText('2'))
  666. get('ul').should(beVisible())
  667. },
  668. );
  669. test('"by" prop with string value',
  670. [html`
  671. <div
  672. x-data="{
  673. people: [
  674. { id: 1, name: 'Wade Cooper' },
  675. { id: 2, name: 'Arlene Mccoy' },
  676. { id: 3, name: 'Devon Webb' },
  677. { id: 4, name: 'Tom Cook' },
  678. { id: 5, name: 'Tanya Fox', disabled: true },
  679. { id: 6, name: 'Hellen Schmidt' },
  680. { id: 7, name: 'Caroline Schultz' },
  681. { id: 8, name: 'Mason Heaney' },
  682. { id: 9, name: 'Claudie Smitham' },
  683. { id: 10, name: 'Emil Schaefer' },
  684. ]
  685. }"
  686. x-combobox
  687. by="id"
  688. >
  689. <label x-combobox:label>Assigned to</label>
  690. <input x-combobox:input :display-value="(person) => person" type="text">
  691. <button x-combobox:button x-text="$combobox.value ? $combobox.value : 'Select People'"></button>
  692. <ul x-combobox:options>
  693. <template x-for="person in people" :key="person.id">
  694. <li
  695. :option="person.id"
  696. x-combobox:option
  697. :value="person.id"
  698. :disabled="person.disabled"
  699. :class="{
  700. 'selected': $comboboxOption.isSelected,
  701. 'active': $comboboxOption.isActive,
  702. }"
  703. >
  704. <span x-text="person.name"></span>
  705. </li>
  706. </template>
  707. </ul>
  708. </div>
  709. `],
  710. ({ get }) => {
  711. get('ul').should(notBeVisible())
  712. get('button').click()
  713. get('ul').should(beVisible())
  714. get('button').click()
  715. get('ul').should(notBeVisible())
  716. get('button').click()
  717. get('[option="2"]').click()
  718. get('ul').should(notBeVisible())
  719. get('input').should(haveValue('2'))
  720. get('button').should(haveText('2'))
  721. get('button').click()
  722. get('ul').should(contain('Wade Cooper'))
  723. .should(contain('Arlene Mccoy'))
  724. .should(contain('Devon Webb'))
  725. get('[option="3"]').click()
  726. get('ul').should(notBeVisible())
  727. get('input').should(haveValue('3'))
  728. get('button').should(haveText('3'))
  729. get('button').click()
  730. get('ul').should(contain('Wade Cooper'))
  731. .should(contain('Arlene Mccoy'))
  732. .should(contain('Devon Webb'))
  733. get('[option="1"]').click()
  734. get('ul').should(notBeVisible())
  735. get('input').should(haveValue('1'))
  736. get('button').should(haveText('1'))
  737. },
  738. );
  739. test('"by" prop with string value and "nullable"',
  740. [html`
  741. <div
  742. x-data="{
  743. people: [
  744. { id: 1, name: 'Wade Cooper' },
  745. { id: 2, name: 'Arlene Mccoy' },
  746. { id: 3, name: 'Devon Webb' },
  747. { id: 4, name: 'Tom Cook' },
  748. { id: 5, name: 'Tanya Fox', disabled: true },
  749. { id: 6, name: 'Hellen Schmidt' },
  750. { id: 7, name: 'Caroline Schultz' },
  751. { id: 8, name: 'Mason Heaney' },
  752. { id: 9, name: 'Claudie Smitham' },
  753. { id: 10, name: 'Emil Schaefer' },
  754. ]
  755. }"
  756. x-combobox
  757. by="id"
  758. default-value="5"
  759. nullable
  760. >
  761. <label x-combobox:label>Assigned to</label>
  762. <input x-combobox:input :display-value="(person) => person?.name" type="text">
  763. <button x-combobox:button x-text="$combobox.value ? $combobox.value.name : 'Select People'"></button>
  764. <ul x-combobox:options>
  765. <template x-for="person in people" :key="person.id">
  766. <li
  767. :option="person.id"
  768. x-combobox:option
  769. :value="person"
  770. :disabled="person.disabled"
  771. :class="{
  772. 'selected': $comboboxOption.isSelected,
  773. 'active': $comboboxOption.isActive,
  774. }"
  775. >
  776. <span x-text="person.name"></span>
  777. </li>
  778. </template>
  779. </ul>
  780. </div>
  781. `],
  782. ({ get }) => {
  783. get('ul').should(notBeVisible())
  784. get('button').click()
  785. get('ul').should(beVisible())
  786. get('button').click()
  787. get('ul').should(notBeVisible())
  788. get('button').click()
  789. get('[option="2"]').click()
  790. get('ul').should(notBeVisible())
  791. get('input').should(haveValue('Arlene Mccoy'))
  792. get('button').should(haveText('Arlene Mccoy'))
  793. get('button').click()
  794. get('ul').should(contain('Wade Cooper'))
  795. .should(contain('Arlene Mccoy'))
  796. .should(contain('Devon Webb'))
  797. get('[option="3"]').click()
  798. get('ul').should(notBeVisible())
  799. get('input').should(haveValue('Devon Webb'))
  800. get('button').should(haveText('Devon Webb'))
  801. get('button').click()
  802. get('ul').should(contain('Wade Cooper'))
  803. .should(contain('Arlene Mccoy'))
  804. .should(contain('Devon Webb'))
  805. get('[option="1"]').click()
  806. get('ul').should(notBeVisible())
  807. get('input').should(haveValue('Wade Cooper'))
  808. get('button').should(haveText('Wade Cooper'))
  809. },
  810. );
  811. test('keyboard controls',
  812. [html`
  813. <div
  814. x-data="{ active: null, people: [
  815. { id: 1, name: 'Wade Cooper' },
  816. { id: 2, name: 'Arlene Mccoy' },
  817. { id: 3, name: 'Devon Webb', disabled: true },
  818. { id: 4, name: 'Tom Cook' },
  819. { id: 5, name: 'Tanya Fox', disabled: true },
  820. { id: 6, name: 'Hellen Schmidt' },
  821. { id: 7, name: 'Caroline Schultz' },
  822. { id: 8, name: 'Mason Heaney' },
  823. { id: 9, name: 'Claudie Smitham' },
  824. { id: 10, name: 'Emil Schaefer' },
  825. ]}"
  826. x-combobox
  827. x-model="active"
  828. >
  829. <label x-combobox:label>Assigned to</label>
  830. <input x-combobox:input :display-value="(person) => person.name" type="text">
  831. <button x-combobox:button x-text="active ? active.name : 'Select Person'"></button>
  832. <ul x-combobox:options options>
  833. <template x-for="person in people" :key="person.id">
  834. <li
  835. :option="person.id"
  836. x-combobox:option
  837. :value="person"
  838. :disabled="person.disabled"
  839. :class="{
  840. 'selected': $comboboxOption.isSelected,
  841. 'active': $comboboxOption.isActive,
  842. }"
  843. >
  844. <span x-text="person.name"></span>
  845. </li>
  846. </template>
  847. </ul>
  848. </div>
  849. `],
  850. ({ get }) => {
  851. get('.active').should(notExist())
  852. get('button').click()
  853. get('[options]')
  854. .should(beVisible())
  855. get('input').should(haveFocus())
  856. get('[option="1"]')
  857. .should(haveClasses(['active']))
  858. get('input')
  859. .type('{downarrow}')
  860. get('[option="2"]')
  861. .should(haveClasses(['active']))
  862. get('input')
  863. .type('{downarrow}')
  864. get('[option="4"]')
  865. .should(haveClasses(['active']))
  866. get('input')
  867. .type('{uparrow}')
  868. get('[option="2"]')
  869. .should(haveClasses(['active']))
  870. get('input')
  871. .type('{home}')
  872. get('[option="1"]')
  873. .should(haveClasses(['active']))
  874. get('input')
  875. .type('{end}')
  876. get('[option="10"]')
  877. .should(haveClasses(['active']))
  878. get('input')
  879. .type('{pageUp}')
  880. get('[option="1"]')
  881. .should(haveClasses(['active']))
  882. get('input')
  883. .type('{pageDown}')
  884. get('[option="10"]')
  885. .should(haveClasses(['active']))
  886. get('input')
  887. .tab()
  888. .should(haveFocus())
  889. get('[options]')
  890. .should(beVisible())
  891. get('input')
  892. .type('{esc}')
  893. get('[options]')
  894. .should(notBeVisible())
  895. },
  896. )
  897. test('changing value manually changes internal state',
  898. [html`
  899. <div
  900. x-data="{ active: null, people: [
  901. { id: 1, name: 'Wade Cooper' },
  902. { id: 2, name: 'Arlene Mccoy' },
  903. { id: 3, name: 'Devon Webb', disabled: true },
  904. { id: 4, name: 'Tom Cook' },
  905. { id: 5, name: 'Tanya Fox', disabled: true },
  906. { id: 6, name: 'Hellen Schmidt' },
  907. { id: 7, name: 'Caroline Schultz' },
  908. { id: 8, name: 'Mason Heaney' },
  909. { id: 9, name: 'Claudie Smitham' },
  910. { id: 10, name: 'Emil Schaefer' },
  911. ]}"
  912. x-combobox
  913. x-model="active"
  914. >
  915. <label x-combobox:label>Assigned to</label>
  916. <input x-combobox:input :display-value="(person) => person.name" type="text">
  917. <button toggle x-combobox:button x-text="$combobox.value ? $combobox.value : 'Select Person'"></button>
  918. <button select-tim @click="active = 4">Select Tim</button>
  919. <ul x-combobox:options options>
  920. <template x-for="person in people" :key="person.id">
  921. <li
  922. :option="person.id"
  923. x-combobox:option
  924. :value="person.id"
  925. :disabled="person.disabled"
  926. :class="{
  927. 'selected': $comboboxOption.isSelected,
  928. 'active': $comboboxOption.isActive,
  929. }"
  930. >
  931. <span x-text="person.name"></span>
  932. </li>
  933. </template>
  934. </ul>
  935. </div>
  936. `],
  937. ({ get }) => {
  938. get('[select-tim]').click()
  939. get('[option="4"]').should(haveClasses(['selected']))
  940. get('[option="1"]').should(notHaveClasses(['selected']))
  941. get('[toggle]').should(haveText('4'))
  942. },
  943. )
  944. test('has accessibility attributes',
  945. [html`
  946. <div
  947. x-data="{ active: null, people: [
  948. { id: 1, name: 'Wade Cooper' },
  949. { id: 2, name: 'Arlene Mccoy' },
  950. { id: 3, name: 'Devon Webb', disabled: true },
  951. { id: 4, name: 'Tom Cook' },
  952. { id: 5, name: 'Tanya Fox', disabled: true },
  953. { id: 6, name: 'Hellen Schmidt' },
  954. { id: 7, name: 'Caroline Schultz' },
  955. { id: 8, name: 'Mason Heaney' },
  956. { id: 9, name: 'Claudie Smitham' },
  957. { id: 10, name: 'Emil Schaefer' },
  958. ]}"
  959. x-combobox
  960. x-model="active"
  961. >
  962. <label x-combobox:label>Assigned to</label>
  963. <input x-combobox:input :display-value="(person) => person.name" type="text">
  964. <button x-combobox:button x-text="active ? active.name : 'Select Person'"></button>
  965. <ul x-combobox:options options>
  966. <template x-for="person in people" :key="person.id">
  967. <li
  968. :option="person.id"
  969. x-combobox:option
  970. :value="person"
  971. :disabled="person.disabled"
  972. :class="{
  973. 'selected': $comboboxOption.isSelected,
  974. 'active': $comboboxOption.isActive,
  975. }"
  976. >
  977. <span x-text="person.name"></span>
  978. </li>
  979. </template>
  980. </ul>
  981. </div>
  982. `],
  983. ({ get }) => {
  984. get('input')
  985. .should(haveAttribute('aria-expanded', 'false'))
  986. get('button')
  987. .should(haveAttribute('aria-haspopup', 'true'))
  988. .should(haveAttribute('aria-labelledby', 'alpine-combobox-label-1 alpine-combobox-button-1'))
  989. .should(haveAttribute('aria-expanded', 'false'))
  990. .should(notHaveAttribute('aria-controls'))
  991. .should(haveAttribute('id', 'alpine-combobox-button-1'))
  992. .should(haveAttribute('tabindex', '-1'))
  993. .click()
  994. .should(haveAttribute('aria-expanded', 'true'))
  995. .should(haveAttribute('aria-controls', 'alpine-combobox-options-1'))
  996. get('[options]')
  997. .should(haveAttribute('role', 'listbox'))
  998. .should(haveAttribute('id', 'alpine-combobox-options-1'))
  999. .should(haveAttribute('aria-labelledby', 'alpine-combobox-label-1'))
  1000. get('[option="1"]')
  1001. .should(haveAttribute('role', 'option'))
  1002. .should(haveAttribute('id', 'alpine-combobox-option-1'))
  1003. .should(haveAttribute('tabindex', '-1'))
  1004. .should(haveAttribute('aria-selected', 'false'))
  1005. get('[option="2"]')
  1006. .should(haveAttribute('role', 'option'))
  1007. .should(haveAttribute('id', 'alpine-combobox-option-2'))
  1008. .should(haveAttribute('tabindex', '-1'))
  1009. .should(haveAttribute('aria-selected', 'false'))
  1010. get('input')
  1011. .should(haveAttribute('role', 'combobox'))
  1012. .should(haveAttribute('aria-autocomplete', 'list'))
  1013. .should(haveAttribute('tabindex', '0'))
  1014. .should(haveAttribute('aria-expanded', 'true'))
  1015. .should(haveAttribute('aria-labelledby', 'alpine-combobox-label-1'))
  1016. .should(haveAttribute('aria-controls', 'alpine-combobox-options-1'))
  1017. .should(haveAttribute('aria-activedescendant', 'alpine-combobox-option-1'))
  1018. .type('{downarrow}')
  1019. .should(haveAttribute('aria-activedescendant', 'alpine-combobox-option-2'))
  1020. .type('{enter}')
  1021. get('[option="2"]')
  1022. .should(haveAttribute('aria-selected', 'true'))
  1023. get('[option="1"]')
  1024. .should(haveAttribute('aria-selected', 'false'))
  1025. },
  1026. )
  1027. test('"static" prop',
  1028. [html`
  1029. <div
  1030. x-data="{ active: null, show: false, people: [
  1031. { id: 1, name: 'Wade Cooper' },
  1032. { id: 2, name: 'Arlene Mccoy' },
  1033. { id: 3, name: 'Devon Webb' },
  1034. { id: 4, name: 'Tom Cook' },
  1035. { id: 5, name: 'Tanya Fox', disabled: true },
  1036. { id: 6, name: 'Hellen Schmidt' },
  1037. { id: 7, name: 'Caroline Schultz' },
  1038. { id: 8, name: 'Mason Heaney' },
  1039. { id: 9, name: 'Claudie Smitham' },
  1040. { id: 10, name: 'Emil Schaefer' },
  1041. ]}"
  1042. x-combobox
  1043. x-model="active"
  1044. >
  1045. <label x-combobox:label>Assigned to</label>
  1046. <input x-combobox:input :display-value="(person) => person.name" type="text">
  1047. <button normal-toggle x-combobox:button x-text="active ? active.name : 'Select Person'"></button>
  1048. <button real-toggle @click="show = ! show">Toggle</button>
  1049. <ul x-combobox:options x-show="show" static>
  1050. <template x-for="person in people" :key="person.id">
  1051. <li
  1052. :option="person.id"
  1053. x-combobox:option
  1054. :value="person"
  1055. :disabled="person.disabled"
  1056. >
  1057. <span x-text="person.name"></span>
  1058. </li>
  1059. </template>
  1060. </ul>
  1061. </div>
  1062. `],
  1063. ({ get }) => {
  1064. get('ul').should(notBeVisible())
  1065. get('[normal-toggle]')
  1066. .should(haveText('Select Person'))
  1067. .click()
  1068. get('ul').should(notBeVisible())
  1069. get('[real-toggle]').click()
  1070. get('ul').should(beVisible())
  1071. get('[option="2"]').click()
  1072. get('ul').should(beVisible())
  1073. get('[normal-toggle]').should(haveText('Arlene Mccoy'))
  1074. },
  1075. )
  1076. test('input reset',
  1077. [html`
  1078. <div
  1079. x-data="{
  1080. query: '',
  1081. selected: null,
  1082. people: [
  1083. { id: 1, name: 'Wade Cooper' },
  1084. { id: 2, name: 'Arlene Mccoy' },
  1085. { id: 3, name: 'Devon Webb' },
  1086. { id: 4, name: 'Tom Cook' },
  1087. { id: 5, name: 'Tanya Fox', disabled: true },
  1088. { id: 6, name: 'Hellen Schmidt' },
  1089. { id: 7, name: 'Caroline Schultz' },
  1090. { id: 8, name: 'Mason Heaney' },
  1091. { id: 9, name: 'Claudie Smitham' },
  1092. { id: 10, name: 'Emil Schaefer' },
  1093. ],
  1094. get filteredPeople() {
  1095. return this.query === ''
  1096. ? this.people
  1097. : this.people.filter((person) => {
  1098. return person.name.toLowerCase().includes(this.query.toLowerCase())
  1099. })
  1100. },
  1101. }"
  1102. >
  1103. <div x-combobox x-model="selected">
  1104. <label x-combobox:label>Select person</label>
  1105. <div>
  1106. <div>
  1107. <input
  1108. x-combobox:input
  1109. :display-value="person => person.name"
  1110. @change="query = $event.target.value"
  1111. placeholder="Search..."
  1112. />
  1113. <button x-combobox:button>Toggle</button>
  1114. </div>
  1115. <div x-combobox:options>
  1116. <ul>
  1117. <template
  1118. x-for="person in filteredPeople"
  1119. :key="person.id"
  1120. hidden
  1121. >
  1122. <li
  1123. x-combobox:option
  1124. :option="person.id"
  1125. :value="person"
  1126. :disabled="person.disabled"
  1127. x-text="person.name"
  1128. >
  1129. </li>
  1130. </template>
  1131. </ul>
  1132. <p x-show="filteredPeople.length == 0">No people match your query.</p>
  1133. </div>
  1134. </div>
  1135. </div>
  1136. <article>lorem ipsum</article>
  1137. </div>
  1138. `],
  1139. ({ get }) => {
  1140. // Test after closing with button
  1141. get('button').click()
  1142. get('input').type('w')
  1143. get('button').click()
  1144. get('input').should(haveValue(''))
  1145. // Test correct state after closing with ESC
  1146. get('button').click()
  1147. get('input').type('w')
  1148. get('input').type('{esc}')
  1149. get('input').should(haveValue(''))
  1150. // Test correct state after closing with TAB
  1151. get('button').click()
  1152. get('input').type('w')
  1153. get('input').tab()
  1154. get('input').should(haveValue(''))
  1155. // Test correct state after closing with external click
  1156. get('button').click()
  1157. get('input').type('w')
  1158. get('article').click()
  1159. get('input').should(haveValue(''))
  1160. // Select something
  1161. get('button').click()
  1162. get('ul').should(beVisible())
  1163. get('[option="2"]').click()
  1164. get('input').should(haveValue('Arlene Mccoy'))
  1165. // Test after closing with button
  1166. get('button').click()
  1167. get('input').type('w')
  1168. get('button').click()
  1169. get('input').should(haveValue('Arlene Mccoy'))
  1170. // Test correct state after closing with ESC and reopening
  1171. get('button').click()
  1172. get('input').type('w')
  1173. get('input').type('{esc}')
  1174. get('input').should(haveValue('Arlene Mccoy'))
  1175. // Test correct state after closing with TAB and reopening
  1176. get('button').click()
  1177. get('input').type('w')
  1178. get('input').tab()
  1179. get('input').should(haveValue('Arlene Mccoy'))
  1180. // Test correct state after closing with external click and reopening
  1181. get('button').click()
  1182. get('input').type('w')
  1183. get('article').click()
  1184. get('input').should(haveValue('Arlene Mccoy'))
  1185. },
  1186. )
  1187. test('combobox shows all options when opening',
  1188. [html`
  1189. <div
  1190. x-data="{
  1191. query: '',
  1192. selected: null,
  1193. people: [
  1194. { id: 1, name: 'Wade Cooper' },
  1195. { id: 2, name: 'Arlene Mccoy' },
  1196. { id: 3, name: 'Devon Webb' },
  1197. { id: 4, name: 'Tom Cook' },
  1198. { id: 5, name: 'Tanya Fox', disabled: true },
  1199. { id: 6, name: 'Hellen Schmidt' },
  1200. { id: 7, name: 'Caroline Schultz' },
  1201. { id: 8, name: 'Mason Heaney' },
  1202. { id: 9, name: 'Claudie Smitham' },
  1203. { id: 10, name: 'Emil Schaefer' },
  1204. ],
  1205. get filteredPeople() {
  1206. return this.query === ''
  1207. ? this.people
  1208. : this.people.filter((person) => {
  1209. return person.name.toLowerCase().includes(this.query.toLowerCase())
  1210. })
  1211. },
  1212. }"
  1213. >
  1214. <div x-combobox x-model="selected">
  1215. <label x-combobox:label>Select person</label>
  1216. <div>
  1217. <div>
  1218. <input
  1219. x-combobox:input
  1220. :display-value="person => person.name"
  1221. @change="query = $event.target.value"
  1222. placeholder="Search..."
  1223. />
  1224. <button x-combobox:button>Toggle</button>
  1225. </div>
  1226. <div x-combobox:options>
  1227. <ul>
  1228. <template
  1229. x-for="person in filteredPeople"
  1230. :key="person.id"
  1231. hidden
  1232. >
  1233. <li
  1234. x-combobox:option
  1235. :option="person.id"
  1236. :value="person"
  1237. :disabled="person.disabled"
  1238. x-text="person.name"
  1239. >
  1240. </li>
  1241. </template>
  1242. </ul>
  1243. <p x-show="filteredPeople.length == 0">No people match your query.</p>
  1244. </div>
  1245. </div>
  1246. </div>
  1247. <article>lorem ipsum</article>
  1248. </div>
  1249. `],
  1250. ({ get }) => {
  1251. get('button').click()
  1252. get('li').should(haveLength('10'))
  1253. // Test after closing with button and reopening
  1254. get('input').type('w').trigger('input')
  1255. get('li').should(haveLength('2'))
  1256. get('button').click()
  1257. get('button').click()
  1258. get('li').should(haveLength('10'))
  1259. // Test correct state after closing with ESC and reopening
  1260. get('input').type('w').trigger('input')
  1261. get('li').should(haveLength('2'))
  1262. get('input').type('{esc}')
  1263. get('button').click()
  1264. get('li').should(haveLength('10'))
  1265. // Test correct state after closing with TAB and reopening
  1266. get('input').type('w').trigger('input')
  1267. get('li').should(haveLength('2'))
  1268. get('input').tab()
  1269. get('button').click()
  1270. get('li').should(haveLength('10'))
  1271. // Test correct state after closing with external click and reopening
  1272. get('input').type('w').trigger('input')
  1273. get('li').should(haveLength('2'))
  1274. get('article').click()
  1275. get('button').click()
  1276. get('li').should(haveLength('10'))
  1277. },
  1278. )
  1279. test('active element logic when opening a combobox',
  1280. [html`
  1281. <div
  1282. x-data="{
  1283. query: '',
  1284. selected: null,
  1285. people: [
  1286. { id: 1, name: 'Wade Cooper' },
  1287. { id: 2, name: 'Arlene Mccoy' },
  1288. { id: 3, name: 'Devon Webb' },
  1289. { id: 4, name: 'Tom Cook' },
  1290. { id: 5, name: 'Tanya Fox', disabled: true },
  1291. { id: 6, name: 'Hellen Schmidt' },
  1292. { id: 7, name: 'Caroline Schultz' },
  1293. { id: 8, name: 'Mason Heaney' },
  1294. { id: 9, name: 'Claudie Smitham' },
  1295. { id: 10, name: 'Emil Schaefer' },
  1296. ],
  1297. get filteredPeople() {
  1298. return this.query === ''
  1299. ? this.people
  1300. : this.people.filter((person) => {
  1301. return person.name.toLowerCase().includes(this.query.toLowerCase())
  1302. })
  1303. },
  1304. }"
  1305. >
  1306. <div x-combobox x-model="selected">
  1307. <label x-combobox:label>Select person</label>
  1308. <div>
  1309. <div>
  1310. <input
  1311. x-combobox:input
  1312. :display-value="person => person.name"
  1313. @change="query = $event.target.value"
  1314. placeholder="Search..."
  1315. />
  1316. <button x-combobox:button>Toggle</button>
  1317. </div>
  1318. <div x-combobox:options>
  1319. <ul>
  1320. <template
  1321. x-for="person in filteredPeople"
  1322. :key="person.id"
  1323. hidden
  1324. >
  1325. <li
  1326. x-combobox:option
  1327. :option="person.id"
  1328. :value="person"
  1329. :disabled="person.disabled"
  1330. :class="$comboboxOption.isActive ? 'active' : ''"
  1331. x-text="person.name"
  1332. >
  1333. </li>
  1334. </template>
  1335. </ul>
  1336. <p x-show="filteredPeople.length == 0">No people match your query.</p>
  1337. </div>
  1338. </div>
  1339. </div>
  1340. </div>
  1341. `],
  1342. ({ get }) => {
  1343. get('button').click()
  1344. // First option is selected on opening if no preselection
  1345. get('ul').should(beVisible())
  1346. get('[option="1"]').should(haveAttribute('aria-selected', 'false'))
  1347. get('[option="1"]').should(haveClasses(['active']))
  1348. // First match is selected while typing
  1349. get('[option="4"]').should(haveAttribute('aria-selected', 'false'))
  1350. get('[option="4"]').should(notHaveClasses(['active']))
  1351. get('input').type('T')
  1352. get('input').trigger('change')
  1353. get('[option="4"]').should(haveAttribute('aria-selected', 'false'))
  1354. get('[option="4"]').should(haveClasses(['active']))
  1355. // Reset state and select option 3
  1356. get('button').click()
  1357. get('button').click()
  1358. get('[option="3"]').click()
  1359. // Previous selection is selected
  1360. get('button').click()
  1361. get('[option="4"]').should(haveAttribute('aria-selected', 'false'))
  1362. get('[option="3"]').should(haveAttribute('aria-selected', 'true'))
  1363. }
  1364. )
  1365. test.only('can remove an option without other options getting removed',
  1366. [html`<div
  1367. x-data="{
  1368. query: '',
  1369. selected: [],
  1370. frameworks: [
  1371. {
  1372. id: 1,
  1373. name: 'Laravel',
  1374. disabled: false,
  1375. },
  1376. {
  1377. id: 2,
  1378. name: 'Ruby on Rails',
  1379. disabled: false,
  1380. },
  1381. {
  1382. id: 3,
  1383. name: 'Django',
  1384. disabled: false,
  1385. },
  1386. ],
  1387. get filteredFrameworks() {
  1388. return this.query === ''
  1389. ? this.frameworks
  1390. : this.frameworks.filter((framework) => {
  1391. return framework.name.toLowerCase().includes(this.query.toLowerCase())
  1392. })
  1393. },
  1394. remove(framework) {
  1395. this.selected = this.selected.filter((i) => i !== framework)
  1396. }
  1397. }"
  1398. >
  1399. <div x-combobox x-model="selected" by="id" multiple>
  1400. <div x-show="selected.length">
  1401. <template x-for="selectedFramework in selected" :key="selectedFramework.id">
  1402. <button x-on:click.prevent="remove(selectedFramework)" :remove-option="selectedFramework.id">
  1403. <span x-text="selectedFramework.name"></span>
  1404. </button>
  1405. </template>
  1406. </div>
  1407. <div>
  1408. <div>
  1409. <input
  1410. x-combobox:input
  1411. @change="query = $event.target.value;"
  1412. placeholder="Search..."
  1413. />
  1414. <button x-combobox:button>
  1415. Show options
  1416. </button>
  1417. </div>
  1418. <div x-combobox:options x-cloak x-transition.out.opacity>
  1419. <ul>
  1420. <template
  1421. x-for="framework in filteredFrameworks"
  1422. :key="framework.id"
  1423. hidden
  1424. >
  1425. <li
  1426. x-combobox:option
  1427. :option="framework.id"
  1428. :value="framework"
  1429. :disabled="framework.disabled"
  1430. >
  1431. <span x-text="framework.name"></span>
  1432. <span x-show="$comboboxOption.isSelected" :check="framework.id">&check;</span>
  1433. </li>
  1434. </template>
  1435. </ul>
  1436. <p x-show="filteredFrameworks.length == 0">No frameworks match your query.</p>
  1437. </div>
  1438. </div>
  1439. </div>
  1440. </div>
  1441. `],
  1442. ({ get }) => {
  1443. get('input').type('a').trigger('input')
  1444. cy.wait(100)
  1445. get('[option="1"]').click()
  1446. get('[option="2"]').click()
  1447. get('[option="3"]').click()
  1448. get('[remove-option="3"]').click()
  1449. get('[option="1"]').should(haveAttribute('aria-selected', 'true'))
  1450. get('[option="2"]').should(haveAttribute('aria-selected', 'true'))
  1451. get('[option="3"]').should(haveAttribute('aria-selected', 'false'))
  1452. get('input').type('a').trigger('input')
  1453. get('[check="1"]').should(beVisible())
  1454. get('[check="2"]').should(beVisible())
  1455. get('[check="3"]').should(notBeVisible())
  1456. },
  1457. );