Fix to text filter responsiveness (#80)

packages/frontend/src/components/Chain/Chain.tsx

@@ -128,7 +128,7 @@ export class Chain extends React.Component<Chain.Props, Chain.State> {
     if (nodeFilter && nodes.length === 0) {
       return (
         <React.Fragment>
-          {filter != null ? <Filter value={filter} onChange={this.onFilterChange} /> : null}
+          <Filter value={filter} onChange={this.onFilterChange} />
           <div className="Chain-no-nodes">¯\_(ツ)_/¯<br />Nothing matches</div>
         </React.Fragment>
       );
@@ -136,7 +136,7 @@ export class Chain extends React.Component<Chain.Props, Chain.State> {
 
     return (
       <React.Fragment>
-        {filter != null ? <Filter value={filter} onChange={this.onFilterChange} /> : null}
+        <Filter value={filter} onChange={this.onFilterChange} />
         <table className="Chain-node-list">
           <Node.Row.Header columns={columns} />
           <tbody>

packages/frontend/src/components/Chain/Filter.css

@@ -1,4 +1,4 @@
-.Chain-Filter {
+.Filter {
   position: fixed;
   z-index: 100;
   bottom: 20px;
@@ -13,7 +13,11 @@
   box-shadow: 0 2px 10px rgba(0,0,0,0.5);
 }
 
-.Chain-Filter input {
+.Filter-hidden {
+  bottom: -300px;
+}
+
+.Filter input {
   padding: 0;
   margin: 0;
   border: none;
@@ -26,7 +30,7 @@
   font-weight: 300;
 }
 
-.Chain-Filter .Icon {
+.Filter .Icon {
   position: absolute;
   left: 13px;
   top: 17px;

packages/frontend/src/components/Chain/Filter.tsx

@@ -1,4 +1,5 @@
 import * as React from 'react';
+import { Maybe } from '@dotstats/common';
 import { Icon } from '../';
 
 import searchIcon from '../../icons/search.svg';
@@ -7,7 +8,7 @@ import './Filter.css';
 
 export namespace Filter {
   export interface Props {
-    value: string;
+    value: Maybe<string>;
     onChange: (value: string) => void;
   }
 }
@@ -15,17 +16,31 @@ export namespace Filter {
 export class Filter extends React.Component<Filter.Props, {}> {
   private filterInput: HTMLInputElement;
 
-  public componentDidMount() {
-    this.filterInput.focus();
+  public shouldComponentUpdate(nextProps: Filter.Props): boolean {
+    if (this.props.value === nextProps.value && this.props.onChange === nextProps.onChange) {
+      return false;
+    }
+
+    if (this.props.value == null) {
+      this.filterInput.focus();
+    }
+
+    return true;
   }
 
   public render() {
     const { value } = this.props;
 
+    let className = "Filter";
+
+    if (value == null) {
+      className += " Filter-hidden";
+    }
+
     return (
-      <div className="Chain-Filter">
+      <div className={className}>
         <Icon src={searchIcon} />
-        <input ref={this.onRef} value={value} onChange={this.onChange} />
+        <input ref={this.onRef} value={value || ''} onChange={this.onChange} />
       </div>
     );
   }