在使用 react-select Select 的同一网格中时，文本字段不会拉伸

Posted 2023-02-22

【中文标题】在使用 react-select Select 的同一网格中时，文本字段不会拉伸

【英文标题】：Textfields aren't stretching when in same Grid with react-select Select

【发布时间】：2020-01-11 16:03:13

【问题描述】：

这是最近的问题，仅在 Chrome（版本 76.0.3809.132）上发生。我有一个真正简单的对话框，其中包含一个材质 ui (v4.3.3) 网格、一些 TextField 和 2 个 react-select(v3.0.4) 选择框。容器设置为 justify flex-start 和 alignItems stretch。输入控件被简单地包裹在 Grid 项目中，所有项目都设置了 fullWidth。我看到的问题是在渲染时，TextFields 不会拉伸 Grid 的整个宽度，而 Selects 会。这就是有趣的地方，如果我在组件中循环焦点，则一旦 react-select Select 组件获得焦点，TextFields 将捕捉到全宽，如果我只是单击 react-select Select 组件，也会发生这种情况。如果我将选项卡循环切换回 TextFields，它们会迅速恢复到原来的发育不良宽度。

如果我从 Grid 中删除 Selects，TextFields 会按预期拉伸容器的宽度。我已经从 react-select Select 中删除了所有自定义样式，它仍然表现出相同的行为（TextFields 显示不是全宽）。我还尝试了围绕 react-select、react-select-material-ui 的单独的 3rd 方反应包装器，它仍然表现出相同的行为。

        <Grid
          container
          direction="column"
          justify="flex-start"
          alignItems="stretch"
        >
          <Grid item>
            <Select ... />
          </Grid>
          <Grid item>
            <TextField ... />
          </Grid>
          <Grid item>
            <TextField ... />
          </Grid>
          <Grid item>
            <TextField ... />
          </Grid>
          <Grid item>
            <Select ... />
          </Grid>
        </Grid>

如前所述，直到最近这才按预期工作，并且仅在 Chrome 中发生。我的期望是 TextFields 将一致地呈现容器的整个宽度。

【参考方案1】：

最新版本的 Chrome（版本 77.0.3865.75）似乎已修复呈现问题。现在一切都在按预期呈现。