From eb539537f2d1bc75022a6d496f220fc8202b0e9b Mon Sep 17 00:00:00 2001
From: Bruno Windels <brunow@matrix.org>
Date: Mon, 9 Mar 2020 16:31:07 +0100
Subject: [PATCH] add recommendations for alt aliases

---
 src/components/views/elements/EditableItemList.js   | 3 ++-
 src/components/views/elements/Field.js              | 5 ++++-
 src/components/views/room_settings/AliasSettings.js | 6 ++++++
 src/i18n/strings/en_EN.json                         | 3 +++
 4 files changed, 15 insertions(+), 2 deletions(-)

diff --git a/src/components/views/elements/EditableItemList.js b/src/components/views/elements/EditableItemList.js
index c74fd6a4ee..3eb30c808c 100644
--- a/src/components/views/elements/EditableItemList.js
+++ b/src/components/views/elements/EditableItemList.js
@@ -123,7 +123,8 @@ export default class EditableItemList extends React.Component {
             <form onSubmit={this._onItemAdded} autoComplete="off"
                   noValidate={true} className="mx_EditableItemList_newItem">
                 <Field id={`mx_EditableItemList_new_${this.props.id}`} label={this.props.placeholder} type="text"
-                       autoComplete="off" value={this.props.newItem || ""} onChange={this._onNewItemChanged} />
+                       autoComplete="off" value={this.props.newItem || ""} onChange={this._onNewItemChanged}
+                       list={this.props.suggestionsListId} />
                 <AccessibleButton onClick={this._onItemAdded} kind="primary">
                     {_t("Add")}
                 </AccessibleButton>
diff --git a/src/components/views/elements/Field.js b/src/components/views/elements/Field.js
index 7d5ccbb72d..8583c91a01 100644
--- a/src/components/views/elements/Field.js
+++ b/src/components/views/elements/Field.js
@@ -32,6 +32,8 @@ export default class Field extends React.PureComponent {
         element: PropTypes.oneOf(["input", "select", "textarea"]),
         // The field's type (when used as an <input>). Defaults to "text".
         type: PropTypes.string,
+        // id of a <datalist> element for suggestions
+        list: PropTypes.string,
         // The field's label string.
         label: PropTypes.string,
         // The field's placeholder string. Defaults to the label.
@@ -157,7 +159,7 @@ export default class Field extends React.PureComponent {
     render() {
         const {
             element, prefix, postfix, className, onValidate, children,
-            tooltipContent, flagInvalid, tooltipClassName, ...inputProps} = this.props;
+            tooltipContent, flagInvalid, tooltipClassName, list, ...inputProps} = this.props;
 
         const inputElement = element || "input";
 
@@ -169,6 +171,7 @@ export default class Field extends React.PureComponent {
         inputProps.onFocus = this.onFocus;
         inputProps.onChange = this.onChange;
         inputProps.onBlur = this.onBlur;
+        inputProps.list = list;
 
         const fieldInput = React.createElement(inputElement, inputProps, children);
 
diff --git a/src/components/views/room_settings/AliasSettings.js b/src/components/views/room_settings/AliasSettings.js
index 7c766e3e31..aa6e6069aa 100644
--- a/src/components/views/room_settings/AliasSettings.js
+++ b/src/components/views/room_settings/AliasSettings.js
@@ -332,6 +332,11 @@ export default class AliasSettings extends React.Component {
             <div className='mx_AliasSettings'>
                 {canonicalAliasSection}
                 {localAliasesList}
+                <datalist id="mx_AliasSettings_altRecommendations">
+                    {this._getLocalNonAltAliases().map(alias => {
+                        return <option value={alias} key={alias} />;
+                    })};
+                </datalist>
                 <EditableAliasesList
                     id="roomAltAliases"
                     className={"mx_RoomSettings_altAliases"}
@@ -342,6 +347,7 @@ export default class AliasSettings extends React.Component {
                     canEdit={this.props.canSetCanonicalAlias}
                     onItemAdded={this.onAltAliasAdded}
                     onItemRemoved={this.onAltAliasDeleted}
+                    suggestionsListId="mx_AliasSettings_altRecommendations"
                     itemsLabel={_t('Alternative addresses for this room:')}
                     noItemsLabel={_t('This room has no alternative addresses')}
                     placeholder={_t(
diff --git a/src/i18n/strings/en_EN.json b/src/i18n/strings/en_EN.json
index ccf232d86d..6174ec7b15 100644
--- a/src/i18n/strings/en_EN.json
+++ b/src/i18n/strings/en_EN.json
@@ -1143,6 +1143,7 @@
     "Mark all as read": "Mark all as read",
     "Error updating main address": "Error updating main address",
     "There was an error updating the room's main address. It may not be allowed by the server or a temporary failure occurred.": "There was an error updating the room's main address. It may not be allowed by the server or a temporary failure occurred.",
+    "There was an error updating the room's alternative addresses. It may not be allowed by the server or a temporary failure occurred.": "There was an error updating the room's alternative addresses. It may not be allowed by the server or a temporary failure occurred.",
     "Error creating alias": "Error creating alias",
     "There was an error creating that alias. It may not be allowed by the server or a temporary failure occurred.": "There was an error creating that alias. It may not be allowed by the server or a temporary failure occurred.",
     "Error removing alias": "Error removing alias",
@@ -1152,6 +1153,8 @@
     "Local addresses for this room:": "Local addresses for this room:",
     "This room has no local addresses": "This room has no local addresses",
     "New address (e.g. #foo:%(localDomain)s)": "New address (e.g. #foo:%(localDomain)s)",
+    "Alternative addresses for this room:": "Alternative addresses for this room:",
+    "This room has no alternative addresses": "This room has no alternative addresses",
     "New address (e.g. #foo:domain)": "New address (e.g. #foo:domain)",
     "Error updating flair": "Error updating flair",
     "There was an error updating the flair for this room. The server may not allow it or a temporary error occurred.": "There was an error updating the flair for this room. The server may not allow it or a temporary error occurred.",