Fixes to search dropdown

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>

app/javascript/flavours/glitch/features/drawer/search/popout/index.js

@@ -42,6 +42,14 @@ export default function DrawerSearchPopout ({ style }) {
 
   //  The result.
   return (
+    <div
+      className='drawer--search--popout'
+      style={{
+        ...style,
+        position: 'absolute',
+        width: 285,
+      }}
+    >
       <Motion
         defaultStyle={{
           opacity: 0,
@@ -56,11 +64,7 @@ export default function DrawerSearchPopout ({ style }) {
       >
         {({ opacity, scaleX, scaleY }) => (
           <div
-          className='drawer--search--popout'
             style={{
-            ...style,
-            position: 'absolute',
-            width: 285,
               opacity: opacity,
               transform: `scale(${scaleX}, ${scaleY})`,
             }}
@@ -92,6 +96,7 @@ export default function DrawerSearchPopout ({ style }) {
           </div>
         )}
       </Motion>
+    </div>
   );
 }
 

app/javascript/flavours/glitch/styles/components/drawer.scss

@@ -114,8 +114,7 @@
   }
 
   & > .icon {
-    .fa {
-      display: inline-block;
+    display: block;
     position: absolute;
     top: 10px;
     right: 10px;
@@ -123,10 +122,19 @@
     height: 18px;
     color: $ui-secondary-color;
     font-size: 18px;
+    line-height: 18px;
+    z-index: 2;
+
+    .fa {
+      display: inline-block;
+      position: absolute;
+      top: 0;
+      bottom: 0;
+      left: 0;
+      right: 0;
       opacity: 0;
       cursor: default;
       pointer-events: none;
-      z-index: 2;
       transition: all 100ms linear;
     }
 
@@ -136,14 +144,15 @@
     }
 
     .fa-times-circle {
-      top: 11px;
       transform: rotate(-90deg);
       cursor: pointer;
 
       &:hover { color: $primary-text-color }
     }
+  }
 
   &.active {
+    & > .icon {
       .fa-search {
         opacity: 0;
         transform: rotate(90deg);
@@ -158,6 +167,32 @@
   }
 }
 
+.drawer--search--popout {
+  box-sizing: border-box;
+  margin-top: 10px;
+  border-radius: 4px;
+  padding: 10px 14px 14px 14px;
+  box-shadow: 2px 4px 15px rgba($base-shadow-color, 0.4);
+  color: $ui-primary-color;
+  background: $simple-background-color;
+
+  h4 {
+    margin-bottom: 10px;
+    color: $ui-primary-color;
+    font-size: 13px;
+    font-weight: 500;
+    text-transform: uppercase;
+  }
+
+  ul { margin-bottom: 10px }
+  li { padding: 4px 0 }
+
+  em {
+    color: $ui-base-color;
+    font-weight: 500;
+  }
+}
+
 .drawer--account {
   padding: 10px;
   color: $ui-primary-color;

app/javascript/flavours/glitch/styles/components/index.scss

@@ -3918,37 +3918,6 @@
   border-radius: 0;
 }
 
-.drawer--search--popout {
-  background: $simple-background-color;
-  border-radius: 4px;
-  padding: 10px 14px;
-  padding-bottom: 14px;
-  margin-top: 10px;
-  color: $ui-primary-color;
-  box-shadow: 2px 4px 15px rgba($base-shadow-color, 0.4);
-
-  h4 {
-    text-transform: uppercase;
-    color: $ui-primary-color;
-    font-size: 13px;
-    font-weight: 500;
-    margin-bottom: 10px;
-  }
-
-  li {
-    padding: 4px 0;
-  }
-
-  ul {
-    margin-bottom: 10px;
-  }
-
-  em {
-    font-weight: 500;
-    color: $ui-base-color;
-  }
-}
-
 noscript {
   text-align: center;