@countriesdb/widget 0.1.25 → 0.1.27

package/dist/index.js

@@ -752,27 +752,47 @@
                     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);
         }
     }
     /**
@@ -824,6 +844,11 @@
                     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) {
@@ -834,41 +859,53 @@
                             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));
                             }
                         }
                     }
@@ -991,8 +1028,13 @@
                     // 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;
                     }
@@ -1014,7 +1056,12 @@
                     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);
@@ -1089,6 +1136,7 @@
                 subdivisionsMap: new WeakMap(),
                 subdivisionsLanguageMap: new WeakMap(),
                 isInitializing: new Set(),
+                eventHandlers: new WeakMap(),
             };
             // Use empty string if publicKey is missing (will show error when API calls fail)
             const apiKey = config.publicKey || '';