[Autocomplete] disablePortal and classes.popperDisablePortal are not usable

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.

Issue Analytics

State:
Created 4 years ago
Comments:18 (8 by maintainers)

Top GitHub Comments

1reaction

oliviertassinaricommented, Sep 22, 2020

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

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

1reaction

marrakchimcommented, May 14, 2020

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}
      />