fix: form auto submit no effect when showDefaultActions is false #5163
Conversation
|
|
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/vben-use-form.vueOops! 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 modify the Changes
Assessment against linked issues
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 (
|
![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)
packages/@core/ui-kit/form-ui/src/vben-use-form.vue (1)
58-61: Consider adding error handling for validateAndSubmitForm callsThe changes correctly implement auto-submit functionality using formApi directly. However, consider adding error handling for the validation and submission process.
Consider wrapping the form submission in a try-catch:
const handleValuesChangeDebounced = useDebounceFn((newVal) => { forward.value.handleValuesChange?.(cloneDeep(newVal)); - state.value.submitOnChange && forward.value.formApi?.validateAndSubmitForm(); + if (state.value.submitOnChange && forward.value.formApi) { + try { + forward.value.formApi.validateAndSubmitForm(); + } catch (error) { + console.error('Form validation/submission failed:', error); + } + } }, 300);Also applies to: 63-67
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (1)
packages/@core/ui-kit/form-ui/src/vben-use-form.vue(3 hunks)
🔇 Additional comments (2)
packages/@core/ui-kit/form-ui/src/vben-use-form.vue (2)
9-9: LGTM: Import changes align with the implementation needs
The addition of nextTick and onMounted imports from Vue is appropriate for the new watch setup implementation.
Line range hint 45-55: LGTM: Form submission now correctly works independent of FormActions visibility
The changes properly decouple the Enter key form submission from the FormActions component visibility by using formApi directly. This fixes the reported issue while maintaining the textarea exception handling.
Let's verify the form submission behavior in other components:
✅ Verification successful
LGTM: Form submission changes are safe and properly implemented
The changes to use formApi.validateAndSubmitForm() directly are correct and align with the form API's implementation. The code review shows:
- The FormActions component is decoupled from the form submission logic, only providing UI elements
- The FormApi class properly implements
validateAndSubmitForm()method with validation checks - No other components rely on formActionsRef for form submission
- The Enter key handler is properly scoped to the form component
🏁 Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash
# Search for other components that might rely on formActionsRef for form submission
rg -l "formActionsRef.*handleSubmit"
# Check for any other Enter key handlers that might conflict
ast-grep --pattern 'keydown.enter="$_"'
Length of output: 80
Script:
#!/bin/bash
# Let's try different search patterns to find form submission related code
rg -l "formActionsRef"
# Search for form submission handlers
rg -l "handleSubmit|submitForm|validateAndSubmit"
# Look for keydown event handlers in vue files
rg "@keydown" --type vue -A 2
Length of output: 2375
Script:
#!/bin/bash
# Let's examine the form-actions component and form API implementation
cat packages/@core/ui-kit/form-ui/src/components/form-actions.vue
# Check the form API implementation
cat packages/@core/ui-kit/form-ui/src/form-api.ts
# Look for keydown handlers in the specific file
rg "@keydown" packages/@core/ui-kit/form-ui/src/vben-use-form.vue -A 2
Length of output: 14301
Description
修复不显示默认操作按钮时，表单的自动提交功能失效（回车自动提交、值改变时自动提交）
fix #5159
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
New Features
Bug Fixes