fix(dashboard): adds dependent filter select first value fixes

superset-frontend/cypress-base/cypress/e2e/dashboard/nativeFilters.test.ts

@@ -22,6 +22,7 @@ import {
   dataTestChartName,
 } from 'cypress/support/directories';
 
+import { waitForChartLoad } from 'cypress/utils';
 import {
   addParentFilterWithValue,
   applyNativeFilterValueWithIndex,
@@ -160,6 +161,74 @@ describe('Native filters', () => {
       );
     });
 
+    it('Dependent filter selects first item based on parent filter selection', () => {
+      prepareDashboardFilters([
+        { name: 'region', column: 'region', datasetId: 2 },
+        { name: 'country_name', column: 'country_name', datasetId: 2 },
+      ]);
+
+      enterNativeFilterEditModal();
+
+      selectFilter(0);
+      cy.get(nativeFilters.filterConfigurationSections.displayedSection).within(
+        () => {
+          cy.contains('Select first filter value by default')
+            .should('be.visible')
+            .click();
+        },
+      );
+      cy.get(nativeFilters.filterConfigurationSections.displayedSection).within(
+        () => {
+          cy.contains('Can select multiple values ')
+            .should('be.visible')
+            .click();
+        },
+      );
+
+      selectFilter(1);
+      cy.get(nativeFilters.filterConfigurationSections.displayedSection).within(
+        () => {
+          cy.contains('Values are dependent on other filters')
+            .should('be.visible')
+            .click();
+        },
+      );
+      cy.get(nativeFilters.filterConfigurationSections.displayedSection).within(
+        () => {
+          cy.contains('Can select multiple values ')
+            .should('be.visible')
+            .click();
+        },
+      );
+      addParentFilterWithValue(0, testItems.topTenChart.filterColumnRegion);
+      cy.get(nativeFilters.filterConfigurationSections.displayedSection).within(
+        () => {
+          cy.contains('Select first filter value by default')
+            .should('be.visible')
+            .click();
+        },
+      );
+
+      // cannot use saveNativeFilterSettings because there is a bug which
+      // sometimes does not allow charts to load when enabling the 'Select first filter value by default'
+      // to be saved when using dependent filters so,
+      // you reload the window.
+      cy.get(nativeFilters.modal.footer)
+        .contains('Save')
+        .should('be.visible')
+        .click({ force: true });
+
+      cy.get(nativeFilters.modal.container).should('not.exist');
+      cy.reload();
+
+      applyNativeFilterValueWithIndex(0, 'North America');
+
+      // Check that dependent filter auto-selects the first item
+      cy.get(nativeFilters.filterFromDashboardView.filterContent)
+        .eq(1)
+        .should('contain.text', 'Bermuda');
+    });
+
     it('User can create filter depend on 2 other filters', () => {
       prepareDashboardFilters([
         { name: 'region', column: 'region', datasetId: 2 },

superset-frontend/src/dashboard/components/nativeFilters/FilterBar/FilterControls/FilterValue.tsx

@@ -155,6 +155,37 @@ const FilterValue: FC<FilterControlProps> = ({
       dashboardId,
     });
     const filterOwnState = filter.dataMask?.ownState || {};
+    // if (Object.keys(dataMaskSelected))
+    if (filter?.cascadeParentIds?.length) {
+      // Prevent unnecessary backend requests by validating parent filter selections first
+
+      let selectedParentFilterValueCounts = 0;
+
+      filter?.cascadeParentIds?.forEach(pId => {
+        if (
+          dataMaskSelected?.[pId]?.extraFormData?.filters ||
+          dataMaskSelected?.[pId]?.extraFormData?.time_range
+        ) {
+          selectedParentFilterValueCounts +=
+            dataMaskSelected?.[pId]?.extraFormData?.filters?.length ?? 1;
+        }
+      });
+
+      // check if all parent filters with defaults have a value selected
+
+      let depsCount = dependencies.filters?.length ?? 0;
+
+      if (dependencies?.time_range) {
+        depsCount += 1;
+      }
+
+      if (selectedParentFilterValueCounts !== depsCount) {
+        // child filter should not request backend until it
+        // has all the required information from parent filters
+        return;
+      }
+    }
+
     // TODO: We should try to improve our useEffect hooks to depend more on
     // granular information instead of big objects that require deep comparison.
     const customizer = (
@@ -226,6 +257,7 @@ const FilterValue: FC<FilterControlProps> = ({
     hasDataSource,
     isRefreshing,
     shouldRefresh,
+    dataMaskSelected,
   ]);
 
   useEffect(() => {

superset-frontend/src/filters/components/Select/SelectFilterPlugin.tsx

@@ -151,6 +151,8 @@ export default function PluginFilterSelect(props: PluginFilterSelectProps) {
   const [col] = groupby;
   const [initialColtypeMap] = useState(coltypeMap);
   const [search, setSearch] = useState('');
+  const isChangedByUser = useRef(false);
+  const prevDataRef = useRef(data);
   const [dataMask, dispatchDataMask] = useImmerReducer(reducer, {
     extraFormData: {},
     filterState,
@@ -271,6 +273,8 @@ export default function PluginFilterSelect(props: PluginFilterSelectProps) {
       } else {
         updateDataMask(values);
       }
+
+      isChangedByUser.current = true;
     },
     [updateDataMask, formData.nativeFilterId, clearAllTrigger],
   );
@@ -368,6 +372,57 @@ export default function PluginFilterSelect(props: PluginFilterSelectProps) {
     inverseSelection,
   ]);
 
+  useEffect(() => {
+    const prev = prevDataRef.current;
+    const curr = data;
+
+    const stringifySafe = (val: unknown) =>
+      typeof val === 'bigint' ? val.toString() : val;
+
+    const hasDataChanged =
+      prev?.length !== curr?.length ||
+      JSON.stringify(prev?.map(row => stringifySafe(row[col]))) !==
+        JSON.stringify(curr?.map(row => stringifySafe(row[col])));
+
+    // If data actually changed (e.g., due to parent filter), reset flag
+    if (hasDataChanged) {
+      isChangedByUser.current = false;
+      prevDataRef.current = data;
+    }
+  }, [data, col]);
+
+  useEffect(() => {
+    if (
+      isChangedByUser.current &&
+      filterState.value &&
+      data.some(row => row[col] === filterState.value[0])
+    )
+      return;
+
+    const firstItem: SelectValue = data[0]
+      ? (groupby.map(col => data[0][col]) as string[])
+      : null;
+
+    if (
+      defaultToFirstItem &&
+      Object.keys(formData?.extraFormData || {}).length &&
+      filterState.value !== undefined &&
+      firstItem !== null &&
+      filterState.value !== firstItem
+    ) {
+      if (firstItem?.[0] !== undefined) {
+        updateDataMask(firstItem);
+      }
+    }
+  }, [
+    defaultToFirstItem,
+    updateDataMask,
+    formData,
+    data,
+    JSON.stringify(filterState.value),
+    isChangedByUser.current,
+  ]);
+
   useEffect(() => {
     setDataMask(dataMask);
   }, [JSON.stringify(dataMask)]);