Error "Tom Select already initialized on this element" / Access already initialized TomSelect? #260

ThomasLandauer · 2021-11-11T18:00:11Z

ThomasLandauer
Nov 11, 2021

How can I access an already existing TomSelect? https://tom-select.js.org/docs/api/ only shows ways to create a new one. But when I do new TomSelect('#foo', {});, I'm getting

"Error: Tom Select already initialized on this element"

I think this is the same question that #211 asks ;-)

My use case:
I'm binding my <select> to Vue.js, and when I change the value in Vue.js, the TomSelect widget isn't refreshed. More precise: The selected value is only visible in the list after I expanded the widget.

oyejorge · 2021-11-11T18:13:38Z

oyejorge
Nov 11, 2021
Maintainer

I'm not a vue user but this works in vanilla js:

var select = document.getElementById('#my-select');
new TomSelect(select);
var instance = select.tomselect; // existing TomSelect instance

5 replies

ThomasLandauer Nov 11, 2021
Author

It looks like Vue and TomSelect are fighting against each other :-)

Sample code:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Tom Select</title>
        <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/tom-select.css" rel="stylesheet">
        <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/tom-select.complete.min.js"></script>
        <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
    </head>
    <body>
        <main>
            <select id="products" multiple="multiple" v-model="products">
                <option>One</option>
                <option>Two</option>
                <option>Three</option>
            </select>
            <button type="button" v-on:click="update()">Update</button>
        </main>
    <script>
        new Vue({
            el: 'main',
            data: {
                products: [],
            },
            methods: {
                update: function() {
                    this.products.push('Two');
                    console.log(document.getElementById('products').selectedOptions.length);                    
                    setTimeout(function(){
                        console.log(document.getElementById('products').selectedOptions.length);                    
                        let select = document.getElementById('products');
                        let instance = select.tomselect;
                        instance.refreshItems();
                        instance.focus(); // Just to check if `instance` is working at all ;-)
                    }, 1000);
                },
            },
        });
        new TomSelect('#products', {});
    </script>
    </body>
</html>

My observations:

Vue.js doesn't update the selectedOptions property of the <select> immediately, but only after some delay. That's why I included setTimeout. The first console.log() always outputs "0", but the second (after the timeout) writes "1".
"Vue.js devtools" (see links below) are showing: Immediately after clicking the button, the entry appears in Vue's data: products:Array[1]. But after the timeout (i.e. when TomSelect kicks in), this gets reset to products:Array[0].
The TomSelect widget is never showing the selected option.

Questions:

Is refreshItems() the right function here, or would you recommend something else?
How is TomSelect keeping track of the selected options? Obviously not in the "standard" way of adding a selected attribute to the <option>...
And where is refreshItems() getting the information (about what's selected) from? Obviously not from the same place where Vue.js is writing to ;-)

I stumbled over https://vue-multiselect.js.org/ but didn't take a closer look.

oyejorge Nov 15, 2021
Maintainer

https://jsfiddle.net/am7wLgb3/

ThomasLandauer Nov 18, 2021
Author

Works, thanks! Since this is the second Vue.js-related issue (after #256), I'd like to add this somewhere to the docs. But where? Extra page for "Known Issues"? Or "Vue.js"? Or "JavaScript Frameworks"? Or add it to some existing page? Which?

oyejorge Nov 23, 2021
Maintainer

Maybe we need a new page at https://tom-select.js.org/docs/vue.js?

smerchkz Jul 23, 2022

Works, thanks! Since this is the second Vue.js-related issue (after #256), I'd like to add this somewhere to the docs. But where? Extra page for "Known Issues"? Or "Vue.js"? Or "JavaScript Frameworks"? Or add it to some existing page? Which?

when will done documentation for use on vue3
plz

WilliamStam · 2021-11-26T14:01:54Z

WilliamStam
Nov 26, 2021

would be great! im trying to get it to work with vue3 at the moment.

would suggest a "integrations" page then when the react / angular / whatevers Q's come in a page can just be added.

0 replies

mtancoigne · 2021-12-10T20:08:53Z

mtancoigne
Dec 10, 2021

I created a TomSelect component for my app. It does not use a select but only the text field.

TL;DR: TomSelect is available as TomSelect global variable in the page, and used in vue's created() method.

Links: Component and usage example

There are custom tag renderers which clutter the component, but it acts as an input field that can be used with v-model and an array of strings.

Hope this may help ;)

EDIT on 2022/08/06: Updated links to a specific commit as TomSelect is not used in the project anymore

0 replies

james-em · 2022-10-20T14:07:05Z

james-em
Oct 20, 2022

Simple fix for Rails/Stimulus/Tom-Select/Vue

Vue

watch: {
    yourObject: {
      handler(){
        setTimeout(() => {
          document.querySelectorAll('select.tomselected').forEach((input) => {
            input.tomselect.sync();
          });
        }, 50); // Needs some delay because the actual <select> value must be updated prior calling sync()
      },
      deep: true
    }
  }

Stimulus controller

  connect() {
    if (this.element.classList.contains('tomselected')) return;

    loadTomSelect(this.element);
  }

Simple form (Rails)

<%= f.association :profession,
  as: :select,
  collection: policy_scope(Profession),
  input_html: { data: { controller: "tom-select" }, "v-model": "person.professionId" }
%>

0 replies

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Error "Tom Select already initialized on this element" / Access already initialized TomSelect? #260

{{title}}

Replies: 4 comments 5 replies

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

{{editor}}'s edit

{{editor}}'s edit

{{title}}

Select a reply

Error "Tom Select already initialized on this element" / Access already initialized TomSelect? #260

ThomasLandauer Nov 11, 2021

Replies: 4 comments · 5 replies

oyejorge Nov 11, 2021 Maintainer

ThomasLandauer Nov 11, 2021 Author

oyejorge Nov 15, 2021 Maintainer

ThomasLandauer Nov 18, 2021 Author

oyejorge Nov 23, 2021 Maintainer

smerchkz Jul 23, 2022

WilliamStam Nov 26, 2021

mtancoigne Dec 10, 2021

james-em Oct 20, 2022

ThomasLandauer
Nov 11, 2021

Replies: 4 comments 5 replies

oyejorge
Nov 11, 2021
Maintainer

ThomasLandauer Nov 11, 2021
Author

oyejorge Nov 15, 2021
Maintainer

ThomasLandauer Nov 18, 2021
Author

oyejorge Nov 23, 2021
Maintainer

WilliamStam
Nov 26, 2021

mtancoigne
Dec 10, 2021

james-em
Oct 20, 2022