@countriesdb/widget 0.1.26 → 0.1.28

package/dist/initialization.js

@@ -127,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) {
@@ -137,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));
                         }
                     }
                 }
@@ -206,6 +223,27 @@ export async function updateSubdivisionSelect(select, apiKey, backendUrl, state,
         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
  */
@@ -306,8 +344,13 @@ export async function setupCountrySelection(apiKey, backendUrl, state, config, s
                 }
                 // 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;
@@ -319,8 +362,9 @@ export async function setupCountrySelection(apiKey, backendUrl, state, config, s
                 }
                 // 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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@countriesdb/widget",
-  "version": "0.1.26",
+  "version": "0.1.28",
   "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",