Question

这是最近发生的问题，仅在Chrome（版本76.0.3809.132）上发生。我有一个真正的简单对话框，其中包含一个材质ui（v4.3.3）网格，一些TextField和2 react-select（v3.0.4）Select框。设置容器时，请设置两端对齐flex-start和alignItems Stretch。输入控件仅包装在Grid项中，并在其上设置了fullWidth。我看到的问题是，在渲染时，TextFields不会拉伸Grid的整个宽度，而Selects会拉伸。这就是有趣的地方，如果我在各个组件之间进行制表循环对焦，则当React-Select Select组件获得焦点时，TextField将立即捕捉到全宽，如果我单击到React-Select Select组件中，也会发生这种情况。如果我将Tab键循环移回TextField，它们将恢复为原始的固定宽度。

如果我从网格中删除“选择”，则TextFields将按预期方式拉伸容器的宽度。我已经从react-select Select中删除了所有自定义样式，但它仍然表现出相同的行为（TextFields未以全角显示）。我还尝试了一个单独的第三方反应包装器，它们围绕react-select，react-select-material-ui，仍然表现出相同的行为。

<div class="match">
  <div class="match-name">MATCH 1</div>
  <div class="match-league">LEAGUE 2</div>
</div>

<div class="match">
  <div class="match-name">MATCH 2</div>
  <div class="match-league">LEAGUE 1</div>
</div>

如前所述，直到最近它仍能按预期运行，并且仅在Chrome中发生。我的期望是TextFields将始终呈现容器的整个宽度。

Answer 1

最新版本的Chrome（版本77.0.3865.75）似乎已解决了渲染问题。事情正在按预期呈现。

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

1 个答案: