Use data value instead of index for close/edit handling as indexes might get change

This commit is contained in:
Hadi Nategh 2022-03-21 14:13:45 +01:00
parent 7d8d2be431
commit d7400503ac

View File

@ -154,24 +154,28 @@ export class TaglistSelection extends LitElement {
__handleEditBtn(e) __handleEditBtn(e)
{ {
const selected = this.__getSelectedTags()[parseInt(e.target.parentElement.dataset.index)]; const selected = this.__getSelectedTags().filter(_option => {
this.__getSelectedTags()[parseInt(e.target.parentElement.dataset.index)].checked = false; return (_option.choiceValue == e.target.parentElement.dataset.value);
this._getComboBoxElement()._inputNode.value = selected.value; });
selected[0].checked = false;
this._getComboBoxElement()._inputNode.value = selected[0].choiceValue;
} }
__handleCloseBtn(e) __handleCloseBtn(e)
{ {
this.__getSelectedTags()[parseInt(e.target.parentElement.dataset.index)].checked = false; this.__getSelectedTags().forEach(_option=>{
if (_option.choiceValue == e.target.parentElement.dataset.value) _option.checked = false;
});
} }
/** /**
* *
* @param option * @param option
*/ */
_selectedTagTemplate(option, index) _selectedTagTemplate(option)
{ {
return html` return html`
<div class="taglist-selection__tag" data-index=${index}> <div class="taglist-selection__tag" data-value=${option.value}>
${this._getComboBoxElement().editModeEnabled ? html`<span class="tag-btn tag-editBtn" @click="${this.__handleEditBtn}"></span>` : ''} ${this._getComboBoxElement().editModeEnabled ? html`<span class="tag-btn tag-editBtn" @click="${this.__handleEditBtn}"></span>` : ''}
<span class="tag-label">${option.label}</span> <span class="tag-label">${option.label}</span>
${this._canBeClosed() ? html`<span class="tag-btn tag-closeBtn" @click="${this.__handleCloseBtn}"></span>` : ''} ${this._canBeClosed() ? html`<span class="tag-btn tag-closeBtn" @click="${this.__handleCloseBtn}"></span>` : ''}
@ -185,9 +189,9 @@ export class TaglistSelection extends LitElement {
_selectedTagsTemplate() { _selectedTagsTemplate() {
return html` return html`
<div class="taglist-selection__tags"> <div class="taglist-selection__tags">
${this.__getSelectedTags().map((option, index) => ${this.__getSelectedTags().map((option) =>
{ {
return this._selectedTagTemplate(option, index); return this._selectedTagTemplate(option);
})} })}
</div> </div>
`; `;