Change event glitches when option id property is _not_ a string

[glaszig]

came across this after updating from version 1.27 to version 2.9 but i remember i encountered this issue in an earlier 2.x version as well but gave up. now i spent an entire day to discover the following in awe:

when you feed slim select options with id properties whose value is not a string, i.e. an integer, it will cause the browser to emit 2 change events.

const ss = new SlimSelect({
  select: "#select",
  data: [
    {id: 1, value: '1', text: 'int one', selected: false },
    {id: 2, value: '2', text: 'int two', selected: false }
  ]
})

//
// THIS HANDLER WILL BE CALLED TWICE
//
document.getElementById("#select").addEventListener("change", (e) => {
  console.log(e)
})

see this more elaborate fiddle.

i tried to fix this in the source by casting to string but i don't get along with typescript.

solution

make sure your id properties are strings.

[brianvoe]

Thats an interesting find. Please submit this as an issue(or better submit a pr) and it will get into a better pipeline for development.

[glaszig]

i added a native select to the fiddle. it doesn't exhibit the behavior. only happens with slim select. very weird.

submit a pr

i would have but typescript puts up too much of a burden because it doesn't even accept a string-id as part of a passed option.

[brianvoe]

This is all because your passing in a number and not a string?

Also your typescript comment makes no sense.

[glaszig]

This is all because your passing in a number and not a string?

yes. have a look at this fiddle: https://jsfiddle.net/glaszig/ojdhsmvw/

Also your typescript comment makes no sense.

describe('events', () => {
  test('dispatch change event', async () => {
    document.body.innerHTML = `<select id="test"></select>`

    let selectElement = document.getElementById('test') as HTMLSelectElement
    let select = new Select(selectElement)
    let store = new Store('single', [
      {
        id: 1,
        value: '1',
        text: 'One',
        selected: false
      },
      {
        id: 2,
        value: '2',
        text: 'Two',
        selected: false
      }
    ])
    let data = store.getData()
    select.updateOptions(data)

    var eventCount = 0
    selectElement.addEventListener("change", () => eventCount += 1)

    selectElement.dispatchEvent(new Event("change", { bubbles: true }))

    expect(eventCount).toEqual(1)
  })
})

$ npm run test src/slim-select/select.test.ts

> slim-select@2.9.2 test
> jest src/slim-select/select.test.ts

 FAIL  src/slim-select/select.test.ts
  ● Test suite failed to run

    src/slim-select/select.test.ts:434:11 - error TS2322: Type 'number' is not assignable to type 'string'.

    434           id: 1,
                  ~~

      src/slim-select/store.ts:12:3
        12   id?: string
             ~~
        The expected type comes from property 'id' which is declared here on type 'DataObjectPartial'
    src/slim-select/select.test.ts:440:11 - error TS2322: Type 'number' is not assignable to type 'string'.

    440           id: 2,
                  ~~

      src/slim-select/store.ts:12:3
        12   id?: string
             ~~
        The expected type comes from property 'id' which is declared here on type 'DataObjectPartial'

Test Suites: 1 failed, 1 total
Tests:       0 total
Snapshots:   0 total
Time:        1.684 s