From e237faabf5c0501c2752d942d2b988f8002c7ccb Mon Sep 17 00:00:00 2001
From: joseph <josephho678@gmail.com>
Date: Tue, 12 Nov 2024 23:02:15 +0000
Subject: [PATCH] settings: Open the date picker when its label has been
 clicked.

Flatpickr isn't a native input element, so clicking on its label
doesn't do anything. Add an event listener so that clicking on the
label will open the date picker.

Fixes part of #21769.
---
 web/src/custom_profile_fields_ui.ts | 7 +++++++
 1 file changed, 7 insertions(+)

diff --git a/web/src/custom_profile_fields_ui.ts b/web/src/custom_profile_fields_ui.ts
index 28c0b634b3..e5afc63d22 100644
--- a/web/src/custom_profile_fields_ui.ts
+++ b/web/src/custom_profile_fields_ui.ts
@@ -170,6 +170,13 @@ export function initialize_custom_date_type_fields(element_id: string): void {
         static: true,
     });
 
+    // Enable the label associated to this field to open the datepicker when clicked.
+    $(element_id)
+        .find(".custom_user_field label.settings-field-label")
+        .on("click", function () {
+            $(this).closest(".custom_user_field").find("input.datepicker").trigger("click");
+        });
+
     $(element_id)
         .find<HTMLInputElement>(".custom_user_field input.datepicker")
         .on("mouseenter", function () {