diff --git a/packages/vue-vanilla/src/controls/EnumControlRenderer.vue b/packages/vue-vanilla/src/controls/EnumControlRenderer.vue index e2bf0ce6c..0de37499a 100644 --- a/packages/vue-vanilla/src/controls/EnumControlRenderer.vue +++ b/packages/vue-vanilla/src/controls/EnumControlRenderer.vue @@ -52,8 +52,11 @@ const controlRenderer = defineComponent({ ...rendererProps(), }, setup(props: RendererProps) { - return useVanillaControl(useJsonFormsEnumControl(props), (target) => - target.selectedIndex === 0 ? undefined : target.value + const input = useJsonFormsEnumControl(props); + return useVanillaControl(input, (target) => + target.selectedIndex === 0 + ? undefined + : input.control.value.options[target.selectedIndex - 1].value ); }, }); diff --git a/packages/vue-vanilla/src/controls/EnumOneOfControlRenderer.vue b/packages/vue-vanilla/src/controls/EnumOneOfControlRenderer.vue index 0b520279d..3c4619338 100644 --- a/packages/vue-vanilla/src/controls/EnumOneOfControlRenderer.vue +++ b/packages/vue-vanilla/src/controls/EnumOneOfControlRenderer.vue @@ -52,8 +52,11 @@ const controlRenderer = defineComponent({ ...rendererProps(), }, setup(props: RendererProps) { - return useVanillaControl(useJsonFormsOneOfEnumControl(props), (target) => - target.selectedIndex === 0 ? undefined : target.value + const input = useJsonFormsOneOfEnumControl(props); + return useVanillaControl(input, (target) => + target.selectedIndex === 0 + ? undefined + : input.control.value.options[target.selectedIndex - 1].value ); }, }); diff --git a/packages/vue-vanilla/tests/unit/controls/EnumControlRenderer.spec.ts b/packages/vue-vanilla/tests/unit/controls/EnumControlRenderer.spec.ts index 58cb1c0e6..85f390207 100644 --- a/packages/vue-vanilla/tests/unit/controls/EnumControlRenderer.spec.ts +++ b/packages/vue-vanilla/tests/unit/controls/EnumControlRenderer.spec.ts @@ -28,4 +28,27 @@ describe('EnumControlRenderer.vue', () => { await select.setValue('b'); expect(wrapper.vm.data).to.equal('b'); }); + + it('emits undefined when empty option is selected', async () => { + const wrapper = mountJsonForms('a', schema, uischema); + const select = wrapper.find('select'); + await select.setValue(''); + expect(wrapper.vm.data).to.be.undefined; + }); +}); + +const numberSchema = { + type: 'integer', + title: 'My Integer Enum', + enum: [1, 2], +}; + +describe('EnumControlRenderer.vue (integer)', () => { + it('emits a data change with number type', async () => { + const wrapper = mountJsonForms(1, numberSchema, uischema); + const select = wrapper.find('select'); + await select.setValue('2'); + expect(wrapper.vm.data).to.be.a('number'); + expect(wrapper.vm.data).to.equal(2); + }); }); diff --git a/packages/vue-vanilla/tests/unit/controls/EnumOneOfControlRenderer.spec.ts b/packages/vue-vanilla/tests/unit/controls/EnumOneOfControlRenderer.spec.ts index 371b55458..964f51a27 100644 --- a/packages/vue-vanilla/tests/unit/controls/EnumOneOfControlRenderer.spec.ts +++ b/packages/vue-vanilla/tests/unit/controls/EnumOneOfControlRenderer.spec.ts @@ -31,4 +31,30 @@ describe('EnumOneOfControlRenderer.vue', () => { await select.setValue('b'); expect(wrapper.vm.data).to.equal('b'); }); + + it('emits undefined when empty option is selected', async () => { + const wrapper = mountJsonForms('a', schema, uischema); + const select = wrapper.find('select'); + await select.setValue(''); + expect(wrapper.vm.data).to.be.undefined; + }); +}); + +const numberSchema = { + type: 'integer', + title: 'My Integer OneOf Enum', + oneOf: [ + { const: 1, title: 'One' }, + { const: 2, title: 'Two' }, + ], +}; + +describe('EnumOneOfControlRenderer.vue (integer)', () => { + it('emits a data change with number type', async () => { + const wrapper = mountJsonForms(1, numberSchema, uischema); + const select = wrapper.find('select'); + await select.setValue('2'); + expect(wrapper.vm.data).to.be.a('number'); + expect(wrapper.vm.data).to.equal(2); + }); });