Cleanup autocomplete

src/autocomplete/AutocompleteProvider.js

@@ -54,10 +54,7 @@ export default class AutocompleteProvider {
     }
 
     renderCompletions(completions: [React.Component]): ?React.Component {
-        return (
+        console.error('stub; should be implemented in subclasses');
-            <div>
+        return null;
-                {completions}
-            </div>
-        );
     }
 }

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), {
+        return <div className="mx_Autocomplete_Completion_container_block">
-            className: 'mx_Autocomplete_Completion_container_block',
+            {completions}
-        });
+        </div>;
     }
 }

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>
+                <span className="mx_Autocomplete_Completion_title">{title}</span>
-                <em style={{flex: 1}}>{subtitle}</em>
+                <span className="mx_Autocomplete_Completion_subtitle">{subtitle}</span>
-                <span style={{color: 'gray', float: 'right'}}>{description}</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>
+                <span className="mx_Autocomplete_Completion_title">{title}</span>
-                <em>{subtitle}</em>
+                <span className="mx_Autocomplete_Completion_subtitle">{subtitle}</span>
-                <span style={{color: 'gray'}}>{description}</span>
+                <span className="mx_Autocomplete_Completion_description">{description}</span>
             </div>
         );
     }

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>;
+    }
 }

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), {
+        return <div className="mx_Autocomplete_Completion_container_pill">
-            className: 'mx_Autocomplete_Completion_container_pill',
+            {completions}
-        });
+        </div>;
     }
 }

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), {
+        return <div className="mx_Autocomplete_Completion_container_pill">
-            className: 'mx_Autocomplete_Completion_container_pill',
+            {completions}
-        });
+        </div>;
     }
 }

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), {
+        return <div className="mx_Autocomplete_Completion_container_pill">
-            className: 'mx_Autocomplete_Completion_container_pill',
+            {completions}
-        });
+        </div>;
     }
 }

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;