Select or create field by tomselect with hotwire and stimulus JS

i would like to show my approach towards the implementation of tom-select with hotwire and stimulus JS. Tom select is an enhanced version of selectize with no jquery dependency. I would love to know your valuable feedback on it.

Here is the code - GitHub - ahmad19/tomselect-stimulus-hotwire-demo

and demo is here https://tom-select-rails-demo.herokuapp.com/ (which is temporary)

demo

Some feedback:

  1. Consider how could you make the stimulus controller generic (see: Writing better StimulusJS controllers).
  2. Since you are using webpacker, consider dynamically loading the 3rd party JS libraries (tom-select and bootstrap) in order to make your primary javascript file smaller and only load the larger JS libraries when the controller is used (see: Dynamic module import with Stimulus JS)
3 Likes