Develop

src/components/App/App.js

@@ -43,7 +43,9 @@ class App extends Component {
   }
 
   onFilter(query) {
-    reportFilter(query);
+    if (query) {
+      reportFilter(query);
+    }
     this.setState({ query });
   }
 
@@ -62,7 +64,7 @@ class App extends Component {
     const { selected, query, elements } = this.state;
 
     let selectedElement = elements[selected];
-    let visibleElements = Object.values(elements);
+    let visibleElements = Object.keys(elements).map(key => elements[key]);
 
     if (query) {
       visibleElements = visibleElements.filter(element =>

src/components/Filter/InputIframe.js

@@ -19,12 +19,16 @@ class InputIframe extends Component {
     forceHideKeyboard();
     this.setState({
       hasInteracted: false,
+      hasFocused: false,
       resetKey: this.state.resetKey + 1
     });
   }
 
   blur() {
-    forceHideKeyboard();
+    if (this.state.hasFocused) {
+      forceHideKeyboard();
+      this.setState({ hasFocused: false });
+    }
   }
 
   shouldComponentUpdate(nextProps, nextState) {
@@ -36,6 +40,11 @@ class InputIframe extends Component {
   onLoadFrame() {
     const window = this.frameRef.current.contentWindow;
     window.addEventListener("input", e => this.onInput(e.target.value));
+    window.addEventListener("focus", e => this.onFocus(e.target));
+  }
+
+  onFocus() {
+    this.setState({ hasFocused: true });
   }
 
   onInput(value) {

src/components/InfoLink/InfoLink.css

@@ -6,14 +6,18 @@
 
 .InfoLink-button {
   text-decoration: none;
-  background: var(--button-fill-color);
-  border-radius: 2px;
-  box-shadow: 1px 1px 1px rbga(0, 0, 0, 0.2);
-  color: var(--button-text-color);
   font-weight: bold;
   display: inline-block;
   margin: 0 8px 8px 0;
   padding: 8px 12px;
+  border-radius: 2px;
+
+  background: #ccc;
+  color: black;
+
+  background: var(--button-fill-color);
+  box-shadow: 1px 1px 1px rbga(0, 0, 0, 0.2);
+  color: var(--button-text-color);
 }
 
 .InfoLink-button:hover,

src/components/InfoPanel/InfoPanel.css

@@ -21,6 +21,8 @@
   justify-content: flex-start;
 
   transition: bottom ease-in-out 200ms;
+  background: #333;
+  color: white;
   background: var(--panel-background-color);
   color: var(--panel-text-color);
   box-shadow: 0 -4px rgba(0, 0, 0, 0.2);

src/utils/forceHideKeyboard.js

@@ -1,24 +1,22 @@
-/**
- * Fixed positioning will stop scrolling to input.
- * Font size over 16px will prevent Safari zooming in on focus.
- * https://stackoverflow.com/questions/2989263/disable-auto-zoom-in-input-text-tag-safari-on-iphone
- */
-const inputStyle = `
-  opacity: 0;
-  position: fixed;
-  top: -100px;
-  font-size: 20px;`;
-
 /**
  * Create a shim component then focus and unfocus it so that Safari doesn't keep
  * the keyboard open for the iframe that was unceremoniously nuked from the DOM.
  * Note that this will "flash" the keyboard on some (non-iOS) browsers.
  */
 const forceHideKeyboard = () => {
   const input = document.createElement("textarea");
-  input.style = inputStyle;
 
-  document.body.prepend(input);
+  /**
+   * Fixed positioning will stop scrolling to input.
+   * Font size over 16px will prevent Safari zooming in on focus.
+   * https://stackoverflow.com/questions/2989263/disable-auto-zoom-in-input-text-tag-safari-on-iphone
+   */
+  input.style.opacity = 0;
+  input.style.position = "fixed";
+  input.style.top = "100px";
+  input.style.fontSize = "20px";
+
+  document.body.appendChild(input);
   input.focus();
 
   setTimeout(() => {

src/utils/getRandomElement.js

@@ -1,5 +1,5 @@
 const getRandomElement = elements => {
-  const values = Object.values(elements);
+  const values = Object.keys(elements).map(key => elements[key]);
 
   // A "count" of all the weights.
   const total = values.reduce((total, element) => total + element.weight, 0);