[Autocomplete] disablePortal and classes.popperDisablePortal are not usable

[kelvin2200]

• The issue is present in the latest release (@material-ui/lab@4.0.0-alpha.31).
• I have searched the issues of this repository and believe that this is not a duplicate.

Current Behavior 😯

Material-UI: the key popperDisablePortal provided to the classes prop is not implemented in ForwardRef(Autocomplete).
You can only override one of the following: root,focused,tag,inputRoot,input,inputFocused,clearIndicator,clearIndicatorDirty,popupIndicator,popupIndicatorOpen,popup,paper,listbox,loading,noOptions,option,groupLabel,groupUl.

Warning: React does not recognize the disablePortal prop on a DOM element.

Context 🔦

I am trying to design a custom autocomplete as per the example that reproduces the GitHub's label picker found on:
https://material-ui.com/components/autocomplete/

I don't have to actually do a sandbox, because i checked the es, esm and ts versions of the Autocomplete inside node_modules, and i found that those props are NOT defined, so the error is legit.

Am i using the wrong lab version?
Because whatever version is used on the material-ui website is NOT the one available to mortals.

Your Environment 🌎

Tech	Version
Material-UI	v4.6.0
React	16.9.0
Browser
TypeScript
etc.

[oliviertassinari]

@kelvin2200 Thanks for the report, it will be released in the lab, version 4.0.0-alpha.32, today.

[kelvin2200]

Thanks. Really need this.

[oliviertassinari]

Released

[nullberri]

popperDisablePortal class is still not available.

https://github.com/mui-org/material-ui/blob/master/packages/material-ui-lab/src/Autocomplete/Autocomplete.d.ts

line 118

[kelvin2200]

For those that encounter problems with the Autocomplete in @material-ui/lab@4.0.0-alpha.32
note that @material-ui/core@4.6.1 is required. Took me a few hours to discover that.
Maybe it should be added as a min dependency for the lab.

[kelvin2200]

Also, if anyone will ever take this into consideration, a method for controlling the behavior of a custom Autocomplete's input would be much appreciated. More specifically, a keepOpen on input focus kind of thing. The autofocus doesn't seem to work properly, and in case a custom onClose method exists, there is no way of focusing the input.

[oliviertassinari]

@kelvin2200 We have fixed the peer dependency recently, it will be release next week.

[oliviertassinari]

disableCloseOnSelect?

[kelvin2200]

disableCloseOnSelect has no effect when clicking on the input. The custom Autocomplete still closes (same thing happens on the example on the material ui website).
What i have, is a custom Autocomplete, much like the example on the material-ui website, with the exception, that it is rendered by another component rendered inside a Dialog. It seems that passing autoFocus to the input element, prevents either the Dialog, or the Autocomplete itself from rendering. Just as if it instantly opens and closes. Still don't know what the issue is, but i will dig a bit further and provide a sandbox unless i figure it out;

[npkolev]

I have the same problem as kevin2200 with the input. It closes on click unless there is text in it and that is not optimal behaviour. Although the search functionality is in place, the user can get easily confused by the fact that clicking on the input field closes the popper. Using ClickAwayListener solves the problem but clicking on the select list now closes the component. disableCloseOnSelect does not prevent this behaviour.

[marrakchim]

Same problem here, using disableCloseOnSelect with a controlled Autocomplete does not prevent the list from closing after select...
Any news ?

Here is what my component looks like :

<Autocomplete
        options={options}
        value={value}
        disableCloseOnSelect
        onChange={handleChange}
        limitTags={4}
        getOptionLabel={(option) => option.name }
        renderOption={(option, { selected }) => (
          <React.Fragment>
            <Checkbox
              icon={icon}
              checkedIcon={checkedIcon}
              className={classes.checkbox}
              checked={selected}
            />
            {option.name}
          </React.Fragment>
        )}
        renderInput={(params) => (
          <TextField {...params}  variant="outlined" label={label} placeholder={label} />
        )}
        {...custom}
      />

[oliviertassinari]

@marrakchim Do you have a live reproduction we can look at?

[bazfer]

Can confirm that disableCloseOnSelect is not working for a controlled component. Any word on this issue?

[oliviertassinari]

@bazfer Do you have a reproduction?

[bazfer]

We've got an example on our Storybook (click 'New' top right, then use the 'Departments' or 'Locations' Autocomplete fields). Is that enough or are you looking for a code sandbox?

[oliviertassinari]

Is that enough or are you looking for a code sandbox?

@bazfer We need a codesandbox with the minimum amount of code possible.

[bazfer]

Follow up: can't repro on minimal case. Thanks for the prompt replies.

[gyudisanyi]

CodeSandbox: Autocomplete closing despite disableCloseOnSelect is caused by the mother component re-rendering.