Semi-Design中TextArea组件maxLength限制失效问题分析

问题背景

在Semi-Design UI库的TextArea组件中，当设置了maxLength和maxCount属性后，在MacOS系统上使用中文输入法时，如果输入内容达到限制长度后继续输入但不确认（不上屏），然后通过鼠标失焦操作，会导致TextArea组件超出预设的长度限制。

现象重现

开发者可以通过以下代码重现该问题：

<TextArea maxCount={10} maxLength={10} showClear/>

具体表现为：

1. 输入内容达到10个字符限制
2. 切换为系统中文输入法
3. 继续输入中文但不确认（保持拼音状态）
4. 通过鼠标点击其他区域使TextArea失焦
5. 此时TextArea会显示超出限制长度的内容

技术分析

原生textarea与input的行为差异

经过测试发现，原生HTML元素在处理这种情况时表现不同：

1. 原生textarea组件：

   • 输入中文不上屏时，拼音字符长度超过maxLength
   • 点击其他位置触发blur事件
   • 最终显示的是完整的拼音字符，超出maxLength限制

2. 原生input组件：

   • 同样情况下触发blur事件
   • 但会在blur前多触发一次onChange事件
   • 最终显示的是符合maxLength限制的部分内容

React受控组件的行为差异

在React中，当使用受控value并设置maxLength时：

• input元素：

  • 中文输入时，拼音字符超出maxLength
  • blur前会触发额外的onChange事件
  • 自动截断超出部分

• textarea元素：

  • 同样情况下不会触发额外的onChange
  • 导致最终内容超出限制

解决方案思路

针对这个问题，可以考虑以下几种解决方案：

1. 在TextArea组件的blur事件处理中主动检查并截断超出maxLength的内容
2. 模拟input元素的行为，在适当时候触发额外的onChange事件
3. 在composition相关事件(compositionstart/compositionend)中维护状态，确保不上屏内容不影响最终值

最佳实践建议

对于开发者而言，在使用TextArea组件时：

1. 如果需要严格的长度限制，建议在业务层也做一次校验
2. 对于中文输入场景，可以监听composition相关事件来完善用户体验
3. 考虑使用debounce等技术优化高频输入场景下的性能

总结

这个问题揭示了React中受控组件在不同表单元素上行为的不一致性，特别是在处理IME输入时的边界情况。Semi-Design团队需要针对textarea的特殊行为进行额外处理，才能确保与input组件一致的用户体验。