country_state_select 4.0.0 → 4.0.1

data/test/javascript/country_state_select.test.mjs

@@ -0,0 +1,150 @@
+import { test, beforeEach, afterEach } from 'node:test';
+import assert from 'node:assert/strict';
+import { JSDOM } from 'jsdom';
+
+const dom = new JSDOM('<!doctype html><html><body></body></html>');
+globalThis.window = dom.window;
+globalThis.document = dom.window.document;
+
+const { default: CountryStateSelect } = await import('../../app/javascript/country_state_select/country_state_select.js');
+
+let requests;
+let instances = [];
+
+function stubFetch() {
+  requests = [];
+  globalThis.fetch = (url) => new Promise((resolve) => {
+    requests.push({
+      url,
+      respond: (data) => resolve({ ok: true, json: () => Promise.resolve(data) })
+    });
+  });
+}
+
+function requestFor(path, param) {
+  const found = requests.find((r) => r.url.startsWith(`${path}?`) && r.url.includes(param));
+  assert.ok(found, `expected a request to ${path} with ${param}`);
+  return found;
+}
+
+function settle() {
+  return new Promise((resolve) => setTimeout(resolve, 0));
+}
+
+function changeCountry(value) {
+  const country = document.getElementById('country');
+  country.value = value;
+  country.dispatchEvent(new window.Event('change', { bubbles: true }));
+}
+
+function setup(options = {}) {
+  const instance = CountryStateSelect({ country_id: 'country', state_id: 'state', city_id: 'city', announce: false, ...options });
+  instances.push(instance);
+  return instance;
+}
+
+beforeEach(() => {
+  document.body.innerHTML = `
+    <select id="country" name="address[country]">
+      <option value=""></option><option value="US">United States</option><option value="IN">India</option>
+    </select>
+    <select id="state" name="address[state]" class="form-select" required aria-describedby="state-help"
+            data-country-state-select-target="state"></select>
+    <select id="city" name="address[city]" data-country-state-select-target="city"></select>`;
+  stubFetch();
+});
+
+afterEach(() => {
+  instances.forEach((instance) => instance.destroy());
+  instances = [];
+});
+
+test('keeps the state field attributes when rebuilding it', async () => {
+  setup();
+
+  changeCountry('US');
+  requestFor('/find_states', 'country_id=US').respond([['CA', 'California']]);
+  await settle();
+
+  const state = document.getElementById('state');
+  assert.equal(state.tagName, 'SELECT');
+  assert.equal(state.name, 'address[state]');
+  assert.equal(state.className, 'form-select');
+  assert.equal(state.required, true);
+  assert.equal(state.getAttribute('aria-describedby'), 'state-help');
+  assert.equal(state.getAttribute('data-country-state-select-target'), 'state');
+});
+
+test('keeps the attributes when a field becomes a text input', async () => {
+  setup();
+
+  changeCountry('US');
+  requestFor('/find_states', 'country_id=US').respond([]);
+  await settle();
+
+  const state = document.getElementById('state');
+  assert.equal(state.tagName, 'INPUT');
+  assert.equal(state.type, 'text');
+  assert.equal(state.required, true);
+  assert.equal(state.getAttribute('data-country-state-select-target'), 'state');
+});
+
+test('ignores a states response that arrives after a newer country change', async () => {
+  setup();
+
+  changeCountry('US');
+  changeCountry('IN');
+  requestFor('/find_states', 'country_id=IN').respond([['MP', 'Madhya Pradesh']]);
+  await settle();
+  requestFor('/find_states', 'country_id=US').respond([['CA', 'California']]);
+  await settle();
+
+  const values = Array.from(document.getElementById('state').options).map((o) => o.value);
+  assert.deepEqual(values, ['', 'MP']);
+});
+
+test('ignores a cities response for a state that is no longer selected', async () => {
+  setup();
+  changeCountry('US');
+  requestFor('/find_states', 'country_id=US').respond([['CA', 'California'], ['NY', 'New York']]);
+  await settle();
+
+  const state = document.getElementById('state');
+  state.value = 'CA';
+  state.dispatchEvent(new window.Event('change', { bubbles: true }));
+  state.value = 'NY';
+  state.dispatchEvent(new window.Event('change', { bubbles: true }));
+  requestFor('/find_cities', 'state_id=NY').respond(['New York City']);
+  await settle();
+  requestFor('/find_cities', 'state_id=CA').respond(['Los Angeles']);
+  await settle();
+
+  const cities = Array.from(document.getElementById('city').options).map((o) => o.value);
+  assert.deepEqual(cities, ['', 'New York City']);
+});
+
+test('changing the country does not request cities', async () => {
+  setup();
+
+  changeCountry('US');
+  requestFor('/find_states', 'country_id=US').respond([['CA', 'California']]);
+  await settle();
+
+  assert.deepEqual(requests.map((r) => r.url.split('?')[0]), ['/find_states']);
+});
+
+test('destroy removes the country listener', () => {
+  setup().destroy();
+
+  changeCountry('US');
+
+  assert.equal(requests.length, 0);
+});
+
+test('refresh does not add a second country listener', () => {
+  setup().refresh();
+
+  changeCountry('US');
+
+  assert.equal(requests.length, 1);
+});

data/vendor/assets/javascript/country_state_select_vanilla.js

@@ -28,10 +28,14 @@
     var liveRegion = announce ? ensureLiveRegion() : null;
   
     var enhancedInstances = {};
+    var boundCountryEl = null;
+    var statesRequestId = 0;
+    var citiesRequestId = 0;
+    var NON_TRANSFERABLE_ATTRIBUTES = ['type', 'value'];
   
     init();
   
-    return { refresh: init, destroy: destroy };
+    return { refresh: refresh, destroy: destroy };
   
     // ====== ***** INITIALIZATION ***** ===================================== //
   
@@ -41,9 +45,8 @@
       var countryEl = document.getElementById(countryId);
       if (!countryEl) return;
   
-      countryEl.addEventListener('change', function () {
-        findStates(countryEl.value, { userInitiated: true });
-      });
+      countryEl.addEventListener('change', countryChange);
+      boundCountryEl = countryEl;
   
       if (hasCityField) {
         document.addEventListener('change', delegatedStateChange);
@@ -83,10 +86,26 @@
       return !!el && el.tagName === 'SELECT' && el.options.length > 1;
     }
   
+    function refresh() {
+      removeListeners();
+      init();
+    }
+  
     function destroy() {
+      removeListeners();
+      Object.keys(enhancedInstances).forEach(destroyEnhancement);
+    }
+  
+    function removeListeners() {
+      if (boundCountryEl) boundCountryEl.removeEventListener('change', countryChange);
+      boundCountryEl = null;
       document.removeEventListener('change', delegatedStateChange);
     }
   
+    function countryChange(event) {
+      findStates(event.target.value, { userInitiated: true });
+    }
+  
     function delegatedStateChange(event) {
       if (event.target && event.target.id === stateId) {
         findCities(event.target.value, document.getElementById(countryId).value, { userInitiated: true });
@@ -95,8 +114,13 @@
   
     // ====== ***** DATA LOOKUP ***** ========================================= //
   
+    // Each lookup takes a fresh request id; a response is only applied if no
+    // newer lookup for the same field started while it was in flight, so a
+    // slow reply for a previously selected country/state can't overwrite the
+    // current one.
     function findStates(countryCode, ctx) {
       ctx = ctx || {};
+      var requestId = ++statesRequestId;
       if (ctx.userInitiated) findCities('', '', { silent: true });
   
       if (offlineData && offlineData.states) {
@@ -105,6 +129,7 @@
       }
   
       fetchJson(statesUrl, { country_id: countryCode }).then(function (data) {
+        if (requestId !== statesRequestId) return;
         buildStatesDropdown(data || [], ctx);
       });
     }
@@ -112,6 +137,12 @@
     function findCities(stateCode, countryCode, ctx) {
       ctx = ctx || {};
       if (!hasCityField) return;
+      var requestId = ++citiesRequestId;
+  
+      if (!stateCode) {
+        buildCitiesDropdown([], ctx);
+        return;
+      }
   
       if (offlineData && offlineData.cities) {
         var key = countryCode + ':' + stateCode;
@@ -120,6 +151,7 @@
       }
   
       fetchJson(citiesUrl, { country_id: countryCode, state_id: stateCode }).then(function (data) {
+        if (requestId !== citiesRequestId) return;
         buildCitiesDropdown(data || [], ctx);
       });
     }
@@ -146,18 +178,15 @@
       rebuildField(stateId, data, ctx.preselect, options.state_placeholder);
       if (!ctx.silent) announceUpdate('State options updated');
   
-      var countryHasChanged = ctx.userInitiated;
-      if (hasCityField) {
-        if (countryHasChanged) {
-          findCities('', '', { silent: true });
-        } else if (ctx.preselect !== undefined) {
-          var stateEl = document.getElementById(stateId);
-          var preselectedCity = options.selected_city || (stateEl && stateEl.getAttribute('data-selected-city'));
-          findCities(stateEl ? stateEl.value : '', countryId && document.getElementById(countryId).value, {
-            preselect: preselectedCity,
-            silent: true
-          });
-        }
+      // A user-initiated country change already cleared the city field in
+      // findStates, so only the initial (pre-selected) load cascades here.
+      if (hasCityField && !ctx.userInitiated && ctx.preselect !== undefined) {
+        var stateEl = document.getElementById(stateId);
+        var preselectedCity = options.selected_city || (stateEl && stateEl.getAttribute('data-selected-city'));
+        findCities(stateEl ? stateEl.value : '', countryId && document.getElementById(countryId).value, {
+          preselect: preselectedCity,
+          silent: true
+        });
       }
     }
   
@@ -167,9 +196,12 @@
     }
   
     // Rebuilds `fieldId` as a <select> (data present) or a plain text <input>
-    // (no data for the parent selection) while preserving its id/name/class —
-    // mutating the existing node in place rather than replaceWith() keeps
-    // external references (Tom Select instances, other listeners) valid.
+    // (no data for the parent selection). The new element replaces the old
+    // one, so every attribute is carried over (id, name, class, required,
+    // aria-*, Stimulus target data attributes, ...) — otherwise validation,
+    // accessibility wiring and Stimulus targets are lost after the first
+    // rebuild. Tom Select instances are torn down first and re-created on
+    // the new node.
     function rebuildField(fieldId, pairs, preselectValue, placeholder) {
       var el = document.getElementById(fieldId);
       if (!el) return;
@@ -178,18 +210,14 @@
   
       if (!pairs || pairs.length === 0) {
         var input = document.createElement('input');
+        copyAttributes(el, input);
         input.type = 'text';
-        input.id = fieldId;
-        input.name = el.name;
-        input.className = el.className;
         el.replaceWith(input);
         return;
       }
   
       var select = document.createElement('select');
-      select.id = fieldId;
-      select.name = el.name;
-      select.className = el.className;
+      copyAttributes(el, select);
   
       var blank = document.createElement('option');
       blank.textContent = placeholder || '';
@@ -210,6 +238,12 @@
       enhance(fieldId);
     }
   
+    function copyAttributes(from, to) {
+      Array.prototype.forEach.call(from.attributes, function (attr) {
+        if (NON_TRANSFERABLE_ATTRIBUTES.indexOf(attr.name) === -1) to.setAttribute(attr.name, attr.value);
+      });
+    }
+  
     function enhance(fieldId) {
       if (!fieldId || typeof enhancer !== 'function') return;
       var el = document.getElementById(fieldId);

metadata

@@ -1,13 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: country_state_select
 version: !ruby/object:Gem::Version
-  version: 4.0.0
+  version: 4.0.1
 platform: ruby
 authors:
 - Arvind Vyas
+autorequire:
 bindir: bin
 cert_chain: []
-date: 1980-01-02 00:00:00.000000000 Z
+date: 2026-11-11 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: bundler
@@ -185,6 +186,7 @@ executables: []
 extensions: []
 extra_rdoc_files: []
 files:
+- ".github/dependabot.yml"
 - ".github/workflows/ci.yml"
 - ".gitignore"
 - ".rspec"
@@ -207,6 +209,7 @@ files:
 - gemfiles/rails_7.1.gemfile
 - gemfiles/rails_7.2.gemfile
 - gemfiles/rails_8.0.gemfile
+- gemfiles/rails_8.1.gemfile
 - lib/country_state_select.rb
 - lib/country_state_select/configuration.rb
 - lib/country_state_select/country_metadata.rb
@@ -220,6 +223,7 @@ files:
 - lib/generators/country_state_select/install/install_generator.rb
 - lib/generators/country_state_select/install/templates/README
 - lib/generators/country_state_select/install/templates/initializer.rb
+- package-lock.json
 - package.json
 - spec/country_state_select_spec.rb
 - spec/lib/country_state_select/configuration_spec.rb
@@ -229,6 +233,7 @@ files:
 - spec/requests/business_form_spec.rb
 - spec/requests/lookups_spec.rb
 - spec/spec_helper.rb
+- test/javascript/country_state_select.test.mjs
 - vendor/assets/javascript/country_state_select.js.erb
 - vendor/assets/javascript/country_state_select_vanilla.js
 homepage: https://github.com/arvindvyas/Country-State-Select
@@ -236,6 +241,7 @@ licenses:
 - MIT
 metadata:
   changelog_uri: https://github.com/arvindvyas/Country-State-Select/blob/master/CHANGELOG.md
+post_install_message:
 rdoc_options: []
 require_paths:
 - lib
@@ -250,7 +256,8 @@ required_rubygems_version: !ruby/object:Gem::Requirement
     - !ruby/object:Gem::Version
       version: '0'
 requirements: []
-rubygems_version: 4.0.11
+rubygems_version: 3.5.22
+signing_key:
 specification_version: 4
 summary: Dynamically select Country and State.
 test_files:
@@ -262,3 +269,4 @@ test_files:
 - spec/requests/business_form_spec.rb
 - spec/requests/lookups_spec.rb
 - spec/spec_helper.rb
+- test/javascript/country_state_select.test.mjs