Неправильное расположение выпадающего компонента автозаполнения для React Material-UI - PullRequest
0 голосов
/ 31 марта 2020

При расширении компонента Автозаполнение пользовательского интерфейса открывается раскрывающийся список, как и ожидалось. Однако, как только он открывается и я прокручиваю его, он перемещается, а не остается под окном автозаполнения. Я обнаружил, что это поведение должно быть исправлено для версии материала, которую я использую , как указано здесь . Я также проверил это для простого нового проекта в песочнице, где он работал нормально.

Поэтому я ожидаю, что невольно перезаписал некоторые важные настройки стиля, но не смог понять ошибку. Любые идеи, где я мог бы искать?

Следуя соответствующему фрагменту кода:

The component where I render the Autocomplete component
const useStyles = makeStyles(theme => ({
...,
  vinBox: {
    width: 320,
    marginTop: "4px"
  }
}));
...
return (
    <Autocomplete
      id="vin-selection"
      options={allVehicleVins}
      className={classes.vinBox}
      onChange={(event, data) => setFilter({ ...filter, vin: data })}
      value={filter.vin}
      renderInput={params => (
        <TextField
          {...params}
          margin={"normal"}
          label="VIN"
          variant="standard"
          InputProps={{
            ...params.InputProps,
            startAdornment: (
              <InputAdornment position="start">
                <DirectionsCar />
              </InputAdornment>
            )
          }}
          helperText={
            "Choose a VIN to filter for specific vehicles of your fleet."
          }
          fullWidth
        />
      )}
    />
  );
};

Я использовал Chrome Версия 80.0.3987.149 (хотя это также произошло в других браузерах). Некоторые из моих зависимостей:

...
"@material-ui/core": "^4.8.2",
"@material-ui/icons": "^4.5.1",
"@material-ui/lab": "^4.0.0-alpha.35",
"react": "^16.12.0",
...

example of badly positioned dropdown

1 Ответ

0 голосов
/ 01 апреля 2020

Хорошо, после тщательного тестирования я обнаружил свою ошибку. У меня есть index.css прямо в папке src. Там у меня есть следующий стиль:

body {
  ...
  overflow-y: scroll;
  ...
} 

изменение этого делает свое дело. Надеюсь, это поможет любому, читающему это:)

...