Problem when working with two identical selects

[capineiro]

Hi. I have one problem in this world's best select component.

If I create two separate select lists that have options with the same value (like [1,2,3] and [1,2,3]), I won't be able to select those options at the same time (like 2 and 2).

Debug showed that the selected value for different lists is stored in a common global variable for these lists and mouse event will be declined

[dipson88]

Hi @capineiro, thank you for the good words! It is strange. I thought that tree select works inside the tree select node, he has the link only on himself object. Do you use the same children object, or the same value for every treeselect? Do you reset the link to the options array? It is like an idea. But I will try to check this behavior.

[dipson88]

I've used my demo example. And created 2 treeselects. And I don't have duplication. They works like different selects. Maybe you pass the same value array to the every select, and change both values. The same values, the same options.

HTML:

<div class="treeselect-demo"></div>
<div class="treeselect-demo-1"></div>

js:

const domElement = document.querySelector('.treeselect-demo')
const treeselect = new Treeselect({
  parentHtmlContainer: domElement,
  value: ['West End', 'Paris', 'Lyon'],
  options: options,
  listSlotHtmlComponent: slot
})

const domElement2 = document.querySelector('.treeselect-demo-1')
const treeselect2 = new Treeselect({
  parentHtmlContainer: domElement2,
  value: ['West End', 'Paris', 'Lyon'],
  options: options,
  listSlotHtmlComponent: slot
})

[dipson88]

[capineiro]

Hi, the problem exists on isSingleSelect: true Try this example please

const options1 = [
    {name: 1, value: 1},
    {name: 2, value: 2},
    {name: 3, value: 3}
]

const options2 = [
    {name: 1, value: 1},
    {name: 2, value: 2},
    {name: 3, value: 3}
]

const domElement = document.querySelector('.treeselect-demo')
const treeselect = new Treeselect({
  parentHtmlContainer: domElement,
  isSingleSelect: true,
  options: options1,
})

const domElement2 = document.querySelector('.treeselect-demo-1')
const treeselect2 = new Treeselect({
  parentHtmlContainer: domElement2,
  isSingleSelect: true,
  options: options2,
})

Select value 1 in both selects. After unsuccess, try select 2 in second select and after that select 1 again (success)

[dipson88]

@capineiro, Yeh, I see, now words about common global variables make sense to me. I will move this variable to the class state. It should help. I going to try to fix it today.

[dipson88]

@capineiro, Thank you for the feedback, It is a major bug that I missed. I published a new release version 0.5.8. It was fixed.

[dipson88]

Closed as fixed. PR - https://github.com/dipson88/treeselectjs/pull/54/files