From 51cde1b51ec236aacf13615bece4b33c024b6f8c Mon Sep 17 00:00:00 2001
From: Anton Harniakou <anton.harniakou@gmail.com>
Date: Thu, 7 Jun 2018 21:04:08 +0300
Subject: [PATCH] Use React Refs instead of DOM queries

---
 src/components/Navigation/Navigation.jsx | 13 +++++--------
 1 file changed, 5 insertions(+), 8 deletions(-)

diff --git a/src/components/Navigation/Navigation.jsx b/src/components/Navigation/Navigation.jsx
index e9b2862c91f6..765a0629baf6 100644
--- a/src/components/Navigation/Navigation.jsx
+++ b/src/components/Navigation/Navigation.jsx
@@ -11,7 +11,7 @@ export default class Navigation extends React.Component {
     let { pageUrl = '' } = this.props;
 
     return (
-      <header className="navigation">
+      <header className="navigation" ref={ container => this.container = container }>
         <Container className="navigation__inner">
           <div className="navigation__mobile" onClick={ this._toggleSidebar }>
             <i className="icon-menu" />
@@ -42,6 +42,7 @@ export default class Navigation extends React.Component {
               type="text"
               className="navigation__search-input"
               placeholder="Search documentation…"
+              ref={ searchInput => this.searchInput = searchInput }
               onBlur={ this._toggleSearch.bind(this) } />
             <button
               className="navigation__search-icon icon-magnifying-glass"
@@ -154,11 +155,9 @@ export default class Navigation extends React.Component {
    *
    */
   _toggleSearch() {
-    let container = document.querySelector('.navigation');
-    let input = document.querySelector('.navigation__search-input');
-    let state = container.classList.toggle('navigation--search-mode');
+    let state = this.container.classList.toggle('navigation--search-mode');
 
-    if ( state === true ) input.focus();
+    if ( state === true ) this.searchInput.focus();
   }
 
   /**
@@ -166,8 +165,6 @@ export default class Navigation extends React.Component {
    *
    */
   _openSearch() {
-    let container = document.querySelector('.navigation');
-
-    container.classList.add('navigation--search-mode');
+    this.container.classList.add('navigation--search-mode');
   }
 }