settings: Show typeahead for pronouns type custom profile field.

User can add any pronouns in this field, but we just show some
commonly used pronouns as suggestions in typeahead.

static/js/settings_account.js

@@ -14,7 +14,7 @@ import * as common from "./common";
 import * as confirm_dialog from "./confirm_dialog";
 import {csrf_token} from "./csrf";
 import * as dialog_widget from "./dialog_widget";
-import {$t_html} from "./i18n";
+import {$t, $t_html} from "./i18n";
 import * as overlays from "./overlays";
 import {page_params} from "./page_params";
 import * as people from "./people";
@@ -22,6 +22,7 @@ import * as pill_typeahead from "./pill_typeahead";
 import * as settings_bots from "./settings_bots";
 import * as settings_data from "./settings_data";
 import * as settings_ui from "./settings_ui";
+import * as typeahead_helper from "./typeahead_helper";
 import * as ui_report from "./ui_report";
 import * as user_pill from "./user_pill";
 import * as user_profile from "./user_profile";
@@ -148,6 +149,7 @@ export function append_custom_profile_fields(element_id, user_id) {
         [all_field_types.DATE.id, "date"],
         [all_field_types.EXTERNAL_ACCOUNT.id, "text"],
         [all_field_types.URL.id, "url"],
+        [all_field_types.PRONOUNS.id, "text"],
     ]);
 
     for (const field of all_custom_fields) {
@@ -179,6 +181,7 @@ export function append_custom_profile_fields(element_id, user_id) {
             is_user_field: field.type === all_field_types.USER.id,
             is_date_field: field.type === all_field_types.DATE.id,
             is_url_field: field.type === all_field_types.URL.id,
+            is_pronouns_field: field.type === all_field_types.PRONOUNS.id,
             is_select_field,
             field_choices,
         });
@@ -280,6 +283,27 @@ export function initialize_custom_user_type_fields(
     return user_pills;
 }
 
+export function initialize_custom_pronouns_type_fields(element_id) {
+    const commonly_used_pronouns = [
+        $t({defaultMessage: "he/him"}),
+        $t({defaultMessage: "she/her"}),
+        $t({defaultMessage: "they/them"}),
+    ];
+    $(element_id)
+        .find(".pronouns_type_field")
+        .typeahead({
+            items: 3,
+            fixed: true,
+            helpOnEmptyStrings: true,
+            source() {
+                return commonly_used_pronouns;
+            },
+            highlighter(item) {
+                return typeahead_helper.render_typeahead_item({primary: item});
+            },
+        });
+}
+
 export function add_custom_profile_fields_to_settings() {
     if (!overlays.settings_open()) {
         return;
@@ -291,6 +315,7 @@ export function add_custom_profile_fields_to_settings() {
     append_custom_profile_fields(element_id, people.my_current_user_id());
     initialize_custom_user_type_fields(element_id, people.my_current_user_id(), true, true);
     initialize_custom_date_type_fields(element_id);
+    initialize_custom_pronouns_type_fields(element_id);
 }
 
 export function hide_confirm_email_banner() {

static/js/settings_users.js

@@ -596,6 +596,7 @@ export function show_edit_user_info_modal(user_id, from_user_info_popover) {
             true,
             false,
         );
+        settings_account.initialize_custom_pronouns_type_fields(element);
 
         $("#edit-user-form").on("click", ".deactivate_user_button", (e) => {
             e.preventDefault();

static/templates/settings/custom_user_profile_field.hbs

@@ -22,6 +22,8 @@
         <span class="remove_date"><i class="fa fa-close"></i></span>
         {{else if is_url_field }}
         <input class="custom_user_field_value" type="{{ field_type }}" value="{{ field_value.value }}" maxlength="2048" />
+        {{else if is_pronouns_field}}
+        <input class="custom_user_field_value pronouns_type_field" type="{{ field_type }}" value="{{ field_value.value }}" maxlength="50" />
         {{else}}
         <input class="custom_user_field_value" type="{{ field_type }}" value="{{ field_value.value }}" maxlength="50" />
         {{/if}}

tools/lib/capitalization.py

@@ -116,6 +116,10 @@ IGNORED_PHRASES = [
     "Notification Bot",
     # Used in presence_enabled setting label
     r"invisible mode off",
+    # Typeahead suggestions for "Pronouns" custom field type.
+    r"he/him",
+    r"she/her",
+    r"they/them",
 ]
 
 # Sort regexes in descending order of their lengths. As a result, the