IBX-967: As an Editor, I want to filter Dropdown items #1891
Conversation
| const visibleItems = this.itemsListContainer.querySelectorAll(`[data-filter-value^="${event.currentTarget.value.toLowerCase()}"]`); | ||
|
|
||
| [...allItems].forEach((item) => item.classList.add(CLASS_ITEM_HIDDEN)); | ||
| [...visibleItems].forEach((item) => item.classList.remove(CLASS_ITEM_HIDDEN)); |
There was a problem hiding this comment.
First it hides all items and in next loop shows matched items.
It may cause some visible artifacts. Can we do it in one loop and check if it should be visible or not inside?
| filterItems(event) { | ||
| const allItems = this.itemsListContainer.querySelectorAll('[data-filter-value]'); | ||
|
|
||
| if (event.currentTarget.value.length < 3) { |
There was a problem hiding this comment.
It would be good to assign this condition to some variable to give it a description.
| return; | ||
| } | ||
|
|
||
| const visibleItems = this.itemsListContainer.querySelectorAll(`[data-filter-value^="${event.currentTarget.value.toLowerCase()}"]`); |
There was a problem hiding this comment.
Code may be easier to read after assigning event.currentTarget.value.toLowerCase() to some variable.
| @@ -250,6 +260,30 @@ | |||
| } | |||
| } | |||
|
|
|||
| filterItems(event) { | |||
| const allItems = this.itemsListContainer.querySelectorAll('[data-filter-value]'); | |||
There was a problem hiding this comment.
Sometimes (usually?) we add [... ] here, so later it can be skipped.
| } | ||
|
|
||
| afterClose(event) { | ||
| if (event.propertyName === 'transform' && !this.container.classList.contains(CLASS_DROPDOWN_EXPANDED)) { |
There was a problem hiding this comment.
I would assign these conditions to variables.
| @@ -261,9 +295,12 @@ | |||
| this.fitItems(); | |||
|
|
|||
| this.container.querySelector(SELECTOR_SELECTION_INFO).onclick = this.onInputClick; | |||
| this.itemsContainer | |||
| this.itemsContainer.addEventListener('transitionend', this.afterClose, false); | |||
There was a problem hiding this comment.
Does this work with fast clicking? 😏 😄
| } | ||
|
|
||
| &--search { | ||
| .ibexa-icon { |
There was a problem hiding this comment.
Hmm, cannot it just be ibexa-icon--small?
| {%- endembed -%} | ||
| <ul class="ibexa-dropdown__items-list"> | ||
| {% for choice in preferred_choices %} | ||
| {% include '@ezdesign/ui/component/dropdown_item.html.twig' with { choice: choice } %} |
There was a problem hiding this comment.
| {% include '@ezdesign/ui/component/dropdown_item.html.twig' with { choice: choice } %} | |
| {% include '@ezdesign/ui/component/dropdown_item.html.twig' with { choice } %} |
| } | ||
|
|
||
| filterItems(event) { | ||
| const forceShowItems = event.currentTarget.value.length < 3; |
There was a problem hiding this comment.
maybe we add this to a variable that says what is this value?
|
Kudos, SonarCloud Quality Gate passed!
|
Checklist:
$ composer fix-cs)