From a6f85d0f9a81ee860c65addc74c913d8e7401c2a Mon Sep 17 00:00:00 2001
From: Vlad Frolov <frolvlad@gmail.com>
Date: Thu, 2 Feb 2017 23:45:13 +0200
Subject: [PATCH] examples/with-react-md: Fixed "Cannot read property 'focus'
 of undefined"

---
 examples/with-react-md/pages/index.js | 30 +++++++++++++++++----------
 1 file changed, 19 insertions(+), 11 deletions(-)

diff --git a/examples/with-react-md/pages/index.js b/examples/with-react-md/pages/index.js
index d1f8d3a25ee513..3f836557fe9235 100644
--- a/examples/with-react-md/pages/index.js
+++ b/examples/with-react-md/pages/index.js
@@ -1,6 +1,8 @@
 import Head from 'next/head'
 import Link from 'next/link'
 
+import { PureComponent } from 'react'
+
 import Avatar from 'react-md/lib/Avatars'
 import Button from 'react-md/lib/Buttons/Button'
 import FontIcon from 'react-md/lib/FontIcons'
@@ -28,17 +30,23 @@ const drawerHeaderChildren = [
   />
 ]
 
-const NavigationLink = (props) => {
-  const { href, as, children, ..._props } = props
-  return (
-    <div {..._props}>
-      <Link href={href} as={as}>
-        <a className='md-list-tile' style={{padding: 0, overflow: 'hidden'}}>
-          {children}
-        </a>
-      </Link>
-    </div>
-  )
+class NavigationLink extends PureComponent {
+  // NOTE: Don't try using Stateless (function) component here. `ref` is
+  // required by React-MD/AccessibleFakeButton, but Stateless components
+  // doesn't have one by design:
+  // https://github.com/facebook/react/issues/4936
+  render () {
+    const { href, as, children, ..._props } = this.props
+    return (
+      <div {..._props} style={{padding: 0}}>
+        <Link href={href} as={as}>
+          <a className='md-list-tile md-list-tile--mini' style={{width: '100%', overflow: 'hidden'}}>
+            {children}
+          </a>
+        </Link>
+      </div>
+    )
+  }
 }
 
 export default () => {