From d774d96290e954ad126f27e688cbb6693cf38d3f Mon Sep 17 00:00:00 2001
From: Michael Telatynski <7t3chguy@gmail.com>
Date: Sun, 30 Jun 2019 10:41:39 +0100
Subject: [PATCH 1/3] Fix some React errors

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>
---
 src/components/views/elements/EditableItemList.js         | 8 ++++----
 .../settings/tabs/user/PreferencesUserSettingsTab.js      | 2 +-
 2 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/src/components/views/elements/EditableItemList.js b/src/components/views/elements/EditableItemList.js
index c6eeb1b93c..ab0fe6e96a 100644
--- a/src/components/views/elements/EditableItemList.js
+++ b/src/components/views/elements/EditableItemList.js
@@ -121,8 +121,8 @@ export default class EditableItemList extends React.Component {
         return (
             <form onSubmit={this._onItemAdded} autoComplete={false}
                   noValidate={true} className="mx_EditableItemList_newItem">
-                <Field id="newEmailAddress" label={this.props.placeholder}
-                       type="text" autoComplete="off" value={this.props.newItem}
+                <Field id="newAddress" label={this.props.placeholder}
+                       type="text" autoComplete="off" value={this.props.newItem || ""}
                        onChange={this._onNewItemChanged}
                 />
                 <AccessibleButton onClick={this._onItemAdded} kind="primary">
@@ -135,11 +135,11 @@ export default class EditableItemList extends React.Component {
     render() {
         const editableItems = this.props.items.map((item, index) => {
             if (!this.props.canRemove) {
-                return <li>{item}</li>;
+                return <li key={item}>{item}</li>;
             }
 
             return <EditableItem
-                key={index}
+                key={item}
                 index={index}
                 value={item}
                 onRemove={this._onItemRemoved}
diff --git a/src/components/views/settings/tabs/user/PreferencesUserSettingsTab.js b/src/components/views/settings/tabs/user/PreferencesUserSettingsTab.js
index 7e99a7619a..cd60a7e9a5 100644
--- a/src/components/views/settings/tabs/user/PreferencesUserSettingsTab.js
+++ b/src/components/views/settings/tabs/user/PreferencesUserSettingsTab.js
@@ -139,7 +139,7 @@ export default class PreferencesUserSettingsTab extends React.Component {
                     {minimizeToTrayOption}
                     {autoLaunchOption}
                     <Field id={"autocompleteDelay"} label={_t('Autocomplete delay (ms)')} type='number'
-                           value={SettingsStore.getValueAt(SettingLevel.DEVICE, 'autocompleteDelay')}
+                           value={SettingsStore.getValueAt(SettingLevel.DEVICE, 'autocompleteDelay').toString(10)}
                            onChange={this._onAutocompleteDelayChange} />
                 </div>
             </div>

From 89ece266c6565deeb000813888c269f18c2d8b41 Mon Sep 17 00:00:00 2001
From: Michael Telatynski <7t3chguy@gmail.com>
Date: Sat, 6 Jul 2019 11:15:10 +0100
Subject: [PATCH 2/3] Make id used in EditableItemList unique, namespace
 mx_EditableItemList_*

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>
---
 src/components/views/elements/EditableItemList.js          | 7 +++----
 src/components/views/room_settings/AliasSettings.js        | 1 +
 src/components/views/room_settings/RelatedGroupSettings.js | 1 +
 3 files changed, 5 insertions(+), 4 deletions(-)

diff --git a/src/components/views/elements/EditableItemList.js b/src/components/views/elements/EditableItemList.js
index ab0fe6e96a..f4c1325377 100644
--- a/src/components/views/elements/EditableItemList.js
+++ b/src/components/views/elements/EditableItemList.js
@@ -88,6 +88,7 @@ export class EditableItem extends React.Component {
 
 export default class EditableItemList extends React.Component {
     static propTypes = {
+        id: PropTypes.string.isRequired,
         items: PropTypes.arrayOf(PropTypes.string).isRequired,
         itemsLabel: PropTypes.string,
         noItemsLabel: PropTypes.string,
@@ -121,10 +122,8 @@ export default class EditableItemList extends React.Component {
         return (
             <form onSubmit={this._onItemAdded} autoComplete={false}
                   noValidate={true} className="mx_EditableItemList_newItem">
-                <Field id="newAddress" label={this.props.placeholder}
-                       type="text" autoComplete="off" value={this.props.newItem || ""}
-                       onChange={this._onNewItemChanged}
-                />
+                <Field id={`mx_EditableItemList_${this.props.id}`} label={this.props.placeholder} type="text"
+                       autoComplete="off" value={this.props.newItem || ""} onChange={this._onNewItemChanged} />
                 <AccessibleButton onClick={this._onItemAdded} kind="primary">
                     {_t("Add")}
                 </AccessibleButton>
diff --git a/src/components/views/room_settings/AliasSettings.js b/src/components/views/room_settings/AliasSettings.js
index df427171f1..a4f18faa4e 100644
--- a/src/components/views/room_settings/AliasSettings.js
+++ b/src/components/views/room_settings/AliasSettings.js
@@ -234,6 +234,7 @@ export default class AliasSettings extends React.Component {
             <div className='mx_AliasSettings'>
                 {canonicalAliasSection}
                 <EditableItemList
+                    id="newRoomAlias"
                     className={"mx_RoomSettings_localAliases"}
                     items={this.state.domainToAliases[localDomain] || []}
                     newItem={this.state.newAlias}
diff --git a/src/components/views/room_settings/RelatedGroupSettings.js b/src/components/views/room_settings/RelatedGroupSettings.js
index b42ae1a8d7..41b47644cd 100644
--- a/src/components/views/room_settings/RelatedGroupSettings.js
+++ b/src/components/views/room_settings/RelatedGroupSettings.js
@@ -103,6 +103,7 @@ export default class RelatedGroupSettings extends React.Component {
         const EditableItemList = sdk.getComponent('elements.EditableItemList');
         return <div>
             <EditableItemList
+                id="newRelatedGroup"
                 items={this.state.newGroupsList}
                 className={"mx_RelatedGroupSettings"}
                 newItem={this.state.newGroupId}

From c2905bd33b4220dab39d0ffa1c31bd74023765df Mon Sep 17 00:00:00 2001
From: Michael Telatynski <7t3chguy@gmail.com>
Date: Sat, 6 Jul 2019 11:16:01 +0100
Subject: [PATCH 3/3] make things a tad saner

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>
---
 src/components/views/elements/EditableItemList.js          | 2 +-
 src/components/views/room_settings/AliasSettings.js        | 2 +-
 src/components/views/room_settings/RelatedGroupSettings.js | 2 +-
 3 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/components/views/elements/EditableItemList.js b/src/components/views/elements/EditableItemList.js
index f4c1325377..a9513cfe2f 100644
--- a/src/components/views/elements/EditableItemList.js
+++ b/src/components/views/elements/EditableItemList.js
@@ -122,7 +122,7 @@ export default class EditableItemList extends React.Component {
         return (
             <form onSubmit={this._onItemAdded} autoComplete={false}
                   noValidate={true} className="mx_EditableItemList_newItem">
-                <Field id={`mx_EditableItemList_${this.props.id}`} label={this.props.placeholder} type="text"
+                <Field id={`mx_EditableItemList_new_${this.props.id}`} label={this.props.placeholder} type="text"
                        autoComplete="off" value={this.props.newItem || ""} onChange={this._onNewItemChanged} />
                 <AccessibleButton onClick={this._onItemAdded} kind="primary">
                     {_t("Add")}
diff --git a/src/components/views/room_settings/AliasSettings.js b/src/components/views/room_settings/AliasSettings.js
index a4f18faa4e..daf5c6edc2 100644
--- a/src/components/views/room_settings/AliasSettings.js
+++ b/src/components/views/room_settings/AliasSettings.js
@@ -234,7 +234,7 @@ export default class AliasSettings extends React.Component {
             <div className='mx_AliasSettings'>
                 {canonicalAliasSection}
                 <EditableItemList
-                    id="newRoomAlias"
+                    id="roomAliases"
                     className={"mx_RoomSettings_localAliases"}
                     items={this.state.domainToAliases[localDomain] || []}
                     newItem={this.state.newAlias}
diff --git a/src/components/views/room_settings/RelatedGroupSettings.js b/src/components/views/room_settings/RelatedGroupSettings.js
index 41b47644cd..c30f446f41 100644
--- a/src/components/views/room_settings/RelatedGroupSettings.js
+++ b/src/components/views/room_settings/RelatedGroupSettings.js
@@ -103,7 +103,7 @@ export default class RelatedGroupSettings extends React.Component {
         const EditableItemList = sdk.getComponent('elements.EditableItemList');
         return <div>
             <EditableItemList
-                id="newRelatedGroup"
+                id="relatedGroups"
                 items={this.state.newGroupsList}
                 className={"mx_RelatedGroupSettings"}
                 newItem={this.state.newGroupId}