feat(vue-vuetify): add MultiEnumSelectRenderer for multi-select dropdowns by darius-lesch · Pull Request #2637 · eclipsesource/jsonforms

darius-lesch · 2026-10-02T19:01:07Z

Description:
Resolves #2635.

What does this PR do?

This PR introduces a MultiEnumSelectRenderer to the @jsonforms/vue-vuetify package, allowing developers to render array-based enumerations as a <v-select multiple> dropdown instead of the default checkbox group.

For large datasets, checkbox groups consume excessive vertical space. This opt-in renderer leverages Vuetify's native multiselect capabilities (including chips and closable-chips) for a much cleaner UX.

Implementation Details

100% Backward Compatible: The new renderer is strictly opt-in. It operates at a rank of 10 and only triggers when the UI Schema includes options: { format: 'multiselect' }. Existing schemas relying on the EnumArrayRenderer (checkboxes) are unaffected.
State Management: Utilizes useJsonFormsControl rather than useJsonFormsMultiEnumControl to natively handle the full array replacement emitted by <v-select multiple>, avoiding the need for manual array diffing.
Testing: Includes comprehensive unit tests in MultiEnumSelectRenderer.spec.ts covering both enum and oneOf schema definitions, as well as selection, deselection, and clear events.
Playground Example: Added a dedicated multi-select example to the @jsonforms/examples package so this feature can be easily evaluated in the dev playground.

How to Test

Run pnpm install && pnpm run build.
Start the Vue-Vuetify dev server: cd packages/vue-vuetify && pnpm run dev --force.
Select the multi-select example from the playground's top navigation dropdown to interact with the new renderer.

Currently, arrays of enums are strictly bound to EnumArrayRenderer which forces a checkbox list view. For large data sets, a dropdown selection box is more manageable. This adds a native MultiEnumSelectRenderer using `<v-select multiple>` to provide dropdown multi-select. It is opted-in via setting `options: { format: 'multiselect' }` within the UI Schema. Added tests covering layout rendering, bindings, snapshots, and event firing.

…erer-7959558924810637854 feat(vue-vuetify): add MultiEnumSelectRenderer for multiselect array control

Added a new dedicated example `multi-select` in the `@jsonforms/examples` package to showcase the `MultiEnumSelectRenderer` functionality. Registered the example and successfully verified its appearance in the playground.

…-14240345949356981889 Add multi-select dropdown example

netlify · 2026-10-02T19:01:14Z

✅ Deploy Preview for jsonforms-examples ready!

Name	Link
🔨 Latest commit	`5c9466b`
🔍 Latest deploy log	https://app.netlify.com/projects/jsonforms-examples/deploys/6ac88ecc28944b0008e09f36
😎 Deploy Preview	https://deploy-preview-2637--jsonforms-examples.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify project configuration.

coveralls · 2026-10-07T14:44:11Z

coverage: 84.58%. remained the same — darius-lesch:feat/multi-enum-select-renderer into eclipsesource:master

lucas-koehler

Hi @darius-lesch , thanks for the contribution ❤️
Adding this renderer makes sense to me 👍
I have some comments inline, please have a look.

…controls

Extracted the array/uniqueItems logic currently duplicated in both MultiEnumSelectRenderer.entry.ts and EnumArrayRenderer.entry.ts into a shared `isMultiEnumControl` predicate in `util/tester.ts`. This refactor also replaces the local `hasOneOfItems` and `hasEnumItems` implementations with `@jsonforms/core`'s native `isOneOfEnumSchema` and `isEnumSchema` utilities while retaining the core conditions.

…predicate-4994370107824699869 refactor(vue-vuetify): extract shared predicate for multi-enum testers

…pec comments

…77ee4 Consolidate multi-select examples and clean spec comments

…lti-enum-3946876482457681454 feat: support atomic array updates for multi-enum controls

lucas-koehler

Hi @darius-lesch , thanks for the updates! I have some more comments inline. Please have a look :)

Replaces the manual `onChange` event wrapper in `MultiEnumSelectRenderer.vue` by leveraging the native `adaptValue` argument of `useVuetifyControl`. Restores `determineClearValue([])` to safely evaluate and assign clear values when the selected array is null or empty, ensuring dynamic property states remain consistent.

Encapsulated the `uiTypeIs('Control')` check natively inside the `isMultiEnumControl` tester utility to match the public API consistency of other core core testers. Removed redundant wrapper checks and orphaned imports from consuming entry files.

…tation Refactors `mapDispatchToMultiEnumProps` to use object spread with `mapDispatchToControlProps` in order to reuse the standard `handleChange` dispatcher, removing duplicated code. Also adds an appropriate unit test to ensure `handleChange` mutations apply correctly for multi-enum core setups.

…ntrol-11666017978019933440 refactor(vue-vuetify): standardize isMultiEnumControl API

…num-clear-logic-2745426208810466107 refactor(vue-vuetify): utilize adaptValue in MultiEnumSelectRenderer

Updated the "emits change when an item is deselected" test for the MultiEnumSelectRenderer to simulate removing a single item from a populated array (emitting `['a']` instead of `[]`) rather than a full clear. Added a new test specifically targeting the full clear scenario via empty array (`[]`), where `undefined` is appropriately expected as the emitted control data. Also, ran tests with `--update` to refresh snapshot ids that changed due to the added test block, and ran prettier.

…37511975146579 chore(core): DRY up mapDispatchToMultiEnumProps handleChange implementation

…election-test-12266432720069315409 test(vue-vuetify): cover partial deselect for multiselect component

…mSelectRenderer Added interaction tests for `oneOf` schema blocks within `MultiEnumSelectRenderer.spec.ts` to improve test coverage. This includes verifying state mutations for selection, partial deselection, and both array and null clear emissions, replicating the tests already present for the `enum` schema variant. Snapshots updated to reflect internal ID shifts.

…one-of-interaction-coverage-14122450674640127001 test(vue-vuetify): add interaction tests for oneOf schema in MultiEnumSelectRenderer

fix: PR2637 comments v2

…e enum - Replaced `isEnumSchema(schema)` with `schema.enum !== undefined` to prevent the predicate from matching `const`-only string arrays, which caused multi-select controls to render as empty options. - Added a `vitest` unit test to explicitly verify `const`-only array schemas return rank -1. - Cleaned up unused `isEnumSchema` import from `@jsonforms/core` in `tester.ts`.

…only-5318206538835551857 fix(vue-vuetify): prevent isMultiEnumControl from matching const-only schemas

lucas-koehler

@darius-lesch Thanks for the updates and the contribution ❤️ LGTM now 🚀
Just so you are not surprised, I took the liberty to remove an unnecessary as any cast and pushed it directly to the branch to avoid an additional review cycle just for this ;)

darius-lesch · 2026-10-09T07:42:23Z

@lucas-koehler, thanks for your thorough reviews and patience. It is really helpful to deeper understand jsonforms.

darius-lesch and others added 6 commits October 2, 2026 11:45

Merge pull request #4 from darius-lesch/feature/multienum-select-rend…

b305067

…erer-7959558924810637854 feat(vue-vuetify): add MultiEnumSelectRenderer for multiselect array control

feat: add multi-select example to the dev playground

2f82463

Added a new dedicated example `multi-select` in the `@jsonforms/examples` package to showcase the `MultiEnumSelectRenderer` functionality. Registered the example and successfully verified its appearance in the playground.

Resolved linting and harmonized imports

42b1b16

Merge pull request #5 from darius-lesch/feat-add-multi-select-example…

7cecfd9

…-14240345949356981889 Add multi-select dropdown example

Merge branch 'eclipsesource:master' into feat/multi-enum-select-renderer

b36f863

fix: resolved namespace error

f457e12

lucas-koehler self-requested a review October 7, 2026 15:02

lucas-koehler requested changes Oct 7, 2026

View reviewed changes

darius-lesch and others added 7 commits October 7, 2026 20:32

feat(core, vue-vuetify): support atomic array updates for multi-enum …

7ef53a0

…controls

Merge pull request #11 from darius-lesch/refactor-extract-multi-enum-…

5ff28df

…predicate-4994370107824699869 refactor(vue-vuetify): extract shared predicate for multi-enum testers

chore(examples): consolidate multi-select into enum-multi and clean s…

0c76e8a

…pec comments

Merge pull request #12 from darius-lesch/jules-113073129629200865-d6d…

5727bb4

…77ee4 Consolidate multi-select examples and clean spec comments

fix: prettier formatting fix applied

e7a0171

Merge pull request #10 from darius-lesch/feat-atomic-array-updates-mu…

515e556

…lti-enum-3946876482457681454 feat: support atomic array updates for multi-enum controls

darius-lesch requested a review from lucas-koehler October 7, 2026 22:11

lucas-koehler requested changes Oct 8, 2026

View reviewed changes

darius-lesch and others added 10 commits October 8, 2026 15:21

fix: removed leftover blank line

ce95497

Merge pull request #14 from darius-lesch/standardize-is-multi-enum-co…

06c2b40

…ntrol-11666017978019933440 refactor(vue-vuetify): standardize isMultiEnumControl API

Merge pull request #13 from darius-lesch/refactor/vue-vuetify-multi-e…

77042c4

…num-clear-logic-2745426208810466107 refactor(vue-vuetify): utilize adaptValue in MultiEnumSelectRenderer

Merge pull request #15 from darius-lesch/fix-core-mapper-dry-up-94112…

84bd290

…37511975146579 chore(core): DRY up mapDispatchToMultiEnumProps handleChange implementation

Merge pull request #16 from darius-lesch/fix/vuetify-multi-select-des…

0b19ce7

…election-test-12266432720069315409 test(vue-vuetify): cover partial deselect for multiselect component

darius-lesch and others added 5 commits October 8, 2026 17:47

Merge pull request #18 from darius-lesch/test/vue-vuetify-multi-enum-…

26bf3ff

…one-of-interaction-coverage-14122450674640127001 test(vue-vuetify): add interaction tests for oneOf schema in MultiEnumSelectRenderer

Merge pull request #17 from darius-lesch/fix/pr-2637-comments-v2

544047d

fix: PR2637 comments v2

fix: prettier fixes

b3f9f6d

Merge pull request #19 from darius-lesch/fix-multi-enum-tester-const-…

410cd79

…only-5318206538835551857 fix(vue-vuetify): prevent isMultiEnumControl from matching const-only schemas

darius-lesch requested a review from lucas-koehler October 8, 2026 16:29

remove unnecessary any cast

5c9466b

lucas-koehler approved these changes Oct 9, 2026

View reviewed changes

lucas-koehler merged commit 0b1cb54 into eclipsesource:master Oct 9, 2026
10 of 11 checks passed

darius-lesch deleted the feat/multi-enum-select-renderer branch October 9, 2026 08:43

Navigation Menu

Repository navigation

feat(vue-vuetify): add MultiEnumSelectRenderer for multi-select dropdowns - #2637

feat(vue-vuetify): add MultiEnumSelectRenderer for multi-select dropdowns#2637
lucas-koehler merged 30 commits into
eclipsesource:masterfrom
darius-lesch:feat/multi-enum-select-renderer

darius-lesch commented Oct 2, 2026

Uh oh!

netlify Bot commented Oct 2, 2026 •

edited

Loading

Uh oh!

coveralls commented Oct 7, 2026 •

edited

Loading

Uh oh!

lucas-koehler left a comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

lucas-koehler left a comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

lucas-koehler left a comment

Uh oh!

Uh oh!

darius-lesch commented Oct 9, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

Conversation

darius-lesch commented Oct 2, 2026

What does this PR do?

Implementation Details

How to Test

Uh oh!

netlify Bot commented Oct 2, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

✅ Deploy Preview for jsonforms-examples ready!

Uh oh!

coveralls commented Oct 7, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

lucas-koehler left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

lucas-koehler left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

lucas-koehler left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

darius-lesch commented Oct 9, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

netlify Bot commented Oct 2, 2026 •

edited

Loading

coveralls commented Oct 7, 2026 •

edited

Loading