Hide suggestions when clicking outside them (#29)

Add workaround to hide suggestions when clicking outside the component

solve issue #28

Author: jjavierdguezas

.eslintrc

@@ -11,5 +11,8 @@
     "plugin:jest/recommended",
     "plugin:react/recommended",
     "prettier"
-  ]
+  ],
+  "rules": {
+    "react/no-deprecated": "warn"
+  }
 }

src/components/List/index.js

@@ -18,6 +18,13 @@ const Wrapper = styled.div`
 `
 
 class List extends React.Component {
+  constructor(props) {
+    super(props)
+
+    this.handleMouseEnter = this.handleMouseEnter.bind(this)
+    this.handleMouseLeave = this.handleMouseLeave.bind(this)
+  }
+
   renderDefault() {
     const {
       customRender,
@@ -29,7 +36,10 @@ class List extends React.Component {
 
     if (items.length > 0) {
       return (
-        <Wrapper>
+        <Wrapper
+          onMouseEnter={this.handleMouseEnter}
+          onMouseLeave={this.handleMouseLeave}
+        >
           {items.map((item, index) => (
             <ListItem
               key={index}
@@ -45,7 +55,10 @@ class List extends React.Component {
 
     if (textNoResults || customRender) {
       return (
-        <Wrapper>
+        <Wrapper
+          onMouseEnter={this.handleMouseEnter}
+          onMouseLeave={this.handleMouseLeave}
+        >
           <ListItem customRender={customRender} textNoResults={textNoResults} />
         </Wrapper>
       )
@@ -54,6 +67,20 @@ class List extends React.Component {
     return null
   }
 
+  handleMouseEnter() {
+    const {onFocusChange} = this.props
+    if (onFocusChange) {
+      onFocusChange(true)
+    }
+  }
+
+  handleMouseLeave() {
+    const {onFocusChange} = this.props
+    if (onFocusChange) {
+      onFocusChange(false)
+    }
+  }
+
   render() {
     const {customContainerRender, items} = this.props
     return customContainerRender
@@ -80,6 +107,7 @@ List.propTypes = {
     PropTypes.instanceOf(ListItem),
   ]),
   onSelect: PropTypes.func,
+  onFocusChange: PropTypes.func,
   customContainerRender: PropTypes.func,
   customRender: PropTypes.func,
   textNoResults: PropTypes.string,

src/components/List/index.test.js

@@ -33,12 +33,18 @@ const ListCustomItemFixture = (
   <List customRender={prediction => prediction && prediction.description} />
 )
 
+const onFocusChange = jest.fn()
+const ListMouseEventsFixture = (
+  <List items={[item]} onFocusChange={onFocusChange} />
+)
+
 describe("Suggest", () => {
   it("renders", () => {
     mount(ListFixture)
     mount(ListEmptyFixture)
     mount(ListCustomFixture)
     mount(ListCustomItemFixture)
+    mount(ListMouseEventsFixture)
   })
 
   it("has one child", () => {
@@ -59,4 +65,30 @@ describe("Suggest", () => {
       .simulate("click")
     expect(onSelect).toHaveBeenCalled()
   })
+
+  it("calls onFocusChanged(true) only once when mouse enters", () => {
+    onFocusChange.mockClear()
+    const list = shallow(ListMouseEventsFixture)
+    list.simulate("mouseenter")
+    expect(onFocusChange).toHaveBeenCalledTimes(1)
+    expect(onFocusChange).toHaveBeenCalledWith(true)
+  })
+
+  it("calls onFocusChanged(false) only once when mouse leaves", () => {
+    onFocusChange.mockClear()
+    const list = shallow(ListMouseEventsFixture)
+    list.simulate("mouseleave")
+    expect(onFocusChange).toHaveBeenCalledTimes(1)
+    expect(onFocusChange).toHaveBeenCalledWith(false)
+  })
+
+  it("prevents exception when mouse enters and onFocusChanged is null", () => {
+    const list = shallow(ListFixture)
+    list.simulate("mouseenter")
+  })
+
+  it("prevents exception when mouse leaves and onFocusChanged is null", () => {
+    const list = shallow(ListFixture)
+    list.simulate("mouseleave")
+  })
 })

src/index.js

@@ -1,3 +1,4 @@
+/* global document */
 import PropTypes from "prop-types"
 import React from "react"
 import styled from "styled-components"
@@ -20,10 +21,19 @@ class GooglePlacesSuggest extends React.Component {
     }
 
     this.handleKeyDown = this.handleKeyDown.bind(this)
+    this.onFocusChange = this.onFocusChange.bind(this)
+    this.handleDOMClick = this.handleDOMClick.bind(this)
   }
 
+  hasFocus = false
+
   componentWillMount() {
     this.updatePredictions(this.props.autocompletionRequest)
+    document.addEventListener("click", this.handleDOMClick)
+  }
+
+  componentWillUnmount() {
+    document.removeEventListener("click", this.handleDOMClick)
   }
 
   componentWillReceiveProps(nextProps) {
@@ -43,6 +53,7 @@ class GooglePlacesSuggest extends React.Component {
         predictions: [],
       },
       () => {
+        this.hasFocus = false
         this.geocodePrediction(suggest.description, result => {
           onSelectSuggest(result, suggest)
         })
@@ -54,7 +65,13 @@ class GooglePlacesSuggest extends React.Component {
     const {googleMaps} = this.props
     const autocompleteService = new googleMaps.places.AutocompleteService()
     if (!autocompletionRequest || !autocompletionRequest.input) {
-      this.setState({open: false, predictions: []})
+      this.setState(
+        {
+          open: false,
+          predictions: [],
+        },
+        () => (this.hasFocus = false)
+      )
       return
     }
 
@@ -115,6 +132,16 @@ class GooglePlacesSuggest extends React.Component {
     this.setState({focusedPredictionIndex: index})
   }
 
+  onFocusChange(val) {
+    this.hasFocus = val
+  }
+
+  handleDOMClick() {
+    if (!this.hasFocus && this.state.open) {
+      this.setState({open: false})
+    }
+  }
+
   render() {
     const {focusedPredictionIndex, open, predictions} = this.state
     const {
@@ -134,6 +161,7 @@ class GooglePlacesSuggest extends React.Component {
             customRender={customRender}
             onSelect={suggest => this.handleSelectPrediction(suggest)}
             textNoResults={textNoResults}
+            onFocusChange={this.onFocusChange}
           />
         )}
       </Wrapper>