diff --git a/static/js/settings_account.js b/static/js/settings_account.js
index df7d36fd37..77a424e185 100644
--- a/static/js/settings_account.js
+++ b/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() {
diff --git a/static/js/settings_users.js b/static/js/settings_users.js
index acce49abda..fd37695582 100644
--- a/static/js/settings_users.js
+++ b/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();
diff --git a/static/templates/settings/custom_user_profile_field.hbs b/static/templates/settings/custom_user_profile_field.hbs
index 7a7e2e8ebb..2004015427 100644
--- a/static/templates/settings/custom_user_profile_field.hbs
+++ b/static/templates/settings/custom_user_profile_field.hbs
@@ -22,6 +22,8 @@
{{else if is_url_field }}
+ {{else if is_pronouns_field}}
+
{{else}}
{{/if}}
diff --git a/tools/lib/capitalization.py b/tools/lib/capitalization.py
index fe4d099e5e..796be5e77f 100644
--- a/tools/lib/capitalization.py
+++ b/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