From 884abbd7e9f48b47f7da0f81b7dc4c37b51cb251 Mon Sep 17 00:00:00 2001
From: Aviral Dasgupta <me@aviraldg.com>
Date: Tue, 23 Aug 2016 00:36:31 +0530
Subject: [PATCH] Cleanup autocomplete

---
 src/autocomplete/AutocompleteProvider.js   |  7 ++-----
 src/autocomplete/CommandProvider.js        |  6 +++---
 src/autocomplete/Components.js             | 12 ++++++------
 src/autocomplete/DuckDuckGoProvider.js     |  6 ++++++
 src/autocomplete/EmojiProvider.js          |  6 +++---
 src/autocomplete/RoomProvider.js           |  6 +++---
 src/autocomplete/UserProvider.js           |  6 +++---
 src/components/views/rooms/Autocomplete.js |  3 ++-
 8 files changed, 28 insertions(+), 24 deletions(-)

diff --git a/src/autocomplete/AutocompleteProvider.js b/src/autocomplete/AutocompleteProvider.js
index e3332d014e..87d7987856 100644
--- a/src/autocomplete/AutocompleteProvider.js
+++ b/src/autocomplete/AutocompleteProvider.js
@@ -54,10 +54,7 @@ export default class AutocompleteProvider {
     }
 
     renderCompletions(completions: [React.Component]): ?React.Component {
-        return (
-            <div>
-                {completions}
-            </div>
-        );
+        console.error('stub; should be implemented in subclasses');
+        return null;
     }
 }
diff --git a/src/autocomplete/CommandProvider.js b/src/autocomplete/CommandProvider.js
index 8fb7a75aed..4652e69ddf 100644
--- a/src/autocomplete/CommandProvider.js
+++ b/src/autocomplete/CommandProvider.js
@@ -85,8 +85,8 @@ export default class CommandProvider extends AutocompleteProvider {
     }
 
     renderCompletions(completions: [React.Component]): ?React.Component {
-        return React.cloneElement(super.renderCompletions(completions), {
-            className: 'mx_Autocomplete_Completion_container_block',
-        });
+        return <div className="mx_Autocomplete_Completion_container_block">
+            {completions}
+        </div>;
     }
 }
diff --git a/src/autocomplete/Components.js b/src/autocomplete/Components.js
index f0dbc64d65..4595f7456d 100644
--- a/src/autocomplete/Components.js
+++ b/src/autocomplete/Components.js
@@ -19,9 +19,9 @@ export class TextualCompletion extends React.Component {
         } = this.props;
         return (
             <div className={classNames('mx_Autocomplete_Completion_block', className)} {...restProps}>
-                <span>{title}</span>
-                <em style={{flex: 1}}>{subtitle}</em>
-                <span style={{color: 'gray', float: 'right'}}>{description}</span>
+                <span className="mx_Autocomplete_Completion_title">{title}</span>
+                <span className="mx_Autocomplete_Completion_subtitle">{subtitle}</span>
+                <span className="mx_Autocomplete_Completion_description">{description}</span>
             </div>
         );
     }
@@ -46,9 +46,9 @@ export class PillCompletion extends React.Component {
         return (
             <div className={classNames('mx_Autocomplete_Completion_pill', className)} {...restProps}>
                 {initialComponent}
-                <span>{title}</span>
-                <em>{subtitle}</em>
-                <span style={{color: 'gray'}}>{description}</span>
+                <span className="mx_Autocomplete_Completion_title">{title}</span>
+                <span className="mx_Autocomplete_Completion_subtitle">{subtitle}</span>
+                <span className="mx_Autocomplete_Completion_description">{description}</span>
             </div>
         );
     }
diff --git a/src/autocomplete/DuckDuckGoProvider.js b/src/autocomplete/DuckDuckGoProvider.js
index c74ffa0473..c85eb8a10b 100644
--- a/src/autocomplete/DuckDuckGoProvider.js
+++ b/src/autocomplete/DuckDuckGoProvider.js
@@ -87,4 +87,10 @@ export default class DuckDuckGoProvider extends AutocompleteProvider {
         }
         return instance;
     }
+
+    renderCompletions(completions: [React.Component]): ?React.Component {
+        return <div className="mx_Autocomplete_Completion_container_block">
+            {completions}
+        </div>;
+    }
 }
diff --git a/src/autocomplete/EmojiProvider.js b/src/autocomplete/EmojiProvider.js
index 8763d90749..e292808787 100644
--- a/src/autocomplete/EmojiProvider.js
+++ b/src/autocomplete/EmojiProvider.js
@@ -49,8 +49,8 @@ export default class EmojiProvider extends AutocompleteProvider {
     }
 
     renderCompletions(completions: [React.Component]): ?React.Component {
-        return React.cloneElement(super.renderCompletions(completions), {
-            className: 'mx_Autocomplete_Completion_container_pill',
-        });
+        return <div className="mx_Autocomplete_Completion_container_pill">
+            {completions}
+        </div>;
     }
 }
diff --git a/src/autocomplete/RoomProvider.js b/src/autocomplete/RoomProvider.js
index f27d450266..39cf1179d7 100644
--- a/src/autocomplete/RoomProvider.js
+++ b/src/autocomplete/RoomProvider.js
@@ -64,8 +64,8 @@ export default class RoomProvider extends AutocompleteProvider {
     }
 
     renderCompletions(completions: [React.Component]): ?React.Component {
-        return React.cloneElement(super.renderCompletions(completions), {
-            className: 'mx_Autocomplete_Completion_container_pill',
-        });
+        return <div className="mx_Autocomplete_Completion_container_pill">
+            {completions}
+        </div>;
     }
 }
diff --git a/src/autocomplete/UserProvider.js b/src/autocomplete/UserProvider.js
index e772d62b23..7485d76484 100644
--- a/src/autocomplete/UserProvider.js
+++ b/src/autocomplete/UserProvider.js
@@ -60,8 +60,8 @@ export default class UserProvider extends AutocompleteProvider {
     }
 
     renderCompletions(completions: [React.Component]): ?React.Component {
-        return React.cloneElement(super.renderCompletions(completions), {
-            className: 'mx_Autocomplete_Completion_container_pill',
-        });
+        return <div className="mx_Autocomplete_Completion_container_pill">
+            {completions}
+        </div>;
     }
 }
diff --git a/src/components/views/rooms/Autocomplete.js b/src/components/views/rooms/Autocomplete.js
index 1f62ce852c..4b2e23a8b8 100644
--- a/src/components/views/rooms/Autocomplete.js
+++ b/src/components/views/rooms/Autocomplete.js
@@ -105,7 +105,8 @@ export default class Autocomplete extends React.Component {
         // this is the selected completion, so scroll it into view if needed
         const selectedCompletion = this.refs[`completion${this.state.selectionOffset}`];
         if (selectedCompletion && this.container) {
-            const {offsetTop} = ReactDOM.findDOMNode(selectedCompletion);
+            const domNode = ReactDOM.findDOMNode(selectedCompletion);
+            const offsetTop = domNode && domNode.offsetTop;
             if (offsetTop > this.container.scrollTop + this.container.offsetHeight ||
                 offsetTop < this.container.scrollTop) {
                 this.container.scrollTop = offsetTop - this.container.offsetTop;