Repository navigation
fix(forms): prevent implicit form submission from grid - #17741
Conversation
There was a problem hiding this comment.
Copilot review overview
🟢 Approval recommended
The focused implementation correctly resolves the reported behavior and includes appropriate regression coverage.
Review effort: Balanced
Findings: None
What changed in this PR
Prevents the snackbar action button from implicitly submitting a containing form.
Changes:
- Sets the default action button’s type to
button. - Adds unit coverage for the button type.
- Documents the fix in the changelog.
| File | Description |
|---|---|
snackbar.component.html |
Adds the explicit button type. |
snackbar.component.spec.ts |
Verifies the rendered type attribute. |
CHANGELOG.md |
Records the form-submission fix. |
💡 Add a code-review agent skill for context-aware, tailored reviews. Learn more in the docs.
|
@igdmdimitrov With type="button" on the snackbar, the form no longer has a submit button. But the HTML spec still allows implicit submission when a form with no submit button has only one text-like input: pressing Enter in that input submits the form. The column actions search input is that one input, so Enter submits the form. Adding type="button" to individual buttons won't cover this. We need a more general fix that cancels the default action of Enter for inputs inside the grid. |
viktorkombov
left a comment
There was a problem hiding this comment.
Verified locally on 8153548: the new spec plus the snackbar, query builder and pivot selector specs pass (194/194), the grid filtering/editing/toolbar/keyboard-nav suites pass (697/697), and with the production changes reverted 8 of the 11 new tests fail, so the spec guards the fix. Also checked a standalone igx-grid-excel-style-filtering inside a form: its custom dialog is attached through the grid body view container, so the grid listener covers it too. Two non-blocking nits inline.
viktorkombov
left a comment
There was a problem hiding this comment.
Rechecked the current head. Please strengthen the focused regression coverage below.

Closes #17638
Approach: a single internal helper,
preventImplicitSubmission(igniteui-angular/core), cancels Enter only on inputs that belong to a form and would submit it (not button, submit, reset, image, file or color inputs). It reads the focused element throughevent.composedPath(), so elements inside shadow DOM are handled correctly. It runs on keydown and keypress, in the capture phase on the grid host. keypress is needed because a date picker that selects a day on Enter moves focus back to its input before the browser submits.Used by:
IgxGridBaseDirective(so it covers the tree, hierarchical and pivot grids too; the spec only exercises IgxGrid),igx-column-actions,igx-pivot-data-selectorandigx-query-builder. The query builder covers the advanced filtering dialog, including when it's standalone or opened with custom overlay settings. The snackbar and the query builder buttons now havetype="button".Type of Change (check all that apply):
How Has This Been Tested?
Checklist:
feature/README.MDupdates for the feature docsREADME.MDCHANGELOG.MDupdates for newly added functionalityng updatemigrations for the breaking changes (migrations guidelines)