How to add/remove item programmatically?

[sandric]

I having trouble understanding pretty basic thing as I think - how to add or remove options to/from select? In one issue I found triggerEvent(this.passedElement, 'addItem', params) line for addition, but as I understood api changed a bit so you should use instead: choiceSelect.passedElement.triggerEvent('addItem', {id: 3, value: 'test'}) ?

So my full example is this:

    let choiceSelect = new Choices('#keyboards-select', {
      shouldSort: false,
      callbackOnCreateTemplates: function (template) {
        return {
          choice: (classNames, data) => {
            return template(`<div class="is-flex"><a class="select-delete-button delete is-small is-danger mt-15 ml-10 mr-10" data-value="${data.value}"></a><div class="${classNames.item} ${classNames.itemChoice} ${data.disabled ? classNames.itemDisabled : classNames.itemSelectable}" data-select-text="${this.config.itemSelectText}" data-choice ${data.disabled ? 'data-choice-disabled aria-disabled="true"' : 'data-choice-selectable'} data-id="${data.id}" data-value="${data.value}" ${data.groupId > 0 ? 'role="treeitem"' : 'role="option"'} style="width: calc(100% - 20px)"> ${data.label} </div></div>`);
          },
        }
      }
    })

    choiceSelect.passedElement.element.addEventListener('showDropdown', (event) => {
      document.querySelectorAll('.select-delete-button').forEach((el) => {
        el.addEventListener('click', (event) => { this.destroyKeyboard(event.target.dataset.value) }, false)
      })
    }, false)

    choiceSelect.passedElement.triggerEvent('addItem', {id: 3, value: 'test'})

But I get no new elements, so what am I doing wrong?

P.S. I also tried with no luck either: choiceSelect.passedElement.element.dispatchEvent(new Event('addItem', {id: 3, value: 'someval'}))

[franke-mc]

@sandric: Not completely sure about your example, but I had spent some time getting programmatic additions of items to work, resulting in the example in section 'How Has This Been Tested?' in https://github.com/jshjohnson/Choices/pull/594 . You may want to take a look at the lines before and after //console.log('Adding choice ',newItem);. Does that help?

[agamemnus]

triggerEvent works and is undocumented (NB: doesn't actually edit the data/list). Make sure to pass in an identifier so you don't end up with an infinite loop -- e.g.:

choiceList.passedElement.triggerEvent('removeItem', {id: 3, value: 'test', programmatic: true})

[hyuuks]

hy @agamemnus i've tried this several times, but i dont know why i cant delete an item.

var comp = new Choices(document.querySelector("#w0"), {
          choices:[{"value":"Pacific\/Midway","label":"(UTC -11:00) Pacific\/Midway"}, 
                           {"value":"Pacific\/Niue","label":"(UTC -11:00) Pacific\/Niue"}],
          removeItemButton:true,
          searchFields:["label","value"],
          shouldSort:true,
          silent:true,

          //removeItems:true
});

comp.passedElement.triggerEvent('removeItem', {id: 2, value: 'Pacific\/Niue', label: '(UTC -11:00) Pacific\/Niue', groupId: -1}); //still cant delete the item
`

[agamemnus]

IDK I'll take a look look if I have time

On Wed, Jan 3, 2024, 6:03 PM hyuuks @.***> wrote:

hy @agamemnus https://github.com/agamemnus i've tried this several times, but i dont know why i cant delete an item.

var comp = new Choices(document.querySelector("#w0"), { choices:[{"value":"Pacific/Midway","label":"(UTC -11:00) Pacific/Midway"}, {"value":"Pacific/Niue","label":"(UTC -11:00) Pacific/Niue"}], removeItemButton:true, searchFields:["label","value"], shouldSort:true, silent:true,

      //removeItems:true});

eventMenu.passedElement.triggerEvent('removeItem', {id: 2, value: 'Pacific/Niue', label: '(UTC -11:00) Pacific/Niue', groupId: -1}); //still cant delete the item `

— Reply to this email directly, view it on GitHub https://github.com/Choices-js/Choices/issues/634#issuecomment-1876088192, or unsubscribe https://github.com/notifications/unsubscribe-auth/AAYUSWDL6IRXFQBTE4LC4ELYMXPVNAVCNFSM4ITTEGR2U5DIOJSWCZC7NNSXTN2JONZXKZKDN5WW2ZLOOQ5TCOBXGYYDQOBRHEZA . You are receiving this because you were mentioned.Message ID: @.***>