Update autocomplete design and scroll it correctly

src/autocomplete/Components.js

@@ -1,19 +1,62 @@
 import React from 'react';
+import ReactDOM from 'react-dom';
+import classNames from 'classnames';
 
-export function TextualCompletion({
-    title,
-    subtitle,
-    description,
-}: {
-    title: ?string,
-    subtitle: ?string,
-    description: ?string
-}) {
-    return (
-        <div style={{width: '100%'}}>
-            <span>{title}</span>
-            <em>{subtitle}</em>
-            <span style={{color: 'gray', float: 'right'}}>{description}</span>
-        </div>
-    );
+/* These were earlier stateless functional components but had to be converted
+since we need to use refs/findDOMNode to access the underlying DOM node to focus the correct completion,
+something that is not entirely possible with stateless functional components. One could
+presumably wrap them in a <div> before rendering but I think this is the better way to do it.
+ */
+
+export class TextualCompletion extends React.Component {
+    render() {
+        const {
+            title,
+            subtitle,
+            description,
+            className,
+            ...restProps,
+        } = 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>
+            </div>
+        );
+    }
 }
+TextualCompletion.propTypes = {
+    title: React.PropTypes.string,
+    subtitle: React.PropTypes.string,
+    description: React.PropTypes.string,
+    className: React.PropTypes.string,
+};
+
+export class PillCompletion extends React.Component {
+    render() {
+        const {
+            title,
+            subtitle,
+            description,
+            initialComponent,
+            className,
+            ...restProps,
+        } = this.props;
+        return (
+            <div className={classNames('mx_Autocomplete_Completion_pill', className)} {...restProps}>
+                {initialComponent}
+                <span>{title}</span>
+                <em>{subtitle}</em>
+                <span style={{color: 'gray'}}>{description}</span>
+            </div>
+        );
+    }
+}
+PillCompletion.propTypes = {
+    title: React.PropTypes.string,
+    subtitle: React.PropTypes.string,
+    description: React.PropTypes.string,
+    initialComponent: React.PropTypes.element,
+    className: React.PropTypes.string,
+};