Fix: Set 'z-index' on Popper to render over descendants (fixes #28) (#30

)

Suggestions weren't being rendered over descendant elements/components
to <MUIPlacesAutocomplete>. This was due to a lack of understanding
about how stacking worked. After learning more about it on MDN we set
the 'z-index' on the <Popper> which provides the modality for our
rendered suggestions. This fixes the problem as descendant
elements/components will be in the same stacking context as <MPA>.

We provide a default 'z-index' of 1. Looking forward we ought to allow
people to customize the 'z-index' further. Rather than solving that
issue in this commit we will do so in another that allows for fine
granular control over <Popper> as well as the other components that
<MPA> composes.
	modified:   src/MUIPlacesAutocomplete.jsx
	modified:   test/test.jsx

src/MUIPlacesAutocomplete.jsx

@@ -66,7 +66,7 @@ export default class MUIPlacesAutocomplete extends React.Component {
       <Popper
         placement="top-start"
         modifiers={({ inner: { enabled: true } })}
-        style={{ left: 0, right: 0 }}
+        style={{ left: 0, right: 0, zIndex: 1 }}
       >
         {({ popperProps, restProps }) => (
           <div

test/test.jsx

@@ -288,6 +288,24 @@ describe('React component test: <MUIPlacesAutocomplete>', function () {
 
       miWrapper.simulate('click')
     })
+
+    it('Popper has default z-index of 1', function () {
+      // To get suggestions to be rendered first simulate an input onChange event which will cause
+      // <Downshift> to believe that our autocomplete/dropdown is open...
+      mpaWrapper.find('input').simulate('change', { target: { value: searchInputValue } })
+
+      // Second set the start of our component to provide suggestions as if they were returned from
+      // the Google AutocompleteService...
+      mpaWrapper.setState({ suggestions: [{ description: 'Bellingham, WA, United States' }] })
+
+      const pWrapper = mpaWrapper.find('Popper')
+      expect(pWrapper.exists()).to.be.true
+
+      const styleProps = pWrapper.prop('style')
+      expect(styleProps).to.exist
+      expect(styleProps.zIndex).to.exist
+      expect(styleProps.zIndex).to.be.equal(1)
+    })
   })
 
   describe('Consumes Google Maps JavaScript API correctly:', function () {