@countriesdb/widget 0.1.25 → 0.1.27

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);
     }
 }
 /**
@@ -107,6 +127,11 @@ export async function updateSubdivisionSelect(select, apiKey, backendUrl, state,
                 const dataDefaultValue = !isMultiple
                     ? select.dataset.defaultValue
                     : undefined;
+                // Preserve user's current selection before clearing innerHTML
+                // This prevents preselected values from overwriting user selections
+                const currentValue = select.value;
+                const defaultValue = select.dataset.defaultValue || '';
+                const hasUserSelection = currentValue && currentValue !== defaultValue && currentValue.trim() !== '';
                 select.innerHTML = buildSubdivisionOptionsHTML(subdivisions, select, subdivisionsLanguage, config.showSubdivisionType, config.allowParentSelection, config.subdivisionNameFilter);
                 // Restore data attributes after setting innerHTML
                 if (!isMultiple) {
@@ -117,41 +142,53 @@ export async function updateSubdivisionSelect(select, apiKey, backendUrl, state,
                         select.dataset.defaultValue = dataDefaultValue;
                     }
                 }
-                // Manual preselection wins
-                // Check if preselected value exists (applyPreselectedValue will read it from select element)
-                const hasPreselectedValue = (select.getAttribute('data-preselected') || select.dataset.preselected || select.dataset._widgetTempPreselect) !== undefined;
-                if (hasPreselectedValue) {
-                    applyPreselectedValue(select, apiKey);
-                    dispatchUpdateEvent(select, {
-                        type: 'subdivision',
-                        reason: 'preselected',
-                    });
-                    valueSetByWidget = true;
-                    await triggerFollowLogic(select, apiKey, backendUrl, state, config.followRelated, config.followUpward, (s, key, code) => updateSubdivisionSelect(s, key, backendUrl, state, config, code), (countrySelect, key) => updateSubdivisions(countrySelect, key, backendUrl, state, config));
+                // Restore user's selection if it exists in the new options (user selection takes priority)
+                let userSelectionRestored = false;
+                if (hasUserSelection && !isMultiple) {
+                    const optionExists = Array.from(select.options).some(opt => opt.value === currentValue);
+                    if (optionExists) {
+                        select.value = currentValue;
+                        userSelectionRestored = true;
+                        // Don't dispatch event here - user already selected it, no need to notify again
+                    }
                 }
-                else {
-                    // Try GeoIP preselect
-                    if (shouldUseGeoIP) {
-                        const preselectedSubdivision = subdivisions.find((subdivision) => subdivision.preselected);
-                        if (preselectedSubdivision) {
-                            const isMultiple = select.hasAttribute('multiple');
-                            if (isMultiple) {
-                                // For multi-select, find and select the option
-                                const option = Array.from(select.options).find((opt) => opt.value === preselectedSubdivision.code);
-                                if (option) {
-                                    option.selected = true;
+                // Manual preselection only if user hasn't selected anything
+                if (!userSelectionRestored) {
+                    // Check if preselected value exists (applyPreselectedValue will read it from select element)
+                    const hasPreselectedValue = (select.getAttribute('data-preselected') || select.dataset.preselected || select.dataset._widgetTempPreselect) !== undefined;
+                    if (hasPreselectedValue) {
+                        applyPreselectedValue(select, apiKey);
+                        dispatchUpdateEvent(select, {
+                            type: 'subdivision',
+                            reason: 'preselected',
+                        });
+                        valueSetByWidget = true;
+                        await triggerFollowLogic(select, apiKey, backendUrl, state, config.followRelated, config.followUpward, (s, key, code) => updateSubdivisionSelect(s, key, backendUrl, state, config, code), (countrySelect, key) => updateSubdivisions(countrySelect, key, backendUrl, state, config));
+                    }
+                    else {
+                        // Try GeoIP preselect (only if user hasn't selected anything)
+                        if (shouldUseGeoIP) {
+                            const preselectedSubdivision = subdivisions.find((subdivision) => subdivision.preselected);
+                            if (preselectedSubdivision) {
+                                const isMultiple = select.hasAttribute('multiple');
+                                if (isMultiple) {
+                                    // For multi-select, find and select the option
+                                    const option = Array.from(select.options).find((opt) => opt.value === preselectedSubdivision.code);
+                                    if (option) {
+                                        option.selected = true;
+                                    }
                                 }
+                                else {
+                                    // Single select: set value directly
+                                    select.value = preselectedSubdivision.code;
+                                }
+                                dispatchUpdateEvent(select, {
+                                    type: 'subdivision',
+                                    reason: 'geoip',
+                                });
+                                valueSetByWidget = true;
+                                await triggerFollowLogic(select, apiKey, backendUrl, state, config.followRelated, config.followUpward, (s, key, code) => updateSubdivisionSelect(s, key, backendUrl, state, config, code), (countrySelect, key) => updateSubdivisions(countrySelect, key, backendUrl, state, config));
                             }
-                            else {
-                                // Single select: set value directly
-                                select.value = preselectedSubdivision.code;
-                            }
-                            dispatchUpdateEvent(select, {
-                                type: 'subdivision',
-                                reason: 'geoip',
-                            });
-                            valueSetByWidget = true;
-                            await triggerFollowLogic(select, apiKey, backendUrl, state, config.followRelated, config.followUpward, (s, key, code) => updateSubdivisionSelect(s, key, backendUrl, state, config, code), (countrySelect, key) => updateSubdivisions(countrySelect, key, backendUrl, state, config));
                         }
                     }
                 }
@@ -274,8 +311,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 +339,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.25",
+  "version": "0.1.27",
   "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",