Skip to content

refactor: bind undefined instead of false for the pattern and error message - #3850

Open
Vondry wants to merge 1 commit into
bolt:6.2from
Vondry:refactor/vue3-false-attributes
Open

Vondry wants to merge 1 commit into
bolt:6.2from
Vondry:refactor/vue3-false-attributes

Conversation

@Vondry

@Vondry Vondry commented Oct 26, 2026

Copy link
Copy Markdown
Contributor

Next step in splitting #3751 towards Vue 3.

Why

Twig passes false for a field without a pattern or error message. Vue 2 drops a non-boolean attribute bound to false, but Vue 3 renders it as "false". On Vue 3 every such field would get:

  • pattern="false", so the field only accepts the literal value "false" and the record can no longer be saved;
  • data-errormessage="false", so common.js would show "false" as the validation message.

Why this approach

  • The migration guide's fix is to bind null or undefined to drop an attribute. Both work on Vue 2.7 too, so this can land now.
  • Only false is mapped. Vue 2 drops exactly false, null and undefined, so every other value ('', 0, any string) renders as before.
  • A prop default would not help: Twig always passes the prop, so the default never applies.
  • One helper keeps the reason and the link in a single place. In <script setup> the components will import it directly.

What changed

  • assets/js/app/editor/utils/attributes.ts: optionalAttribute() returns undefined for false and every other value as it is.
  • The editor fields bind data-errormessage and pattern through it: 19 bindings in Text, Email, Number, Password, Textarea, Slug, Embed, File, Image, Date and Select. placeholder is unchanged, because Twig sends '' for it, never false.
  • Tests: each field checks that the attributes render when set and are dropped when false. Date, Select, File and Image use the tests from Migrate to Vue 3 Composition API and TypeScript #3751, replacing File's it.todo.

@Vondry
Vondry changed the base branch from 6.1 to 6.2 October 26, 2026 11:43
…essage

Twig passes `false` for a field without a pattern or error message. Vue 2
drops a non-boolean attribute bound to `false`, but Vue 3 renders it as
"false", so every such field would get `pattern="false"` (and could no
longer be saved) and `data-errormessage="false"`.

The new `optionalAttribute` helper maps `false` to `undefined`, which drops
the attribute in both versions; every other value renders as before. The
editor fields bind `data-errormessage` and `pattern` through it.

https://v3-migration.vuejs.org/breaking-changes/attribute-coercion.html
@Vondry
Vondry force-pushed the refactor/vue3-false-attributes branch from 4898793 to b2015c6 Compare October 26, 2026 11:44

This branch has not been deployed

No deployments
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.

1 participant