diff --git a/superset-frontend/src/explore/components/controls/DndColumnSelectControl/DndMetricSelect.test.tsx b/superset-frontend/src/explore/components/controls/DndColumnSelectControl/DndMetricSelect.test.tsx
index b859aa09e1e63..ae6a8b31f23fc 100644
--- a/superset-frontend/src/explore/components/controls/DndColumnSelectControl/DndMetricSelect.test.tsx
+++ b/superset-frontend/src/explore/components/controls/DndColumnSelectControl/DndMetricSelect.test.tsx
@@ -120,6 +120,62 @@ test('remove selected custom metric when metric gets removed from dataset', () =
expect(screen.getByText('SUM(Column B)')).toBeVisible();
});
+test('remove selected custom metric when metric gets removed from dataset for single-select metric control', () => {
+ let metricValue = 'metric_b';
+
+ const onChange = (val: any) => {
+ metricValue = val;
+ };
+
+ const { rerender } = render(
+ ,
+ {
+ useDnd: true,
+ },
+ );
+
+ expect(screen.getByText('Metric B')).toBeVisible();
+ expect(
+ screen.queryByText('Drop column or metric here'),
+ ).not.toBeInTheDocument();
+
+ const newPropsWithRemovedMetric = {
+ ...defaultProps,
+ savedMetrics: [
+ {
+ metric_name: 'metric_a',
+ expression: 'expression_a',
+ },
+ ],
+ };
+
+ // rerender twice - first to update columns, second to update value
+ rerender(
+ ,
+ );
+ rerender(
+ ,
+ );
+
+ expect(screen.queryByText('Metric B')).not.toBeInTheDocument();
+ expect(screen.getByText('Drop column or metric here')).toBeVisible();
+});
+
test('remove selected adhoc metric when column gets removed from dataset', async () => {
let metricValues = ['metric_a', 'metric_b', adhocMetricA, adhocMetricB];
const onChange = (val: any[]) => {
diff --git a/superset-frontend/src/explore/components/controls/DndColumnSelectControl/DndMetricSelect.tsx b/superset-frontend/src/explore/components/controls/DndColumnSelectControl/DndMetricSelect.tsx
index 1936eb8995135..2e7dc5718fcc4 100644
--- a/superset-frontend/src/explore/components/controls/DndColumnSelectControl/DndMetricSelect.tsx
+++ b/superset-frontend/src/explore/components/controls/DndColumnSelectControl/DndMetricSelect.tsx
@@ -87,7 +87,7 @@ const getMetricsMatchingCurrentDataset = (
savedMetrics: (savedMetricType | Metric)[],
prevColumns: ColumnMeta[],
prevSavedMetrics: (savedMetricType | Metric)[],
-) => {
+): ValueType[] => {
const areSavedMetricsEqual =
!prevSavedMetrics || isEqual(prevSavedMetrics, savedMetrics);
const areColsEqual = !prevColumns || isEqual(prevColumns, columns);
@@ -96,16 +96,17 @@ const getMetricsMatchingCurrentDataset = (
return values;
}
return values.reduce((acc: ValueType[], metric) => {
- if (
- (typeof metric === 'string' || (metric as Metric).metric_name) &&
- (areSavedMetricsEqual ||
+ if (typeof metric === 'string' || (metric as Metric).metric_name) {
+ if (
+ areSavedMetricsEqual ||
savedMetrics?.some(
savedMetric =>
savedMetric.metric_name === metric ||
savedMetric.metric_name === (metric as Metric).metric_name,
- ))
- ) {
- acc.push(metric);
+ )
+ ) {
+ acc.push(metric);
+ }
return acc;
}