fix(input): [input] fix textarea word wrap style #2896
Conversation
WalkthroughThis pull request updates several Vue components to improve text formatting. In two demo components, the continuous string used for displaying text is replaced with a string containing newline characters, resulting in multi-line text display. In another component, a Changes
Possibly related PRs
Suggested labels
Suggested reviewers
Poem
Thank you for using CodeRabbit. We offer it for free to the OSS community and would appreciate your support in helping us grow. If you find it useful, would you consider giving us a shout-out on your favorite social media? 🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
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 (
|
WalkthroughThis pull request addresses the word wrap style in textarea components by modifying the way text is displayed. It introduces line breaks in long text strings to ensure proper word wrapping and replaces a Changes
|
![petercat-assistant[bot]](https://avatars.githubusercontent.com/in/875736?s=60&v=4){kind=small}
| @update:visible="state.showDisplayOnlyBox = $event" | ||
| > | ||
| <div>{{ state.displayOnlyText }}</div> | ||
| <pre>{{ state.displayOnlyText }}</pre> |
There was a problem hiding this comment.
Changing from <div> to <pre> is a significant change as it affects how whitespace and line breaks are handled. Ensure that this change does not inadvertently affect other styles or functionalities related to text display.
![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)
examples/sites/demos/pc/app/input/display-only-popup-more.vue (1)
24-26: Consider responsive width for better text wrapping.The fixed width of 260px might cause undesirable text wrapping on different screen sizes. Consider making the width responsive or adding a min/max width constraint.
.demo-input .tiny-textarea { - width: 260px; + width: 100%; + max-width: 260px; }
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (3)
examples/sites/demos/pc/app/input/display-only-popup-more-composition-api.vue(1 hunks)examples/sites/demos/pc/app/input/display-only-popup-more.vue(1 hunks)packages/vue/src/input/src/pc.vue(1 hunks)
✅ Files skipped from review due to trivial changes (2)
- examples/sites/demos/pc/app/input/display-only-popup-more-composition-api.vue
- packages/vue/src/input/src/pc.vue
⏰ Context from checks skipped due to timeout of 90000ms (1)
- GitHub Check: PR E2E Test (pnpm test:e2e3)
🔇 Additional comments (1)
examples/sites/demos/pc/app/input/display-only-popup-more.vue (1)
16-17:❓ Verification inconclusive
Verify text wrapping behavior with newlines.
The addition of explicit newline characters (
\n) improves text formatting by creating line breaks at logical points. However, please verify that:
- The text wraps correctly when the window is resized
- The popup-more functionality still works as expected with the new line breaks
🏁 Script executed:
#!/bin/bash # Search for related test files to ensure the new wrapping behavior is tested rg -g '*.spec.{js,ts,vue}' -l 'display-only.*popup-more'Length of output: 58
Action: Please manually verify that the text wrapping and popup-more behavior work as expected.
The automated search for tests did not produce any output, so we couldn't confirm these behaviors via tests. Ensure that:
- The text wraps correctly with the new explicit newline (
\n) characters when the window is resized.- The popup-more functionality remains unaffected by the new formatting.
PR
修复文本域只读态换行问题
PR Checklist
Please check if your PR fulfills the following requirements:
PR Type
What kind of change does this PR introduce?
What is the current behavior?
Issue Number: N/A
What is the new behavior?
Does this PR introduce a breaking change?
Other information
Summary by CodeRabbit