fix: Fixed the issue that the asynchronous setting of enterKeyHint fails when textarea is in autoFocus #6917
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
…ils when textarea is in autoFocus 当TextArea设置autoFocus时，通过useLayoutEffect设置的enterKeyHint属性在当次不会生效，需要重新触发焦点才能生效； 和豆酱沟通后提交pr，增加默认enterKeyHint设置；
📝 WalkthroughWalkthrough本次更改在 Changes
Poem
✨ Finishing Touches
🧪 Generate unit tests
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. 🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
SupportNeed help? Create a ticket on our support page for assistance with any issues or questions. Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments. CodeRabbit Commands (Invoked using PR comments)
Other keywords and placeholders
CodeRabbit Configuration File (
|
|
|
dosubot
bot
added
size:XS
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Nitpick comments (1)
src/components/text-area/text-area.tsx (1)
96-102:useInputHandleKeyDown参数对象每次渲染都会重新创建
此处直接向自定义 Hook 传递字面量对象，会导致 Hook 内部依赖全部变化而无法利用useMemo/useCallback等缓存，影响性能。可提前用useMemo封装：-const handleKeydown = useInputHandleKeyDown({ - onEnterPress: props.onEnterPress, - onKeyDown: props.onKeyDown, - nativeInputRef: nativeTextAreaRef, - enterKeyHint: props.enterKeyHint, -}) +const keydownConfig = React.useMemo( + () => ({ + onEnterPress: props.onEnterPress, + onKeyDown: props.onKeyDown, + nativeInputRef: nativeTextAreaRef, + enterKeyHint: props.enterKeyHint, + }), + [props.onEnterPress, props.onKeyDown, props.enterKeyHint], +) +const handleKeydown = useInputHandleKeyDown(keydownConfig)
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (1)
src/components/text-area/text-area.tsx(1 hunks)
🔇 Additional comments (2)
src/components/text-area/text-area.tsx (2)
45-53: 属性类型定义完备，接口保持向后兼容 👍
新增的enterKeyHint枚举值覆盖了规范中所有合法取值，并且保持可选，现有调用方不会破坏。
196-205: 确认enterKeyHint最低支持版本
MDN 文档显示enterkeyhint属性在 Chrome/Edge/Chrome for Android ≥ 77、Firefox ≥ 94、Safari ≥ 13.1（iOS Safari ≥ 13.4）等主流浏览器中均已支持¹。
- 若您项目最低支持环境均在这些版本及以上，可直接依赖 React 原生属性，无需额外同步；
- 如需兼容更早版本（如某些旧 Android WebView < 77），建议在组件内部补充一次原生属性赋值。
需关注位置：
- 文件：
src/components/text-area/text-area.tsx- 渲染
<textarea>（约 196–205 行）useIsomorphicLayoutEffect同步阶段示例改动：
<textarea … onKeyDown={handleKeydown} - enterKeyHint={props.enterKeyHint} + enterKeyHint={props.enterKeyHint} // React 会原样输出 unknown attribute，HTML 属性名不区分大小写 /> // 布局阶段补充原生属性，覆盖老旧环境兼容差异 useIsomorphicLayoutEffect(() => { - if (props.enterKeyHint && nativeTextAreaRef.current) { - (nativeTextAreaRef.current as any).enterKeyHint = props.enterKeyHint - } + if (props.enterKeyHint && nativeTextAreaRef.current) { + (nativeTextAreaRef.current as any).enterKeyHint = props.enterKeyHint + } }, [props.enterKeyHint])请根据您的浏览器矩阵确认是否需要保留并使用上述原生属性同步方案。
¹ 引自 MDN：https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Global_attributes/enterkeyhint
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
fix: Fixed the issue that the asynchronous setting of enterKeyHint fails when textarea is in autoFocus
当TextArea设置autoFocus时，通过useLayoutEffect设置的enterKeyHint属性在当次不会生效，需要重新触发焦点才能生效；
和豆酱沟通后提交pr，增加默认enterKeyHint设置；
Summary by CodeRabbit