Skip to content

[LiveComponent] Fix Allow empty values to bypass input model validation modifiers#3367

Open
xDeSwa wants to merge 1 commit intosymfony:2.xfrom
xDeSwa:fix-livecomponent-input-models-validation-modifiers
Open

[LiveComponent] Fix Allow empty values to bypass input model validation modifiers#3367
xDeSwa wants to merge 1 commit intosymfony:2.xfrom
xDeSwa:fix-livecomponent-input-models-validation-modifiers

Conversation

@xDeSwa
Copy link
Contributor

@xDeSwa xDeSwa commented Mar 8, 2026

Q A
Bug fix? yes
New feature? no
Deprecations? no
Documentation? no
Issues Fix #3153
License MIT

The Problem:
Currently, when using input validation modifiers like min_length(3) on a LiveComponent model (e.g., <input type="search" data-model="min_length(3)|query" />), the modifier acts as a strict gatekeeper. If a user types "abc", the model updates correctly. However, if the user clears the input (e.g., by clicking the native "X" clear button on a search input or deleting the text), the update is blocked because the length is 0.

This creates a frustrating UX: the input appears empty on the screen, but the component fails to re-render or notify the server, leaving the page (and backend state) stuck with the previous search results.

The Solution:
This PR updates LiveController to bypass min_length, max_length, min_value, and max_value checks if the input value is completely empty ('', null, or undefined).

Why this is the correct approach (The HTML5 Standard):
This change aligns LiveComponent's frontend validation strictly with standard HTML5 form validation behavior. In HTML5, attributes like minlength and min do not apply to empty values. If a field is allowed to be empty, it passes validation. If a field must not be empty, developers are expected to use the required attribute.

By allowing empty strings to pass through these modifiers:

  1. It restores the expected behavior for search/filter inputs, allowing the component to naturally reset to its initial/unfiltered state when cleared.
  2. It solves complex state synchronization issues between parent/child components when passing models via props:props.
  3. It prevents numeric inputs (min_value) from casting an empty string to 0 and incorrectly failing validation.

@carsonbot carsonbot added Bug Bug Fix LiveComponent Status: Needs Review Needs to be reviewed labels Mar 8, 2026
@github-actions
Copy link
Contributor

github-actions bot commented Mar 8, 2026

📊 Packages dist files size difference

Thanks for the PR! Here is the difference in size of the packages dist files between the base branch and the PR.
Please review the changes and make sure they are expected.

FileBefore (Size / Gzip)After (Size / Gzip)
LiveComponent
live_controller.js 82.44 kB / 18.33 kB 82.57 kB0% / 18.36 kB0%

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

Projects

None yet

Development

Successfully merging this pull request may close these issues.

[LiveComponent] min_length should no apply any constraint on 0 lenght

2 participants