Skip to content

Commit fc08ffe

Browse files
committed
Fixed search and select on Enter
1 parent f0af6a4 commit fc08ffe

File tree

3 files changed

+27
-7
lines changed

3 files changed

+27
-7
lines changed

examples/search.html

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -31,7 +31,7 @@
3131
<h1 style="text-align: center;">Stimulus multiselect example</h1>
3232
<h3 style="text-align: center;color:rgb(182, 182, 182)">The search will show all items since this http-server doesnt have an actual backend to filter out the results</h3>
3333
<div style="width: 50%; margin: 0 auto">
34-
<div data-controller="multiselect" data-multiselect-search-url-value="/cars.json" data-multiselect-search-remote-value="true" data-placeholder="Search for cars...">
34+
<div data-controller="multiselect" data-multiselect-search-url-value="/cars.json" data-placeholder="Search for cars...">
3535
<select multiple="multiple" class="multiselect__hidden" data-multiselect-target="hidden" name="form[test_ids][]" id="form_test_ids"></select>
3636
</div>
3737
</div>

src/multiselect.css

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -186,6 +186,16 @@
186186
display: flex;
187187
}
188188

189+
.multiselect__list li:first-child {
190+
border-top-left-radius: 0.25rem;
191+
border-top-right-radius: 0.25rem;
192+
}
193+
194+
.multiselect__list li:last-child {
195+
border-bottom-left-radius: 0.25rem;
196+
border-bottom-right-radius: 0.25rem;
197+
}
198+
189199
.multiselect__list li input {
190200
margin-right: 0.75rem;
191201
}

src/multiselect.js

Lines changed: 16 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -57,18 +57,29 @@ export default class Multiselect extends Controller {
5757

5858
searchLocal() {
5959
this.dropdownTarget.classList.add("multiselect__dropdown--open")
60-
if (this.searchTarget.value === "") return this.listTarget.innerHTML = this.items(this.itemsValue)
60+
if (this.searchTarget.value === "") {
61+
let theRestOfTheItems = this.itemsValue.filter(x => !this.selectedValue.map(y => y.value).includes(x.value))
62+
this.listTarget.innerHTML = this.selectedItems
63+
this.listTarget.insertAdjacentHTML("beforeend", this.items(theRestOfTheItems))
64+
}
6165

6266
let searched = this.itemsValue.filter(item => {
6367
return item.text.toLowerCase().includes(this.searchTarget.value.toLowerCase())
6468
})
6569

70+
let selectedSearched = this.selectedValue.filter(item => {
71+
return item.text.toLowerCase().includes(this.searchTarget.value.toLowerCase())
72+
})
73+
74+
searched = searched.filter(x => !selectedSearched.map(y => y.value).includes(x.value))
75+
6676
if (searched.length === 0 && this.addableUrlValue) {
6777
return this.listTarget.innerHTML = this.noResultsTemplate
6878
}
6979

7080
if (searched.length === 0) this.dropdownTarget.classList.remove("multiselect__dropdown--open")
71-
this.listTarget.innerHTML = this.items(searched)
81+
this.listTarget.innerHTML = this.items(selectedSearched, true)
82+
this.listTarget.insertAdjacentHTML("beforeend", this.items(searched))
7283
}
7384

7485
async preload() {
@@ -125,7 +136,6 @@ export default class Multiselect extends Controller {
125136
if (this.selectedValue.length > 0) {
126137
this.previewTarget.innerHTML = this.pills
127138
this.searchTarget.style.paddingTop = "0.5rem"
128-
this.inputContainerTarget.style.display = "none"
129139

130140
this.selectedValue.forEach(selected => {
131141
const option = document.createElement("option")
@@ -226,7 +236,7 @@ export default class Multiselect extends Controller {
226236
this.element.dispatchEvent(new CustomEvent("multiselect-removed", { detail: { id: value } }))
227237
}
228238

229-
onEnterKeydown = () => {
239+
onEnterKeydown = (e) => {
230240
if (this.focusedItem) this.focusedItem.click()
231241
}
232242

@@ -363,7 +373,7 @@ export default class Multiselect extends Controller {
363373
<li>
364374
<label>
365375
<input type="checkbox" ${ selected } data-value="${item.value}" data-text="${item.text}"
366-
data-action="multiselect#checkBoxChange" data-multiselect-target="item">
376+
data-action="multiselect#checkBoxChange" data-multiselect-target="item" tabindex="-1">
367377
<span>${item.text}</span>
368378
</label>
369379
</li>
@@ -373,7 +383,7 @@ export default class Multiselect extends Controller {
373383
checkBoxChange(event) {
374384
event.preventDefault()
375385
this.searchTarget.focus()
376-
this.toggleItem(currentTarget)
386+
this.toggleItem(event.currentTarget)
377387
}
378388

379389
pillTemplate(item) {

0 commit comments

Comments
 (0)