MUI TextField多行组件：移动端回车触发换行而非创建标签的问题

核心问题原因 #

1. multiline属性干扰：你给TextField添加了multiline属性，移动端Chrome软键盘的回车默认逻辑就是触发换行，尽管PC端onKeyDown能拦截，但移动端事件处理机制存在差异，导致e.preventDefault()未完全生效。
2. 事件兼容性不足：移动端软键盘的回车事件，e.key可能不是标准的'Enter'，部分场景下会返回'NumpadEnter'，导致你的判断条件无法触发标签创建逻辑。
3. 状态同步延迟：InputProps.startAdornment直接使用formik.values[name]渲染标签，和组件内部的items状态存在更新延迟，这也是连续点击两次右下角图标才生效的原因。

具体修复方案 #

1. 移除multiline属性（推荐方案）

标签输入不需要真正的多行输入能力，用CSS实现视觉上的多行效果即可，从根源避免移动端换行逻辑触发：

return (
  <TextField
    id={id}
    label={label || ''}
    variant={variant || 'outlined'}
    type={type || 'text'}
    error={meta.touched && Boolean(meta.error) && true}
    helperText={renderHelperText()}
    autoComplete={autoComplete || 'on'}
    fullWidth={fullWidth || false}
    sx={{
      mb: 6,
      '& .MuiInputBase-root': {
        borderRadius: theme.spacing(2),
        flexWrap: 'wrap',
        gap: theme.spacing(2),
        // 通过CSS实现输入区域换行效果
        whiteSpace: 'pre-wrap',
        ...inputBaseStyle,
      },
      ...style,
    }}
    value={inputValue}
    onChange={handleChange}
    onFocus={() => setShrink(true)}
    onBlur={() => !items.length && setShrink(false)}
    onKeyDown={handleKeyDown}
    placeholder={placeholder || ''}
    // 移除multiline属性
    InputLabelProps={{ shrink }}
    InputProps={{
      // 改用组件内部items状态渲染标签，避免和formik值不同步
      startAdornment: items.map(
        (item: string, index: number) => (
          <Chip
            key={item}
            tabIndex={-1}
            label={item}
            color="primary"
            onDelete={() => handleDelete(index)}
            sx={{
              borderRadius: theme.spacing(1),
              fontWeight: '500',
              fontSize: '1rem',
              '& .MuiChip-deleteIcon': {
                color: theme.palette.common.white,
              },
            }}
          />
        )
      ),
    }}
    {...rest}
  />
)

2. 增强回车事件兼容性（保留multiline的备选方案）

如果必须保留multiline，修改handleKeyDown函数，兼容更多回车事件类型：

const handleKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {
  // 兼容多种回车事件类型
  const isEnterKey = e.key === 'Enter' || e.key === 'NumpadEnter' || e.keyCode === 13;
  if (isEnterKey) {
    e.preventDefault(); // 优先阻止默认换行行为
    const trimmedValue = inputValue.replace(/\s/g, '');
    if (!trimmedValue.length) return;

    const duplicatedValues = items.indexOf(inputValue);
    if (duplicatedValues !== -1) {
      setInputValue('');
      return;
    }

    setItems([...items, inputValue]);
    setInputValue('');
  }
}

3. 修复状态同步问题

将InputProps.startAdornment中的formik.values[name]替换为组件内部的items状态，确保标签渲染和内部状态完全同步，解决点击两次图标才生效的问题。

额外优化建议 #

• 给输入框添加maxLength限制，避免标签内容过长
• 支持粘贴事件批量创建标签（可按逗号、回车分割粘贴内容）
• 移动端监听软键盘的done按钮事件，同样触发标签创建逻辑

内容的提问来源于stack exchange，提问作者ronak patel