Fixes to search dropdown

2 files changed, 58 insertions, 52 deletions

diff --git a/app/javascript/flavours/glitch/features/drawer/search/index.js b/app/javascript/flavours/glitch/features/drawer/search/index.js
index 2d739349c..8cbb0906c 100644
--- a/app/javascript/flavours/glitch/features/drawer/search/index.js
+++ b/app/javascript/flavours/glitch/features/drawer/search/index.js
@@ -45,10 +45,10 @@ const handlers = {
     const {
       onClear,
       submitted,
-      value: { length },
+      value,
     } = this.props;
     e.preventDefault();  //  Prevents focus change ??
-    if (onClear && (submitted || length)) {
+    if (onClear && (submitted || value && value.length)) {
       onClear();
     }
   },
@@ -100,7 +100,8 @@ export default class DrawerSearch extends React.PureComponent {
       value,
     } = this.props;
     const { expanded } = this.state;
-    const computedClass = classNames('drawer--search', { active: value.length || submitted });
+    const active = value && value.length || submitted;
+    const computedClass = classNames('drawer--search', { active });
 
     return (
       <div className={computedClass}>
@@ -126,11 +127,11 @@ export default class DrawerSearch extends React.PureComponent {
           tabIndex='0'
         >
           <Icon icon='search' />
-          <Icon icon='fa-times-circle' />
+          <Icon icon='times-circle' />
         </div>
         <Overlay
           placement='bottom'
-          show={expanded && !(value || '').length && !submitted}
+          show={expanded && !active}
           target={this}
         ><DrawerSearchPopout /></Overlay>
       </div>
diff --git a/app/javascript/flavours/glitch/features/drawer/search/popout/index.js b/app/javascript/flavours/glitch/features/drawer/search/popout/index.js
index b5ea86ff1..6219f46ca 100644
--- a/app/javascript/flavours/glitch/features/drawer/search/popout/index.js
+++ b/app/javascript/flavours/glitch/features/drawer/search/popout/index.js
@@ -42,56 +42,61 @@ export default function DrawerSearchPopout ({ style }) {
 
   //  The result.
   return (
-    <Motion
-      defaultStyle={{
-        opacity: 0,
-        scaleX: 0.85,
-        scaleY: 0.75,
-      }}
+    <div
+      className='drawer--search--popout'
       style={{
-        opacity: motionSpring,
-        scaleX: motionSpring,
-        scaleY: motionSpring,
+        ...style,
+        position: 'absolute',
+        width: 285,
       }}
     >
-      {({ opacity, scaleX, scaleY }) => (
-        <div
-          className='drawer--search--popout'
-          style={{
-            ...style,
-            position: 'absolute',
-            width: 285,
-            opacity: opacity,
-            transform: `scale(${scaleX}, ${scaleY})`,
-          }}
-        >
-          <h4><FormattedMessage {...messages.format} /></h4>
-          <ul>
-            <li>
-              <em>#example</em>
-              {' '}
-              <FormattedMessage {...messages.hashtag} />
-            </li>
-            <li>
-              <em>@username@domain</em>
-              {' '}
-              <FormattedMessage {...messages.user} />
-            </li>
-            <li>
-              <em>URL</em>
-              {' '}
-              <FormattedMessage {...messages.user} />
-            </li>
-            <li>
-              <em>URL</em>
-              {' '}
-              <FormattedMessage {...messages.status} />
-            </li>
-          </ul>
-          <FormattedMessage {...messages.text} />
-        </div>
-      )}
-    </Motion>
+      <Motion
+        defaultStyle={{
+          opacity: 0,
+          scaleX: 0.85,
+          scaleY: 0.75,
+        }}
+        style={{
+          opacity: motionSpring,
+          scaleX: motionSpring,
+          scaleY: motionSpring,
+        }}
+      >
+        {({ opacity, scaleX, scaleY }) => (
+          <div
+            style={{
+              opacity: opacity,
+              transform: `scale(${scaleX}, ${scaleY})`,
+            }}
+          >
+            <h4><FormattedMessage {...messages.format} /></h4>
+            <ul>
+              <li>
+                <em>#example</em>
+                {' '}
+                <FormattedMessage {...messages.hashtag} />
+              </li>
+              <li>
+                <em>@username@domain</em>
+                {' '}
+                <FormattedMessage {...messages.user} />
+              </li>
+              <li>
+                <em>URL</em>
+                {' '}
+                <FormattedMessage {...messages.user} />
+              </li>
+              <li>
+                <em>URL</em>
+                {' '}
+                <FormattedMessage {...messages.status} />
+              </li>
+            </ul>
+            <FormattedMessage {...messages.text} />
+          </div>
+        )}
+      </Motion>
+    </div>
   );
 }