fix(native-filters): Ensure that time range filter loses focus after closing modal (#22937)

superset-frontend/src/explore/components/controls/DateFilterControl/DateFilterLabel.tsx

@@ -248,27 +248,28 @@ export default function DateFilterLabel(props: DateFilterControlProps) {
   function onSave() {
     onChange(timeRangeValue);
     setShow(false);
+    onClosePopover();
   }
 
   function onOpen() {
     setTimeRangeValue(value);
     setFrame(guessedFrame);
     setShow(true);
+    onOpenPopover();
   }
 
   function onHide() {
     setTimeRangeValue(value);
     setFrame(guessedFrame);
     setShow(false);
+    onClosePopover();
   }
 
   const toggleOverlay = () => {
     if (show) {
       onHide();
-      onClosePopover();
     } else {
       onOpen();
-      onOpenPopover();
     }
   };
 

superset-frontend/src/explore/components/controls/DateFilterControl/tests/DateFilterLabel.test.tsx

@@ -31,23 +31,25 @@ import { DATE_FILTER_TEST_KEY } from '../utils';
 
 const mockStore = configureStore([thunk]);
 
+const defaultProps = {
+  onChange: jest.fn(),
+  onClosePopover: jest.fn(),
+  onOpenPopover: jest.fn(),
+};
+
 function setup(
-  props: Omit<DateFilterControlProps, 'name'>,
+  props: Omit<DateFilterControlProps, 'name'> = defaultProps,
   store: any = mockStore({}),
 ) {
   return (
     <Provider store={store}>
-      <DateFilterLabel
+      <DateFilterLabel name="time_range" {...props} />
-        name="time_range"
-        onChange={props.onChange}
-        overlayStyle={props.overlayStyle}
-      />
     </Provider>
   );
 }
 
 test('DateFilter with default props', () => {
-  render(setup({ onChange: () => {} }));
+  render(setup());
   // label
   expect(screen.getByText(NO_TIME_RANGE)).toBeInTheDocument();
 
@@ -58,7 +60,7 @@ test('DateFilter with default props', () => {
   ).toBeInTheDocument();
 });
 
-test('DateFilter shoule be applied the overlayStyle props', () => {
+test('DateFilter should be applied the overlayStyle props', () => {
   render(setup({ onChange: () => {}, overlayStyle: 'Modal' }));
   // should be Modal as overlay
   userEvent.click(screen.getByText(NO_TIME_RANGE));
@@ -67,10 +69,10 @@ test('DateFilter shoule be applied the overlayStyle props', () => {
   ).toBeInTheDocument();
 });
 
-test('DateFilter shoule be applied the global config time_filter from the store', () => {
+test('DateFilter should be applied the global config time_filter from the store', () => {
   render(
     setup(
-      { onChange: () => {} },
+      defaultProps,
       mockStore({
         common: { conf: { DEFAULT_TIME_FILTER: 'Last week' } },
       }),
@@ -84,3 +86,23 @@ test('DateFilter shoule be applied the global config time_filter from the store'
     screen.getByTestId(DATE_FILTER_TEST_KEY.commonFrame),
   ).toBeInTheDocument();
 });
+
+test('Open and close popover', () => {
+  render(setup());
+
+  // click "Cancel"
+  userEvent.click(screen.getByText(NO_TIME_RANGE));
+  expect(defaultProps.onOpenPopover).toHaveBeenCalled();
+  expect(screen.getByText('Edit time range')).toBeInTheDocument();
+  userEvent.click(screen.getByText('CANCEL'));
+  expect(defaultProps.onClosePopover).toHaveBeenCalled();
+  expect(screen.queryByText('Edit time range')).not.toBeInTheDocument();
+
+  // click "Apply"
+  userEvent.click(screen.getByText(NO_TIME_RANGE));
+  expect(defaultProps.onOpenPopover).toHaveBeenCalled();
+  expect(screen.getByText('Edit time range')).toBeInTheDocument();
+  userEvent.click(screen.getByText('APPLY'));
+  expect(defaultProps.onClosePopover).toHaveBeenCalled();
+  expect(screen.queryByText('Edit time range')).not.toBeInTheDocument();
+});

superset-frontend/src/filters/components/Time/TimeFilterPlugin.tsx

@@ -97,7 +97,11 @@ export default function TimeFilterPlugin(props: PluginFilterTimeProps) {
           name="time_range"
           onChange={handleTimeRangeChange}
           onOpenPopover={() => setFilterActive(true)}
-          onClosePopover={() => setFilterActive(false)}
+          onClosePopover={() => {
+            setFilterActive(false);
+            unsetHoveredFilter();
+            unsetFocusedFilter();
+          }}
           isOverflowingFilterBar={isOverflowingFilterBar}
         />
       </ControlContainer>