DEV Community


Posted on

Using select2 in ActiveAdmin by using activeadmin_addons


When I upgraded from Rails 4.2 to 5.0->5.1, I also upgraded ActiveAdmin version.
It seems that activeadmin-select2, which uses select2 in ActiveAdmin, hasn't been maintained since April 2016, and
It did not work with the current ActiveAdmin 1.2 and Rails 5.1 combination.

So I decided to use activeadmin_addons, which can be handled separately by select2 in ActiveAdmin.

How to use select2 from activeadmin_addons and how to migrate from activeadmin-select2 to activeadmin_addons are described.

If you run select2 in ActiveAdmin, you can display completion like this

If you want to add a function other than the list of table elements, I recommend you to make a simple design administration screen using Twitter Bootstrap etc.

This version of the gem

  • activeadmin (1.2.0)
  • activeadmin_addons (1.1.1)

Modification of Gemfile

activeadmin # Stay tuned
activeadmin_addons # add
# activeadmin-select2 # delete

Automatic generation of configuration files

bin/rails g activeadmin_addons:install

config/initializers/activeadmin_addons.rb will be generated

select2 configuration

Note that the default will be select2.

For example, if the date is set to select2, it will take time to adjust the width.
This is quite a hassle if you want to use an asset written in an existing ActiveAdmin.

There are two ways to get around it, and the latter one requires less modification when migrating from activeadmin-select2.

Workaround 1: Set default-select in the class for without using select2.

I'll put it this way.

f.input :created_at, input_html: { class: "default-select" }

【Recommended】Workaround 2: Set default-select in the class for without using select2.

In the configuration file of activeadmin_addons, the default method of select is select2, so you can make it default.
The select tag becomes a normal select tag.

ActiveadminAddons.setup do |config|
  config.default_select = "default"

For that you want to express explicitly with select2, set select2 in the class.
This modification method is easy to migrate because it replaces only the part of activeadmin-select2 that was set to select2 explicitly.

# When filling in a form in the old activeadmin-select2 version of select2
f.input :created_at, as: :select2

# activeadmin_addons version
f.input :created_at, input_html: { class: "select2" }


Discussion (0)