在带multiline属性的TextField中添加Chip组件不符合预期

问题原因 #

• startAdornment默认采用单行flex布局，无法实现标签自动换行
• startAdornment默认垂直居中，加上Chip设置height:100%，导致标签显示在输入框中部

解决方案 #

自定义TextField的输入区域，将标签（Chip）与输入框内容放在同一个可换行的容器中，替代原有的startAdornment方案：

import { TextField, Chip, Box } from '@mui/material';

// 保留你的handleDelete、handleInputChange、handleKeyDown等函数逻辑

<TextField
  value={inputValue}
  margin="dense"
  rows={6}
  multiline
  fullWidth
  placeholder="add tags"
  sx={{ mt: 2 }}
  label="tags"
  InputProps={{
    inputComponent: ({ inputRef, ...props }) => (
      <Box
        sx={{
          display: 'flex',
          flexWrap: 'wrap',
          alignItems: 'flex-start',
          gap: 0.5,
          padding: '8px',
          minHeight: '120px',
          border: '1px solid rgba(0,0,0,0.23)',
          borderRadius: '4px',
          '&:focus-within': {
            borderColor: '#2196f3',
            boxShadow: '0 0 0 2px rgba(33,150,243,0.2)',
          }
        }}
      >
        {selectedItem.map(item => (
          <Chip
            key={item}
            tabIndex={-1}
            label={item}
            onDelete={() => handleDelete(item)}
            size="small"
          />
        ))}
        <input
          ref={inputRef}
          {...props}
          style={{
            flex: 1,
            border: 'none',
            outline: 'none',
            minWidth: '100px',
            padding: '4px 0'
          }}
        />
      </Box>
    ),
    onChange: handleInputChange,
    onKeyDown: handleKeyDown
  }}
/>

关键修改点 #

• 使用inputComponent自定义输入容器，实现标签与输入内容的混排布局
• 容器设置flexWrap: 'wrap'开启自动换行，alignItems: 'flex-start'让标签顶部对齐
• 修正onDelete的绑定方式，避免渲染时立即执行删除逻辑
• 移除Chip的height:100%，改用size="small"适配输入框高度
• 自定义容器的边框和聚焦样式，匹配Material-UI默认TextField的视觉效果

内容的提问来源于stack exchange，提问作者hakima maarouf