Skip to content

No synchronization after deletion (on button) #2

@redb0

Description

@redb0

I'm trying to use this library in my small HTMX application. My experience in javascript is small.

I am adding the "Searchable Tags with Create Option":

filter = new YoSelect(document.querySelector('#filter'), {
    search: true,
    searchPlaceholder: '...',
    noResultsPlaceholder: 'Not filters',
    classTag: 'tag-badge',
});

If I delete an item through the drop-down list, then everything is fine and the change event is caught.

But if I click on the x button, the change event does not occur.

I think this is due to the fact that there is no synchronization when processing a click on this button.

YoSelect/yoSelect.js

Lines 440 to 446 in fc6f5c9

removeBtn.onclick = (e) => {
e.stopPropagation();
badge.remove();
this.selectedValues.delete(input.value);
input.checked = false;
this.#triggerCallback('onChange', this.getValue());
};

It may be worth putting the synchronization code block in a separate method and calling it there, too.

YoSelect/yoSelect.js

Lines 491 to 507 in fc6f5c9

if (this.isInputElement) {
if (this.isMultiple) {
const values = Array.from(this.selectedValues);
this.element.value = values.join(this.options.delimiter);
} else {
this.element.value = input.value;
}
} else {
if (this.isMultiple) {
// Update all options in original select
Array.from(this.originalSelect.options).forEach(option => {
option.selected = this.selectedValues.has(option.value);
});
} else {
this.originalSelect.value = input.value;
}
}

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions