Closed charlax closed 6 years ago
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.
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.
@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.
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:
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...
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.
@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.
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.