Dropdown not being updated to dynamic options through custom js, overridden to default.

[upendra-azad]

Not able to overwrite dropdown from version 3.2 onwards, because of default here

rails_admin/src/rails_admin/filtering-select.js

Line 300 in b09f770

this.element.html($('<option value="" selected="selected"></option>'));

it's done in (#3630).

my use case is that i am overwriting the states picklist based on country picklist through custom js.
and to make the new dropdown work after updating the options, i am using $(selector).filteringSelect('destroy') to reinitialize. but its being overwritten with that line, we can add one boolean flag to ignore that behaviour.

[upendra-azad]

Hi, Thanks for your attention, let me know if this is worth merging or not, so i can close this pr.

[coveralls]

coverage: 96.178% (+0.3%) from 95.872%
when pulling 3b7b355 on upendra-azad:filtering-select-not-updating-dropdown
into e38c12d on railsadminteam:master.

[mshibuya]

Thanks for the PR. Could you please show me your custom js?
I want to understand your usecase correctly. There can be a better way to achieve what you want, maybe.

[upendra-azad]

Thanks for the PR. Could you please show me your custom js? I want to understand your usecase correctly. There can be a better way to achieve what you want, maybe.

Yeah sure, here is the sample code from erb file which i am using for state selection based on country selected dynamically.

<!--if "K" is the record class name -->

<%= form.select(:country, options_for_select(['usa', 'rome'], cvalue_from_db(k)), {include_blank: true}) %>

<%= form.select(:state, options_for_select(states_for_db_country(k) ,svalue_from_db(k)), {include_blank: true}) %>

<script type="text/javascript">
  let allStates = <%= {"usa"=>[["alaska", "ak"]], "rome"=>[]}.to_json(root: false).html_safe %>;

  $(function() {
    let countrySelector = document.querySelector("#k_country");
    countrySelector.addEventListener("change", function () {

      const selectedCountry = $("#k_country").val();
      const stateSelector = $("#k_state");

      stateSelector.empty(); // Clear existing options

      if (selectedCountry) {
        const statesForCountry = allStates[selectedCountry];

        if (!statesForCountry || statesForCountry.length === 0) {
          // Add a blank option if no states are available
          stateSelector.append($("<option>").val("").text(""));
        } else {
          // Populate states for the selected country
          statesForCountry.forEach(([sn, sv]) => {
            stateSelector.append($("<option>").val(sn).text(sv));
          });
        }

        refreshPicklist("#k_state"); // Refresh the picklist
      }
      
    });
  });


  function refreshPicklist(selector) {
    if ($(selector).siblings('div').length > 0) {
      // it does not refresh (picklist does not show) without line below. (note i am using rails admin version 3.1.4)
      try { $(selector).filteringSelect('destroy'); } catch (e) { }
      $(selector).filteringSelect();
    }
  }
</script>

[mshibuya]

The problem is purely in your usage of the filtering-select widget.

      try { $(selector).filteringSelect('destroy'); } catch (e) { }
      $(selector).filteringSelect();

What this does is not refreshing, but it destroys the filtering-select widget and then re-creates.
So it is totally legitimate that the options update you made gets lost on destroy. You should change your javascript logic to destroy the widget first, then apply changes to the options, finally re-create the widget.

Also if your lists of countries and states are stored in DB, client-side dynamic scoping feature that was added recently will fit well with this sort of use-cases.
12715f2

[upendra-azad]

@mshibuya i will try this, thanks a lot for your help.