Skip to content

fix: 🐛 修复 Input、Textarea、Search 组件设置清空后不聚焦时无法触发失焦事件的问题 - #1046

Merged
Moonofweisheng merged 1 commit into
masterfrom
fix/input-blur-error
May 13, 2025
Merged

Moonofweisheng merged 1 commit into
masterfrom
fix/input-blur-error

Conversation

@Moonofweisheng

@Moonofweisheng Moonofweisheng commented May 9, 2025 •

Copy link
Copy Markdown
Owner

🤔 这个 PR 的性质是?(至少选择一个)

  • 日常 bug 修复
  • 新特性提交
  • 站点、文档改进
  • 演示代码改进
  • 组件样式/交互改进
  • TypeScript 定义更新
  • CI/CD 改进
  • 包体积优化
  • 性能优化
  • 功能增强
  • 国际化改进
  • 代码重构
  • 代码风格优化
  • 测试用例
  • 分支合并
  • 其他改动(是关于什么的改动?)

🔗 相关 Issue

💡 需求背景和解决方案

修复 Input、Textarea、Search 组件设置清空后不聚焦时无法触发失焦事件的问题

☑️ 请求合并前的自查清单

⚠️ 请自检并全部勾选全部选项。⚠️

  • 文档已补充或无须补充
  • 代码演示已提供或无须提供
  • TypeScript 定义已补充或无须补充

Summary by CodeRabbit

  • 重构
    • 优化了输入框和多行文本框的清除逻辑,使其在特定情况下才会设置清除状态。
    • 搜索组件内部变量和事件处理函数命名更加清晰,提升了代码可读性和维护性。
  • 无用户可见功能变化

@vercel

vercel Bot commented May 9, 2025 •

Copy link
Copy Markdown

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name Status Preview Comments Updated (UTC)
wot-design-uni ✅ Ready (Inspect) Visit Preview 💬 Add feedback May 9, 2025 5:31am

@netlify

netlify Bot commented May 9, 2025 •

Copy link
Copy Markdown

✅ Deploy Preview for wot-design-uni ready!

Name Link
🔨 Latest commit 769e2ad
🔍 Latest deploy log https://app.netlify.com/sites/wot-design-uni/deploys/681d92fb7da3c40008144bc5
😎 Deploy Preview https://deploy-preview-1046--wot-design-uni.netlify.app
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify site configuration.

@coderabbitai

coderabbitai Bot commented May 9, 2025 •

Copy link
Copy Markdown

Walkthrough

本次变更主要涉及对 wd-input.vue、wd-textarea.vue 的 handleClear 方法中 clearing.value 的赋值时机进行调整,仅在 focusWhenClear 为真时才赋值为 true。同时,wd-search.vue 组件将内部输入值变量从 str 重命名为 inputValue,并统一了相关事件处理函数的命名,提升了代码可读性。

Changes

文件/路径 变更摘要
src/uni_modules/wot-design-uni/components/wd-input/wd-input.vue
src/uni_modules/wot-design-uni/components/wd-textarea/wd-textarea.vue
handleClear 方法中 clearing.value = true 赋值调整,仅在 focusWhenClear 为真时赋值,其他逻辑保持不变。
src/uni_modules/wot-design-uni/components/wd-search/wd-search.vue 输入值变量由 str 改为 inputValue,相关事件处理函数统一重命名为 handleXxx,并做了少量时序微调。

Sequence Diagram(s)

sequenceDiagram
    participant User
    participant wd-search.vue
    participant Parent

    User->>wd-search.vue: 输入内容
    wd-search.vue->>wd-search.vue: handleInput(event)
    wd-search.vue->>Parent: emit('update:modelValue', inputValue)
    User->>wd-search.vue: 点击清除
    wd-search.vue->>wd-search.vue: handleClear()
    wd-search.vue->>Parent: emit('clear')
    User->>wd-search.vue: 输入框失焦
    wd-search.vue->>wd-search.vue: handleBlur()
    wd-search.vue->>Parent: emit('blur')
    User->>wd-search.vue: 按下回车
    wd-search.vue->>wd-search.vue: handleConfirm()
    wd-search.vue->>Parent: emit('search', inputValue)
Loading

Possibly related PRs

Poem

🐰
代码如风轻轻改,
清除时机更明白。
输入变量换新颜,
事件函数皆统一。
组件协作更顺畅,
代码小兔乐开怀!

Tip

⚡️ Faster reviews with caching
  • CodeRabbit now supports caching for code and dependencies, helping speed up reviews. This means quicker feedback, reduced wait times, and a smoother review experience overall. Cached data is encrypted and stored securely. This feature will be automatically enabled for all accounts on May 16th. To opt out, configure Review - Disable Cache at either the organization or repository level. If you prefer to disable all data retention across your organization, simply turn off the Data Retention setting under your Organization Settings.

Enjoy the performance boost—your workflow just got faster.


📜 Recent review details

Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 276df7c and 769e2ad.

📒 Files selected for processing (3)
  • src/uni_modules/wot-design-uni/components/wd-input/wd-input.vue (1 hunks)
  • src/uni_modules/wot-design-uni/components/wd-search/wd-search.vue (5 hunks)
  • src/uni_modules/wot-design-uni/components/wd-textarea/wd-textarea.vue (1 hunks)
⏰ Context from checks skipped due to timeout of 90000ms (2)
  • GitHub Check: Test Components (wd-input)
  • GitHub Check: Cloudflare Pages
🔇 Additional comments (16)
src/uni_modules/wot-design-uni/components/wd-input/wd-input.vue (1)

239-242: 修复清空操作时失焦事件触发逻辑

修改将 clearing.value = true 的赋值移动到 props.focusWhenClear 条件判断内部,确保只有在需要在清空后聚焦时才设置清空标志。当 focusWhenClear 为 false 时,clearing.value 保持为 false,允许 handleBlur 函数正常执行并触发失焦事件。

这个改动修复了当组件以编程方式清空而没有聚焦时(即 focusWhenClear 为 false),失焦事件无法被正常触发的问题。

src/uni_modules/wot-design-uni/components/wd-textarea/wd-textarea.vue (1)

235-239: 修复清空操作时失焦事件触发逻辑

将 clearing.value = true 的赋值移到 props.focusWhenClear 条件判断内部,确保只有在需要在清空后聚焦时才设置清空标志。此变更与 wd-input.vue 中的修改保持一致,修复了当组件以编程方式清空而没有聚焦时(focusWhenClear 为 false),失焦事件无法被正常触发的问题。

src/uni_modules/wot-design-uni/components/wd-search/wd-search.vue (14)

10-11: 重命名变量并保持一致性

将内部状态变量从 str 更改为 inputValue,提高了代码可读性和组件之间的一致性。


12-13: 统一变量命名

将内部状态变量从 str 更改为 inputValue,保持代码一致性。


17-18: 统一模型绑定变量命名

将 v-model 绑定的变量从 str 更改为 inputValue,使命名更具描述性。


19-23: 统一事件处理函数命名

将事件处理函数名称更改为使用 handle 前缀(例如,handleFocus、handleInput等),提高了代码可读性和与其他组件的一致性。


27-28: 统一清除图标点击事件和变量命名

将清除图标点击事件从 clearSearch 更改为 handleClear,并将变量从 str 更改为 inputValue,保持函数命名和变量命名的一致性。


64-65: 统一内部状态变量命名

将内部状态变量的声明从 str 更改为 inputValue,使命名更具描述性且与其他组件保持一致。


71-72: 统一 watch 中变量引用

在 watch 监听回调中,将 str.value 更改为 inputValue.value,与变量重命名保持一致。


101-102: 更新样式计算中的变量引用

在 coverStyle 计算属性中,将 str.value 更改为 inputValue.value,保持代码一致性。


120-126: 统一输入事件处理函数命名

将 inputValue 函数重命名为 handleInput,遵循 handle 前缀的命名约定,并更新了函数内的变量引用。


128-147: 修复清空操作时失焦事件触发逻辑

  1. 将 clearSearch 函数重命名为 handleClear,遵循一致的命名约定
  2. 将 str.value 更改为 inputValue.value
  3. 关键修复:将 clearing.value = true 的赋值移到 props.focusWhenClear 条件判断内部
  4. 使用 pause() 替代固定的 pause(100),使用默认的暂停时间

这个改动修复了当组件以编程方式清空而没有聚焦时(focusWhenClear 为 false),失焦事件无法被正常触发的问题,与 wd-input.vue 和 wd-textarea.vue 中的修改保持一致。


149-154: 统一确认事件处理函数命名

将 search 函数重命名为 handleConfirm,使命名更加准确且遵循一致的命名约定。


156-161: 统一聚焦事件处理函数命名

将 searchFocus 函数重命名为 handleFocus,遵循一致的命名约定,并更新了函数内的变量引用(str.value 改为 inputValue.value)。


163-177: 完善失焦事件处理逻辑

  1. 将 searchBlur 函数重命名为 handleBlur,遵循一致的命名约定
  2. 添加等待清空操作完成的逻辑(150毫秒暂停)
  3. 添加对 clearing.value 的检查,如果正在清空,则不触发失焦事件
  4. 将 str.value 更改为 inputValue.value

这些变更确保了在清空操作过程中失焦事件处理的一致性,与其他组件的行为保持一致。


181-182: 更新取消事件中的变量引用

在 handleCancel 函数中,将 str.value 更改为 inputValue.value,保持变量引用的一致性。


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.

❤️ Share
🪧 Tips

Chat

There are 3 ways to chat with CodeRabbit:

  • Review comments: Directly reply to a review comment made by CodeRabbit. Example:
    • I pushed a fix in commit <commit_id>, please review it.
    • Generate unit testing code for this file.
    • Open a follow-up GitHub issue for this discussion.
  • Files and specific lines of code (under the "Files changed" tab): Tag @coderabbitai in a new review comment at the desired location with your query. Examples:
    • @coderabbitai generate unit testing code for this file.
    • @coderabbitai modularize this function.
  • PR comments: Tag @coderabbitai in a new PR comment to ask questions about the PR branch. For the best results, please provide a very specific query, as very limited context is provided in this mode. Examples:
    • @coderabbitai gather interesting stats about this repository and render them as a table. Additionally, render a pie chart showing the language distribution in the codebase.
    • @coderabbitai read src/utils.ts and generate unit testing code.
    • @coderabbitai read the files in the src/scheduler package and generate a class diagram using mermaid and a README in the markdown format.
    • @coderabbitai help me debug CodeRabbit configuration file.

Support

Need 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)

  • @coderabbitai pause to pause the reviews on a PR.
  • @coderabbitai resume to resume the paused reviews.
  • @coderabbitai review to trigger an incremental review. This is useful when automatic reviews are disabled for the repository.
  • @coderabbitai full review to do a full review from scratch and review all the files again.
  • @coderabbitai summary to regenerate the summary of the PR.
  • @coderabbitai generate docstrings to generate docstrings for this PR.
  • @coderabbitai generate sequence diagram to generate a sequence diagram of the changes in this PR.
  • @coderabbitai resolve resolve all the CodeRabbit review comments.
  • @coderabbitai configuration to show the current CodeRabbit configuration for the repository.
  • @coderabbitai help to get help.

Other keywords and placeholders

  • Add @coderabbitai ignore anywhere in the PR description to prevent this PR from being reviewed.
  • Add @coderabbitai summary to generate the high-level summary at a specific location in the PR description.
  • Add @coderabbitai anywhere in the PR title to generate the title automatically.

CodeRabbit Configuration File (.coderabbit.yaml)

  • You can programmatically configure CodeRabbit by adding a .coderabbit.yaml file to the root of your repository.
  • Please see the configuration documentation for more information.
  • If your editor has YAML language server enabled, you can add the path at the top of this file to enable auto-completion and validation: # yaml-language-server: $schema=https://coderabbit.ai/integrations/schema.v2.json

Documentation and Community

  • Visit our Documentation for detailed information on how to use CodeRabbit.
  • Join our Discord Community to get help, request features, and share feedback.
  • Follow us on X/Twitter for updates and announcements.

@petercat-assistant

Copy link
Copy Markdown

Walkthrough

此PR修复了在Input、Textarea和Search组件中,当设置清空后不聚焦时无法触发失焦事件的问题。通过调整组件的事件处理逻辑,确保在清空操作后能够正确触发失焦事件。

Changes

文件 概要
wd-input.vue, wd-textarea.vue 修复了清空操作后不聚焦时无法触发失焦事件的问题,调整了clearing和focusing状态的设置顺序。
wd-search.vue 重构了输入处理逻辑,替换了str为inputValue,并更新了相关事件处理函数以确保在清空后正确触发失焦事件。


async function handleBlur() {
// 等待150毫秒,clear执行完毕
await pause(150)

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

在handleBlur函数中,await pause(150)用于确保在清空操作完成后再进行失焦处理,这样可以避免由于异步操作导致的状态不一致问题。

@codecov-commenter

Copy link
Copy Markdown

⚠️ Please install the 'codecov app svg image' to ensure uploads and comments are reliably processed by Codecov.

Codecov Report

Attention: Patch coverage is 51.61290% with 15 lines in your changes missing coverage. Please review.

Project coverage is 83.15%. Comparing base (8db8b65) to head (769e2ad).
Report is 2 commits behind head on master.

Files with missing lines Patch % Lines
.../wot-design-uni/components/wd-search/wd-search.vue 51.72% 14 Missing ⚠️
...-design-uni/components/wd-textarea/wd-textarea.vue 0.00% 1 Missing ⚠️

❗ Your organization needs to install the Codecov GitHub app to enable full functionality.

Additional details and impacted files
@@            Coverage Diff             @@
##           master    #1046      +/-   ##
==========================================
- Coverage   84.80%   83.15%   -1.66%     
==========================================
  Files         215       13     -202     
  Lines       17273      825   -16448     
  Branches     2666      133    -2533     
==========================================
- Hits        14648      686   -13962     
+ Misses       2625      139    -2486     
Flag Coverage Δ
h5 83.15% <51.61%> (-1.66%) ⬇️
wd-action-sheet ?
wd-backtop ?
wd-badge ?
wd-button ?
wd-calendar ?
wd-calendar-view ?
wd-card ?
wd-cell ?
wd-cell-group ?
wd-checkbox ?
wd-checkbox-group ?
wd-circle ?
wd-col-picker ?
wd-collapse ?
wd-config-provider ?
wd-count-down ?
wd-count-to ?
wd-curtain ?
wd-datetime-picker ?
wd-datetime-picker-view ?
wd-divider ?
wd-drop-menu ?
wd-fab ?
wd-floating-panel ?
wd-form ?
wd-gap ?
wd-grid ?
wd-grid-item ?
wd-icon ?
wd-img ?
wd-img-cropper ?
wd-index-anchor ?
wd-index-bar ?
wd-input 92.42% <100.00%> (ø)
wd-input-number ?
wd-keyboard ?
wd-layout ?
wd-loading ?
wd-loadmore ?
wd-message-box ?
wd-navbar ?
wd-navbar-capsule ?
wd-notice-bar ?
wd-notify ?
wd-number-keyboard ?
wd-overlay ?
wd-pagination ?
wd-password-input ?
wd-picker ?
wd-picker-view ?
wd-popover ?
wd-popup ?
wd-progress ?
wd-radio ?
wd-radio-group ?
wd-rate ?
wd-resize ?
wd-search 72.17% <51.72%> (ø)
wd-segmented ?
wd-select-picker ?
wd-sidebar ?
wd-signature ?
wd-skeleton ?
wd-slider ?
wd-sort-button ?
wd-status-tip ?
wd-step ?
wd-steps ?
wd-sticky ?
wd-sticky-box ?
wd-swipe-action ?
wd-swiper ?
wd-swiper-nav ?
wd-switch ?
wd-tabbar ?
wd-table ?
wd-tag ?
wd-text ?
wd-textarea 81.53% <0.00%> (ø)
wd-toast ?
wd-tooltip ?
wd-transition ?
wd-upload ?
wd-video-preview ?
wd-watermark ?

Flags with carried forward coverage won't be shown. Click here to find out more.

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

🚀 New features to boost your workflow:
  • ❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
  • 📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

@github-actions

github-actions Bot commented May 9, 2025

Copy link
Copy Markdown
Contributor

组件测试摘要 (H5 平台)

测试时间: Fri May 9 05:32:20 UTC 2025

测试结果

组件 状态 覆盖率
wd-input ✅ 通过 92.42%
wd-search ✅ 通过 72.17%
wd-textarea ✅ 通过 81.53%

@cloudflare-workers-and-pages

Copy link
Copy Markdown

Deploying wot-design-uni with  Cloudflare Pages  Cloudflare Pages

Latest commit: 769e2ad
Status: ✅  Deploy successful!
Preview URL: https://415d5fed.wot-design-uni.pages.dev
Branch Preview URL: https://fix-input-blur-error.wot-design-uni.pages.dev

View logs

@Moonofweisheng
Moonofweisheng merged commit 33b5565 into master May 13, 2025
@Moonofweisheng
Moonofweisheng deleted the fix/input-blur-error branch May 13, 2025 05:26

This branch was successfully deployed

1 active deployment
Preview — 769e2ade Deployed May 9, 2025 by vercel[bot]
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants