dropdown_input: 2 instances on same page seem to interfere with each other

[awh-tokyo]

I am using Bootstrap 4 and have two instances of the control in the same document that are instantiated by a Stimulus.js controller like this:

    connect(): void {
        this.tomSelect = new TomSelect(this.element as TomInput, {
            preload: true,
            valueField: 'id',
            labelField: 'name',
            searchField: ['name'],
            sortField: 'traversalIndex',
            plugins: ['dropdown_input'],
            maxOptions: 500,
            load: this.fetchQueryResults,
            lockOptgroupOrder: true,
            closeAfterSelect: true,
            render: {
                option: this.formatOption,
                item: this.formatSelectedItem
            },
            score: function(search) { return function(item) { return 100 } },
            shouldLoad: function(query) { return true }
        })
    }

If I don't use the "dropdown_input" plugin, the two instances behave appropriately. However, if I use the plugin, the two seem to "interfere" with each other, in that opening or closing the dropdown on one of them causes the other one to open or close.

In addition, the actual dropdown input seems to only be present in the second instance.

[oyejorge]

Which version of Tom Select are you using? And what browser are you seeing this in?

[oyejorge]

I'm not seeing the problem in 1.7 or 2.0

[awh-tokyo]

I'm using 2.0.0 Beta 3 and Chrome, but you're right, I can't seem to duplicate it in jfiddle either.

There's definitely some weird interaction between the dropdown_input, Stimulus.js, and Bootstrap, but I'll keep trying to track it down. If one of the two instances is in a modal, I can even get Bootstrap to crap out a bunch of error messages about having overflowed the stack, but even without the modal, two of them behave weird.

[awh-tokyo]

Maybe it has something to do with remote loading. I duplicated it with this:

https://jsfiddle.net/wqg6vcrs/

[oyejorge]

Hmm, ok, I see what you're talking about. Interestingly, it does only appear to be an issue in chrome

[awh-tokyo]

It effects Safari a little bit too; in Safari, clicking on one dropdown makes the other one flicker open then closed right away, but at least it doesn't stay open.

[oyejorge]

Pretty sure it's fixed with that last change.

[awh-tokyo]

Duplicating the change into my environment seems to have solved it for me at least! Thank you!

[oyejorge]

Awesome, thanks for checking!

[azeddine-hf]

you to check if value of option don't empty !