Question 72736 in Reactjs Question posted in
The new location for the React Documentation can be found here.

Popper translation of MUI Autocomplete Component issue – Reactjs

I meet this issue using MUI Autocomplete component 🙁https://i.stack.imgur.com/q8YDj.png)(https://i.stack.imgur.com/ZzDox.png).
The popper sometimes appear on the left, sometimes on the right of the text input, there is my code :

<ThemeProvider theme={theme}>
  <Autocomplete
    disablePortal={true}
    id="combo-box-demo"
    options={technologies}
    sx={{ width: 300 }}
    className="nodrag"
    value={value}
    onChange={handleChange}
    renderInput={(params) => (
      <TextField
        {...params}
        label="Technology"
        color="neutral"
        className="nodrag"
      />
    )}
  />
</ThemeProvider>

But it doesn’t works

Tags:

2

Answers


  1. 0

    Try this out, onChange or any event should be inside renderInput

    <Autocomplete 
    freeSolo
    selectOnFocus
    handleHomeEndKeys
    id="combo-box-demo"
    className="nodrag"
    options={technologies}
    renderInput={
        (params) => (
            <TextField 
                {...params} 
                label="Enter Recipient's name"
                helperText="Please enter Recipient's name"
                value={recipient}
                onChange={({target}) => setRecipient(target.value)} />
        )} />
    Login or Signup to reply.
  2. 0

    Use PopperComponent prop as this:

    const MyPopper = function (props) {
  return (<Popper {...props} style={{ width: 250 }} placement='bottom-start' />)
}

    Then:

    <Autocomplete PopperComponent={MyPopper}>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search