Skip to content

fix: drop nested <form> wrapper from comments composer (#77)#98

Open
ItsMalikJones wants to merge 3 commits into
mainfrom
fix/77-nested-form-modal
Open

fix: drop nested <form> wrapper from comments composer (#77)#98
ItsMalikJones wants to merge 3 commits into
mainfrom
fix/77-nested-form-modal

Conversation

@ItsMalikJones
Copy link
Copy Markdown

Fixes #77.

Problem

When CommentsEntry is rendered inside a Filament action modal, the comments composer breaks the modal's layout. The composer wraps its editor in an outer <form wire:submit.prevent="save">, and Filament action modals render their own <form> element. Nesting <form> inside <form> is invalid HTML — browsers silently close the inner form early, which causes the modal footer and any extraModalFooterActions() buttons to disappear or render outside the modal.

Fix

This PR replaces the wrapper <form> with a plain <div>. Livewire behavior is identical: the buttons still dispatch their actions via wire:click, and the composer no longer nests a form inside Filament's modal form.

Accessibility

To preserve the semantic grouping the <form> element previously gave assistive technology, the replacement <div> carries role="form" and an aria-label. A new add_comment translation string backs that label and has been added across all supported locales (en, ar, es, fr, nl, ro).

Changes

  • resources/views/comments.blade.php — swap composer <form> for <div role="form"> with an aria-label
  • resources/lang/{en,ar,es,fr,nl,ro}/comments.php — add add_comment translation string
  • tests/Livewire/CommentsTest.php — new test asserting the composer renders no <form> element, exposes role="form", and keeps wire:click="save"

Testing

./vendor/bin/pest
  • New test: comments composer does not render a form element
  • Existing comment/permission tests still pass
  • Manual check: render CommentsEntry inside a Filament action modal and confirm the modal footer + extraModalFooterActions() buttons display correctly

Note: I'd recommend a quick manual verification of the modal scenario from #77 before merging, since the bug's visible symptom (footer placement) isn't something the Livewire test can assert.

The composer's outer `<form wire:submit.prevent="save">` produced
invalid HTML when `CommentsEntry` was rendered inside a Filament
action modal (which renders its own `<form>`), causing the modal
footer and any `extraModalFooterActions()` buttons to disappear or
render outside the modal.

The submit/cancel buttons already used `wire:click`, so the form
wrapper was load-bearing only for the invalid HTML it created.
Replacing it with a plain `<div>` keeps the same Livewire behavior
without nesting forms.
Add the 'add_comment' translation string across all supported
languages (en, ar, es, fr, nl, ro) and add semantic HTML role and
aria-label to the comment form for better accessibility.
@ItsMalikJones ItsMalikJones self-assigned this May 17, 2026
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.

CommentsEntry breaks Filament modal / slide-over footer

1 participant