IxSelect: No events on vue?

[davidgiga1993]

Prerequisites

• [X] I have read the Contributing Guidelines.
• [X] I have not leaked any internal/restricted information like screenshots, videos, code snippets, links etc.

What happened?

When using IxSelect I can't seem to get any change events. I've tried multiple combination of events:

@inputChange
@input-change
@onInputChange

however none of those get triggered when selecting an item.

Am I doing something wrong or is this a bug?

What type of frontend framework are you seeing the problem on?

Others

Which version of iX do you use?

2.4.1

Code to produce this issue.

<script lang="ts">
import {IxSelect, IxSelectItem} from '@siemens/ix-vue';
import {defineComponent, type PropType} from "vue";
import {DropdownItem} from "@/components/ix/Models";

export default defineComponent({
    name: 'VIxSelect',
    components: {IxSelect, IxSelectItem},
    emits: ['update:modelValue'],
    props: {
        modelValue: {
            type: Object
        },
        options: {
            type: Array as PropType<DropdownItem[]>,
            required: true
        },
    },
    data() {
        return {
            selectedIdx: '4' as string | string[],
        }
    },
    computed: {
        selectOptions(): DropdownItem[] {
            const mapped = [] as DropdownItem[]
            for (let i = 0; i < this.options.length; i++) {
                const option = this.options[i]
                mapped.push({value: i.toString(), label: option.label})
            }
            return mapped
        },
    },
    methods: {
        updateValueIdx() {
            for (let i = 0; i < this.options.length; i++) {
                if (this.options[i].value === this.modelValue) {
                    this.selectedIdx = i.toString()
                    break
                }
            }
        },
        onValueChange(event) {
            console.log('change happened')
            this.selectedIdx = event
        },
    },
    mounted() {
        this.updateValueIdx()
    },
    watch: {
        selectedIdx(newVal) {
            const idx = parseInt(newVal)
            this.$emit('update:modelValue', this.options[idx].value)
        },
        modelValue() {
            this.updateValueIdx()
        }
    },
})
</script>

<template>
    {{ selectedIdx }}
    <IxSelect :value="selectedIdx" @value-change="onValueChange">
        <IxSelectItem label="Item 1" value="1"></IxSelectItem>
        <IxSelectItem label="Item 2" value="2"></IxSelectItem>
        <IxSelectItem label="Item 3" value="3"></IxSelectItem>
        <IxSelectItem label="Item 4" value="4"></IxSelectItem>
    </IxSelect>
</template>

[github-actions[bot]]

🤖 Hello @davidgiga1993

Your issue will be analyzed and is part of our internal workflow. To get informed about our workflow please checkout the Contributing Guidelines

JIRA: IX-1502

[PhentomPT]

@davidgiga1993 in the meantime i think you can use the click event on IxSelectItem to know what value was selected

// ...
    <IxSelectItem label="Item 1" value="1" @click="onValueChange('1')"></IxSelectItem>
    <IxSelectItem label="Item 2" value="2" @click="onValueChange('2')"></IxSelectItem>
    <IxSelectItem label="Item 3" value="3" @click="onValueChange('3')"></IxSelectItem>
    <IxSelectItem label="Item 4" value="4" @click="onValueChange('4')"></IxSelectItem>
// ...