settings: Focus on the input when its label has been clicked.

Our user type field utilizes the contenteditable div which isn't a
labelable element, so clicking on its label doesn't do anything. Add
an event listener so that clicking on the label will focus on the input.

The cursor will always be placed at the start of the input if the field
is accessed in this way. This is the browser's default behavior.

Fixes part of #21769.

web/src/custom_profile_fields_ui.ts

@@ -154,6 +154,16 @@ export function initialize_custom_user_type_fields(
         }
     }
 
+    // Enable the label associated to this field to focus on the input when clicked.
+    $(element_id)
+        .find(".custom_user_field label.settings-field-label")
+        .on("click", function () {
+            const $input_element = $(this)
+                .closest(".custom_user_field")
+                .find(".person_picker.pill-container .input");
+            $input_element.trigger("focus");
+        });
+
     return user_pills;
 }