From b3196e531033d009f216d1a26f156298d3e7f4ce Mon Sep 17 00:00:00 2001
From: Satyam Bansal <sbansal1999@gmail.com>
Date: Wed, 10 May 2023 23:35:03 +0530
Subject: [PATCH] settings: Close date-picker when settings modal is closed.

Previously, if the user closes the settings modal by pressing
the "Esc" key and if any date-pickers were open then they would
remain on the screen. This commit fixes that and now date-pickers
are closed when the settings modal is closed.

Also added a puppeteer test to verify the said behavior.

Fixes part of #25097.
---
 web/e2e-tests/settings.test.ts | 12 ++++++++++++
 web/src/settings.js            |  2 ++
 2 files changed, 14 insertions(+)

diff --git a/web/e2e-tests/settings.test.ts b/web/e2e-tests/settings.test.ts
index 526ba07a3f..e315b18327 100644
--- a/web/e2e-tests/settings.test.ts
+++ b/web/e2e-tests/settings.test.ts
@@ -34,6 +34,16 @@ async function open_settings(page: Page): Promise<void> {
     );
 }
 
+async function close_settings_and_date_picker(page: Page): Promise<void> {
+    const date_picker_selector = ".custom_user_field_value.datepicker.form-control";
+    await page.click(date_picker_selector);
+
+    await page.waitForSelector(".flatpickr-calendar", {visible: true});
+
+    await page.keyboard.press("Escape");
+    await page.waitForSelector(".flatpickr-calendar", {hidden: true});
+}
+
 async function test_change_full_name(page: Page): Promise<void> {
     await page.click("#full_name");
 
@@ -439,6 +449,8 @@ async function test_notifications_section(page: Page): Promise<void> {
 async function settings_tests(page: Page): Promise<void> {
     await common.log_in(page);
     await open_settings(page);
+    await close_settings_and_date_picker(page);
+    await open_settings(page);
     await test_change_full_name(page);
     await test_alert_words_section(page);
     await test_your_bots_section(page);
diff --git a/web/src/settings.js b/web/src/settings.js
index 5fb9134a74..1d3d0a7130 100644
--- a/web/src/settings.js
+++ b/web/src/settings.js
@@ -7,6 +7,7 @@ import render_settings_tab from "../templates/settings_tab.hbs";
 
 import * as blueslip from "./blueslip";
 import * as browser_history from "./browser_history";
+import * as flatpickr from "./flatpickr";
 import {$t, $t_html} from "./i18n";
 import * as overlays from "./overlays";
 import {page_params} from "./page_params";
@@ -128,6 +129,7 @@ export function open_settings_overlay() {
         $overlay: $("#settings_overlay_container"),
         on_close() {
             browser_history.exit_overlay();
+            flatpickr.close_all();
         },
     });
 }