`activeadmin-searchable_select` not working in Rails 8

[nhanguyen06]

Hi, thanks for maintaining this gem!

I’ve created a new Rails 8 project using Ruby 3.4.2 and integrated activeadmin along with activeadmin-searchable_select to enhance select boxes.

However, the searchable select feature does not seem to be working as expected.

Environment:

• Rails version: 8.0
• Ruby version: 3.4.2
• Asset bundlers:
  • jsbundling-rails esbuild
  • cssbundling-rails

Issue:

I follow document with manually to package.json way. The activeadmin-searchable_select does not render or function in the UI. select2 init JavaScript errors are shown in the console, and the select box appears as a standard dropdown.

Please let me know if there are compatibility issues or any specific configuration needed for Rails 8 or the new asset pipeline tools.

I try debug and fix in app/assets/javascripts/active_admin/searchable_select/init.js and it working

import $ from "jquery";
import select2 from 'select2';
select2();

(function() {
  function initSearchableSelects(inputs, extra) {
    inputs.each(function() {
      var item = $(this);

      // reading from data allows <input data-searchable_select='{"tags": ['some']}'>
      // to be passed to select2
      var options = $.extend(extra || {}, item.data('searchableSelect'));
      var url = item.data('ajaxUrl');

      if (url) {
        $.extend(options, {
          ajax: {
            url: url,
            dataType: 'json',

            data: function (params) {
              return {
                term: params.term,
                page: pageParamWithBaseZero(params)
              };
            }
          }
        });
      }

      item.select2(options);
    });
  }

  function pageParamWithBaseZero(params) {
    return params.page ? params.page - 1 : undefined;
  }

  $(document).on('has_many_add:after', '.has_many_container', function(e, fieldset) {
    initSearchableSelects(fieldset.find('.searchable-select-input'));
  });

  $(document).on('page:load turbolinks:load', function() {
    initSearchableSelects($(".searchable-select-input"), {placeholder: ""});
  });

  $(function() {
    initSearchableSelects($(".searchable-select-input"));
  });
}());

Thanks in advance!