Clear dependent fields on select (applegrew#597)

Co-authored-by: predatell <[email protected]>

Author: predatell

django_select2/static/django_select2/django_select2.js

@@ -57,6 +57,12 @@
       } else {
         init($element, settings)
       }
+      $element.on('select2:select', function (e) {
+        var name = $(e.currentTarget).attr('name')
+        $('[data-select2-dependent-fields=' + name + ']').each(function () {
+          $(this).val('').trigger('change')
+        })
+      })
     })
     return this
   }

tests/test_forms.py

@@ -479,7 +479,7 @@ def test_widgets_selected_after_validation_error(self, db, live_server, driver,
         WebDriverWait(driver, 60).until(
             expected_conditions.presence_of_element_located((By.CSS_SELECTOR, '.select2-selection--single'))
         )
-        country_container, city_container = driver.find_elements_by_css_selector('.select2-selection--single')
+        country_container, city_container, city2_container = driver.find_elements_by_css_selector('.select2-selection--single')
 
         # clicking city select2 lists all available cities
         city_container.click()
@@ -529,3 +529,44 @@ def test_widgets_selected_after_validation_error(self, db, live_server, driver,
         country_names_from_db = {City.objects.get(name=city_name).country.name}
         assert len(country_names_from_browser) != Country.objects.count()
         assert country_names_from_browser == country_names_from_db
+
+    def test_dependent_fields_clear_after_change_parent(self, db, live_server, driver, countries, cities):
+        driver.get(live_server + self.url)
+        country_container, city_container, city2_container = driver.find_elements_by_css_selector('.select2-selection--single')
+
+        # selecting a country really does it
+        country_container.click()
+        WebDriverWait(driver, 60).until(
+            expected_conditions.presence_of_element_located((By.CSS_SELECTOR, '.select2-results li:nth-child(2)'))
+        )
+        country_option = driver.find_element_by_css_selector('.select2-results li:nth-child(2)')
+        country_name = country_option.text
+        country_option.click()
+        assert country_name == country_container.text
+
+        # selecting a city2
+        city2_container.click()
+        WebDriverWait(driver, 60).until(
+            expected_conditions.presence_of_element_located((By.CSS_SELECTOR, '.select2-results li'))
+        )
+        city2_option = driver.find_element_by_css_selector('.select2-results li:nth-child(2)')
+        city2_name = city2_option.text
+        city2_option.click()
+        assert city2_name == city2_container.text
+
+        # change a country
+        country_container.click()
+        WebDriverWait(driver, 60).until(
+            expected_conditions.presence_of_element_located((By.CSS_SELECTOR, '.select2-results li:nth-child(3)'))
+        )
+        country_option = driver.find_element_by_css_selector('.select2-results li:nth-child(3)')
+        country_name = country_option.text
+        country_option.click()
+        assert country_name == country_container.text
+
+        # check the value in city2
+        city2_container.click()
+        WebDriverWait(driver, 60).until(
+            expected_conditions.presence_of_element_located((By.CSS_SELECTOR, '.select2-results li'))
+        )
+        assert city2_container.text == ""

tests/testapp/forms.py

@@ -204,6 +204,17 @@ class AddressChainedSelect2WidgetForm(forms.Form):
         )
     )
 
+    city2 = forms.ModelChoiceField(
+        queryset=City.objects.all(),
+        label='City not Interdependent',
+        widget=ModelSelect2Widget(
+            search_fields=['name__icontains'],
+            dependent_fields={'country': 'country'},
+            max_results=500,
+            attrs={'data-minimum-input-length': 0},
+        )
+    )
+
 
 class GroupieForm(forms.ModelForm):
     class Meta: