Set 'z-index' to render suggestions over descendant elements/components of <MPA>

[charlax]

Hi there,

First, thank you for this amazing library. Great work there.

My submit button comes from a different component and I'd like the autosuggest component to not know about it. Yet, by default, the suggestions show up below this button:

It would be great to have a way to customize the classes of the components inside MUIPlacesAutocomplete, including the suggestions box.

[charlax]

By the way, you can also see that on this example the Google logo does not show up. Haven't had time to check why yet, that's next on my plate.

[charlax]

This is probably because you're using react-popper. I might take some inspiration from https://material-ui-next.com/demos/autocomplete/ to do a Paper-based suggestion list.

[Giners]

@charlax

Thanks for the positive words. It's good to see/hear that someone is trying to use this library. I'm sure it's rough around the edges/harder to use than others since I'm learning but this feedback definitely helps me grow and make this library better. :smile:

I'll look into this and checkout the MUI samples for autocomplete. Is there a code sample/repo that you can provide that quickly shows what you are experiencing?

If you figure out why the Google logo isn't showing up either let me know in another issue.

[charlax]

Here's how I'm modifying the demo:

% git diff master -- demo/DemoBasic.jsx
diff --git a/demo/DemoBasic.jsx b/demo/DemoBasic.jsx
index e3a3d1b..10d7454 100644
--- a/demo/DemoBasic.jsx
+++ b/demo/DemoBasic.jsx
@@ -1,3 +1,4 @@
+import Button from 'material-ui/Button';
 import React from 'react'
 import Snackbar from 'material-ui/Snackbar'
 import MUIPlacesAutocomplete from './../dist'
@@ -30,6 +31,7 @@ class DemoBasic extends React.Component {
           onSuggestionSelected={this.onSuggestionSelected}
           renderTarget={() => (<div />)}
         />
+      <Button variant="raised" color="secondary" type="submit">Suivant</Button>
         <Snackbar
           onRequestClose={this.onClose}
           anchorOrigin={{ vertical: 'bottom', horizontal: 'center' }}

Full file:

import Button from 'material-ui/Button';
import React from 'react'
import Snackbar from 'material-ui/Snackbar'
import MUIPlacesAutocomplete from './../dist'

class DemoBasic extends React.Component {
  constructor() {
    super()

    this.state = { open: false, suggestion: null }

    this.onClose = this.onClose.bind(this)
    this.onSuggestionSelected = this.onSuggestionSelected.bind(this)
  }

  onClose() {
    this.setState({ open: false })
  }

  onSuggestionSelected(suggestion) {
    // Add your business logic here. In this case we simply set our state to show our <Snackbar>.
    this.setState({ open: true, suggestion })
  }

  render() {
    const { open, suggestion } = this.state

    return (
      <div>
        <MUIPlacesAutocomplete
          onSuggestionSelected={this.onSuggestionSelected}
          renderTarget={() => (<div />)}
        />
      <Button variant="raised" color="secondary" type="submit">Suivant</Button>
        <Snackbar
          onRequestClose={this.onClose}
          anchorOrigin={{ vertical: 'bottom', horizontal: 'center' }}
          autoHideDuration={5000}
          open={open}
          message={suggestion ? (<span>Selected suggestion: {suggestion.description}</span>) : ''}
          style={{ width: '70vw' }}
        />
      </div>
    )
  }
}

DemoBasic.description = 'Basic usage'

export default DemoBasic

Results in:

[charlax]

If I change the Popper' z-index, it works as I'd like to:

% git diff master -- src/MUIPlacesAutocomplete.jsx
diff --git a/src/MUIPlacesAutocomplete.jsx b/src/MUIPlacesAutocomplete.jsx
index 7be9108..1618ca0 100644
--- a/src/MUIPlacesAutocomplete.jsx
+++ b/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

This is hinted by https://github.com/FezVrasta/popper.js/issues/482

So basically we'd need a way to provide Popper CSS...

[Giners]

Awesome repo and info. I have some time this weekend so I am going to look at this issue. My first thoughts are to allow people add styles to <MUIPlacesAutocomplete> via a HOC.

[Giners]

@charlax

I've renamed this issue and gave it a label of 'bug' to isolate the issue of suggestions not rendering over descendant elements/components vs. providing fine grained control over the appearance/behavior of the elements/components that <MUIPlacesAutocomplete> composes. I've filed a task for providing fine grained control here: #29.

I've got a PR to fix the issue of the suggestions not rendering over descendant elements/components here: #30. This will unblock you and others while I provide a solution for fine grained control.