@countriesdb/widget 0.1.24 → 0.1.26

package/dist/initialization.js

@@ -35,27 +35,47 @@ export async function setupSubdivisionSelection(apiKey, backendUrl, state, confi
                 select.innerHTML += `<option value="${defaultValue}" disabled>Error: No country select present</option>`;
             }
         }
+        // Remove old event handlers if they exist (for re-initialization)
+        const oldHandlers = state.eventHandlers.get(select);
+        if (oldHandlers) {
+            if (oldHandlers.update) {
+                select.removeEventListener('change', oldHandlers.update);
+            }
+            if (oldHandlers.followRelated) {
+                select.removeEventListener('change', oldHandlers.followRelated);
+            }
+            if (oldHandlers.followUpward) {
+                select.removeEventListener('change', oldHandlers.followUpward);
+            }
+        }
+        // Create new event handlers
+        const handlers = {};
         // Always dispatch an update event for user-initiated subdivision changes
-        select.addEventListener('change', (event) => {
+        handlers.update = (event) => {
             if (isWidgetInitiatedEvent(event)) {
                 return;
             }
             dispatchUpdateEvent(select, { type: 'subdivision', reason: 'regular' });
-        });
+        };
+        select.addEventListener('change', handlers.update);
         // --- follow_related (forward direction) ---
-        select.addEventListener('change', async (event) => {
+        handlers.followRelated = async (event) => {
             if (isWidgetInitiatedEvent(event)) {
                 return;
             }
             await handleFollowRelatedFromSubdivision(select, apiKey, backendUrl, state, config.followRelated, (s, key, code) => updateSubdivisionSelect(s, key, backendUrl, state, config, code));
-        });
+        };
+        select.addEventListener('change', handlers.followRelated);
         // --- follow_upward (reverse direction) ---
-        select.addEventListener('change', async (event) => {
+        handlers.followUpward = async (event) => {
             if (isWidgetInitiatedEvent(event)) {
                 return;
             }
             await handleFollowUpwardFromSubdivision(select, apiKey, backendUrl, state, config.followUpward, (s, key, code) => updateSubdivisionSelect(s, key, backendUrl, state, config, code));
-        });
+        };
+        select.addEventListener('change', handlers.followUpward);
+        // Store handlers for future cleanup
+        state.eventHandlers.set(select, handlers);
     }
 }
 /**
@@ -274,8 +294,13 @@ export async function setupCountrySelection(apiKey, backendUrl, state, config, s
                 // Subdivisions will be loaded by event handler
                 loadedInitialSubdivisions = true;
             }
-            // On change => update subdivisions
-            select.addEventListener('change', async (event) => {
+            // Remove old event handlers if they exist (for re-initialization)
+            const oldCountryHandlers = state.eventHandlers.get(select);
+            if (oldCountryHandlers?.countryChange) {
+                select.removeEventListener('change', oldCountryHandlers.countryChange);
+            }
+            // Create new country change handler
+            const countryChangeHandler = async (event) => {
                 if (isWidgetInitiatedEvent(event)) {
                     return;
                 }
@@ -297,7 +322,12 @@ export async function setupCountrySelection(apiKey, backendUrl, state, config, s
                 if (config.followUpward && !select.multiple && picked.is_subdivision_of) {
                     await handleFollowUpwardFromCountry(select, apiKey, backendUrl, state, config.followUpward, (s, key, code) => updateSubdivisionSelect(s, key, backendUrl, state, subdivisionConfig, code));
                 }
-            });
+            };
+            // Store and attach the handler
+            const countryHandlers = state.eventHandlers.get(select) || {};
+            countryHandlers.countryChange = countryChangeHandler;
+            state.eventHandlers.set(select, countryHandlers);
+            select.addEventListener('change', countryChangeHandler);
         }
         catch (error) {
             console.error('Failed to fetch countries:', error);

package/dist/types.d.ts

@@ -30,9 +30,16 @@ export interface UpdateEventDetail {
 export interface ReadyEventDetail extends UpdateEventDetail {
     phase: 'initial' | 'reload';
 }
+export interface EventHandlers {
+    update?: (event: Event) => void;
+    followRelated?: (event: Event) => void;
+    followUpward?: (event: Event) => void;
+    countryChange?: (event: Event) => void;
+}
 export interface WidgetState {
     countriesMap: WeakMap<SelectElement, Country[]>;
     subdivisionsMap: WeakMap<SelectElement, Subdivision[]>;
     subdivisionsLanguageMap: WeakMap<SelectElement, string>;
     isInitializing: Set<SelectElement>;
+    eventHandlers: WeakMap<SelectElement, EventHandlers>;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@countriesdb/widget",
-  "version": "0.1.24",
+  "version": "0.1.26",
   "description": "Country and state/province select widget with ISO 3166-1 and ISO 3166-2 codes. Auto-populates dropdowns with up-to-date country and subdivision data in multiple languages. Easy integration for forms, location selection, and address validation.",
   "main": "dist/index.js",
   "module": "dist/index.esm.js",