@countriesdb/widget 0.1.26 → 0.1.28

package/dist/index.js

@@ -844,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) {
@@ -854,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));
                             }
                         }
                     }
@@ -923,6 +940,27 @@
             select.innerHTML += `<option value="${defaultValue}" disabled>Error: No country select present</option>`;
         }
     }
+    /**
+     * Get current subdivision config from window.CountriesDBConfig
+     * This ensures we always use the latest config values, even after widget reload
+     */
+    function getCurrentSubdivisionConfig(apiKey, backendUrl) {
+        const globalConfig = typeof window !== 'undefined' && window.CountriesDBConfig
+            ? window.CountriesDBConfig
+            : null;
+        return {
+            followRelated: globalConfig?.followRelated || false,
+            followUpward: globalConfig?.followUpward || false,
+            showSubdivisionType: globalConfig?.showSubdivisionType !== false,
+            allowParentSelection: globalConfig?.allowParentSelection || false,
+            preferOfficialSubdivisions: globalConfig?.preferOfficialSubdivisions || false,
+            subdivisionRomanizationPreference: globalConfig?.subdivisionRomanizationPreference,
+            preferLocalVariant: globalConfig?.preferLocalVariant || false,
+            forcedLanguage: globalConfig?.forcedLanguage,
+            defaultLanguage: globalConfig?.defaultLanguage,
+            subdivisionNameFilter: globalConfig?.subdivisionNameFilter,
+        };
+    }
     /**
      * Update subdivisions for all linked subdivision selects when country changes
      */
@@ -1023,8 +1061,13 @@
                     }
                     // Dispatch update event for user-initiated country change
                     dispatchUpdateEvent(select, { type: 'country', reason: 'regular' });
-                    // Update subdivisions
-                    await updateSubdivisions(select, apiKey, backendUrl, state, subdivisionConfig);
+                    // Get current config dynamically to ensure we use the latest values
+                    const currentSubdivisionConfig = getCurrentSubdivisionConfig(apiKey, backendUrl);
+                    const currentConfig = typeof window !== 'undefined' && window.CountriesDBConfig
+                        ? window.CountriesDBConfig
+                        : config;
+                    // Update subdivisions with current config
+                    await updateSubdivisions(select, apiKey, backendUrl, state, currentSubdivisionConfig);
                     const chosen = select.value;
                     if (!chosen) {
                         return;
@@ -1036,8 +1079,9 @@
                     }
                     // followUpward from country perspective
                     // Only works when country is single-select (never for multi-select)
-                    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));
+                    const currentFollowUpward = currentConfig?.followUpward || false;
+                    if (currentFollowUpward && !select.multiple && picked.is_subdivision_of) {
+                        await handleFollowUpwardFromCountry(select, apiKey, backendUrl, state, currentFollowUpward, (s, key, code) => updateSubdivisionSelect(s, key, backendUrl, state, currentSubdivisionConfig, code));
                     }
                 };
                 // Store and attach the handler
@@ -1154,7 +1198,7 @@
                 followRelated: config.followRelated || false,
                 followUpward: config.followUpward || false,
                 countryNameFilter: config.countryNameFilter,
-            }, subdivisionConfig);
+            });
             // After countries are set up, update subdivisions for any preselected countries
             const countrySelects = Array.from(document.querySelectorAll('.country-selection'));
             for (const select of countrySelects) {