fix: form support disabledOnInputListener
#5127
Conversation
mynetfan
requested review from
anncwb,
vince292007 and
a team
as code owners
|
|
Warning There were issues while running some tools. Please review the errors and either fix the tool’s configuration or disable the tool if it’s a critical failure. 🔧 eslint
packages/@core/ui-kit/form-ui/src/types.tsOops! Something went wrong! :( ESLint: 9.16.0 Error [ERR_MODULE_NOT_FOUND]: Cannot find module '/node_modules/@vben/eslint-config/dist/index.mjs' imported from /eslint.config.mjs WalkthroughThe changes in this pull request introduce a new configuration option, Changes
Assessment against linked issues
Possibly related PRs
Suggested labels
Suggested reviewers
📜 Recent review detailsConfiguration used: CodeRabbit UI 📒 Files selected for processing (1)
🚧 Files skipped from review as they are similar to previous changes (1)
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 (
|
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 1
🧹 Outside diff range and nitpick comments (2)
packages/@core/ui-kit/form-ui/src/form-render/form.vue (1)
93-93: LGTM! Consider adding JSDoc comments.The addition of
disabledOnInputListeneris well-integrated into the existing configuration structure. This change aligns with the PR's objective to prevent unintended form value changes.Consider adding JSDoc comments to document the purpose and default value of this property, similar to other properties in the configuration:
+/** + * Whether to disable input event listeners for form fields + * @default false + */ disabledOnInputListener = false,Also applies to: 115-115
packages/@core/ui-kit/form-ui/src/form-render/form-field.vue (1)
231-238: Simplify the conditional event binding logic.The current implementation has some redundancy in handling the
disabledOnInputListenercondition. The code can be simplified while maintaining the same functionality.Consider this more concise implementation:
- return disabledOnInputListener - ? { - onInput: undefined, - } - : {}; + return disabledOnInputListener ? { onInput: undefined } : {};
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (6)
apps/web-ele/src/adapter/form.ts(1 hunks)apps/web-ele/src/views/demos/form/basic.vue(1 hunks)packages/@core/ui-kit/form-ui/src/config.ts(1 hunks)packages/@core/ui-kit/form-ui/src/form-render/form-field.vue(2 hunks)packages/@core/ui-kit/form-ui/src/form-render/form.vue(2 hunks)packages/@core/ui-kit/form-ui/src/types.ts(2 hunks)
🔇 Additional comments (4)
apps/web-ele/src/adapter/form.ts (1)
17-18: LGTM! Clear solution for preventing unintended form updates.
The addition of disabledOnInputListener effectively prevents unintended form value updates from input events in components like Select. The Chinese comment clearly explains the rationale.
packages/@core/ui-kit/form-ui/src/config.ts (2)
47-51: LGTM! Clean implementation with backward compatibility.
The disabledOnInputListener config is properly integrated with the existing configuration system, maintaining backward compatibility with its default false value.
54-56: LGTM! Proper config propagation.
The config is correctly propagated to DEFAULT_FORM_COMMON_CONFIG, following the established pattern.
apps/web-ele/src/views/demos/form/basic.vue (1)
142-142: LGTM! Enhanced Select component with filtering support.
Adding filterable: true to the Select component improves user experience by enabling option filtering. This change works in conjunction with the new disabledOnInputListener to prevent unintended form updates during filtering.
Description
修复ElementPlus组件库Select等组件的onInput会导致表单值意外改变的问题。
fix: #5122
fix: #5090
Type of change
Please delete options that are not relevant.
pnpm-lock.yamlunless you introduce a new test example.Checklist
pnpm run docs:devcommand.pnpm test.feat:,fix:,perf:,docs:, orchore:.Summary by CodeRabbit
Release Notes
New Features
disabledOnInputListeneroption for enhanced control over input event handling in forms.filterableoption to theSelectcomponent, allowing users to filter options.Bug Fixes
Documentation
disabledOnInputListenerproperty for better configuration clarity.