How to style the suggestion popup

[andrewjdavison]

G'day,

I'm trying to use this component, but when I render it the popup appears to take the entire window width rather than conforming to the enveloping div. Here's what it looks like rendered...

Any hints on whether this is a bug or is there a prop somewhere I can tweak to rest the style?

[Giners]

Its probably a bug/missing functionality. Do you have a snippet/repo that I can check out?

[andrewjdavison]

Just added you to the repo that has the client code... The component in question is /src/Component/PersonalDetails.jsx

Cheers!

[Giners]

Hi @andrewjdavison,

Thanks for access to the repo with the clientcode. So the problem isn't a bug but a lack of functionality that provides fine grained control over the appearance of <MUIPlacesAutocomplete>. There is a feature request filed to track this functionality that would allow fine grained control over the appearance: #29.

I've confirmed that this is indeed the issue as 1) if you change this line (https://github.com/Giners/mui-places-autocomplete/blob/master/src/MUIPlacesAutocomplete.jsx#L70) to read:

-        style={{ left: 0, right: 0, zIndex: 1 }}
+        style={{ left: 0, right: 0, zIndex: 1, width: 400 }}

You will see that the <div> element that holds the suggestions is modified and doesn't take the full width of the screen (which may be what you desire). Also, 2) there is no prop you can pass today to modify the appearance of the suggestions container as we have just done.

If you want to see this for yourself you can checkout this repo and make changes to <MUIPlacesAutocomplete> and then yarn build and then yarn demo.

I would love to resolve this for you and have you use <MUIPlacesAutocomplete>. Unfortunately I don't have much time at the moment otherwise I would have worked on #29 already. I'm starting a new job and am packing up the house to move in a couple of weeks.

I'll try to find a couple of hours to work on it this weekend. If I can't then I would be happy to help you find a replacement for <MUIPlacesAutocomplete> if you aren't able to wait.

[andrewjdavison]

Thanks very much. I might take a look at the code myself and see if I can’t help you out. Cheers, Andy

…

On Thu, 28 Jun 2018 at 23:10, Chris Austin ***@***.***> wrote: Hi @andrewjdavison <https://github.com/andrewjdavison>, Thanks for access to the repo with the clientcode. So the problem isn't a bug but a lack of functionality that provides fine grained control over the appearance of <MUIPlacesAutocomplete>. There is a feature request filed to track this functionality that would allow fine grained control over the appearance: #29 <#29>. I've confirmed that this is indeed the issue as 1) if you change this line ( https://github.com/Giners/mui-places-autocomplete/blob/master/src/MUIPlacesAutocomplete.jsx#L70) to read: - style={{ left: 0, right: 0, zIndex: 1 }}+ style={{ left: 0, right: 0, zIndex: 1, width: 400 }} You will see that the <div> element that holds the suggestions is modified and doesn't take the full width of the screen (which may be what you desire). Also, 2) there is no prop you can pass today to modify the appearance of the suggestions container as we have just done. If you want to see this for yourself you can checkout this repo and make changes to <MUIPlacesAutocomplete> and then yarn build and then yarn demo. I would love to resolve this for you and have you use <MUIPlacesAutocomplete>. Unfortunately I don't have much time at the moment otherwise I would have worked on #29 <#29> already. I'm starting a new job and am packing up the house to move in a couple of weeks. I'll try to find a couple of hours to work on it this weekend. If I can't then I would be happy to help you find a replacement for <MUIPlacesAutocomplete> if you aren't able to wait. — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#40 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AMsgNgoW0QjX1QMukRR1Tc2XgHC7Irfnks5uBNXagaJpZM4U35hK> .

[Giners]

If you could and wanted to open a PR that would be great. Let me know if you have any questions. We can collaborate on it and get it done probably pretty fast together. My thoughts with #29 was to use styling/withStyles() but this seems more complicated than it needs to be at the moment.

One thought would be to take a new prop named suggestionsContainerProps which would take an object with style properties you wanted to apply to the container that contains rendered suggestions. Its properties could then be spread on the line that I mentioned. Things "ought to work" after that.

Let me know if you take a crack at it and what you think.

[andrewjdavison]

Yeah, the latter was what I was thinking. I'll dig around and see what I can get working over the weekend. Andy

…

On Thu, Jun 28, 2018 at 11:48 PM Chris Austin ***@***.***> wrote: If you could and wanted to open a PR that would be great. Let me know if you have any questions. We can collaborate on it and get it done probably pretty fast together. My thoughts with #29 <#29> was to use styling/withStyles() but this seems more complicated than it needs to be at the moment. One thought would be to take a new prop named suggestionsContainerProps which would take an object with style properties you wanted to apply to the container that contains rendered suggestions. Its properties could then be spread on the line that I mentioned. Things "ought to work" after that. Let me know if you take a crack at it and what you think. — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#40 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AMsgNirc8NG9f7gyZucrOPexGQC_3p_Zks5uBN6QgaJpZM4U35hK> .

[robinknox]

Hi @Giners and @andrewjdavison I've created a pull request #41 to resolve this issue based upon the suggestionsContainerProps method mentioned above.

[BartoGabriel]

I had the same problem. I solved it in another way. I use the property anchorEl (https://material-ui.com/api/popper/)

I share it in case it helps someone:

Setting the anchorEl property of the Popper element.

      <Popper
      anchorEl={this.inputEl}
      placement="bottom-start"
        //modifiers={({ inner: { enabled: true } })}
        //style={{ left: 0, right: 0, zIndex: 1 }}
      >

Considering defining the input variable in the constructor:

  constructor() {
    super()

    // Control the <input> element/<Autosuggest> component and make this React component the source
    // of truth for their state.
    this.state = {
      suggestions: [],
    }
    this.inputEl = null; 
    this.onInputValueChange = this.onInputValueChange.bind(this)
    this.onSuggestionSelected = this.onSuggestionSelected.bind(this)
    this.renderAutocomplete = this.renderAutocomplete.bind(this)
  }

And changing the renderAutocomplete, so that it defines the variable inputEl with the reference of the TextField

  renderAutocomplete({
    getInputProps,
    getItemProps,
    isOpen,
    inputValue,
    highlightedIndex,
  }) {
    const { suggestions } = this.state
    const { renderTarget, textFieldProps } = this.props

    // We need to store the input reference for our Popper element containg the suggestions
    const storeInputRef = input => {
      this.inputEl = input;
    };
    // We set the value of 'tag' on the <Manager> component to false to allow the rendering of
    // children instead of a specific DOM element.
    //
    // We only want to render our suggestions container if Downshift says we are open AND there are
    // suggestions to actually render. There may not be suggestions yet due to the async nature of
    // requesting them from the Google Maps/Places service.
    //
    // Provide an 'id' to the input props (see <TextField>) to accommodate SSR. If we don't then we
    // will see checksum errors with the 'id' prop of the <input> element not matching what was
    // rendered on the server vs. what was rendered on the client after rehydration due to automatic
    // 'id' prop generation by <Downshift>.
    return (
      <div>
        <Manager tag={false}>
          <TextField
            inputRef={storeInputRef}
            {...getInputProps({ id: 'mui-places-autocomplete-input', ...textFieldProps })} />
          <Target>{renderTarget()}</Target>
          {isOpen ? MUIPlacesAutocomplete.renderSuggestionsContainer(
            suggestions,
            { getItemProps, inputValue, highlightedIndex },
          )
            : null}
        </Manager>
      </div>
    )
  }

[yosefprogramming]

If I would like to style it in a way where the width wouldn't be 100% how would I do so?

[robinknox]

Hi @yosefprogramming I raised pull request #41 for this feature however I've been unable to get a reply from @Giners for a few months now. I'll probably publish my fork to npm.

[yosefprogramming]

Hey @robinknox. Thanks would really be usefull. Also would appreciate if you let me know once you publish the fork.

[danielmana]

As a workaround it's also possible to use a wrapper. eg:

<div style={{ position: 'relative' }}>
  <MUIPlacesAutocomplete
     onSuggestionSelected={this.onSuggestionSelected}
     renderTarget={() => <div />}
     textFieldProps={{ fullWidth: true }}
  />
</div>

This way the popover matches the input's width