Headless UI's dropdown selected stops working after Inertia GET

Question

I'm using Headless UI as a part of the Tailwind UI's Vue implementation and Vue3 which work perfectly until Inertia is brought in.

The headless UI's ListboxOption has a Selected property which matches the Selected towards the model of the Listbox and returns a boolean.

This is my Dropdown's script:

export default {
    props: [
        'modelValue', 'label', 'options'
    ],
    data() {
        return {
            content: this.modelValue,
            selected: null,
        }
    },
    methods: {        
        handleInput (e) {
            this.content = e;
            this.$emit('update:modelValue', this.content)
        },
    },
    components: {
        Listbox,
        ListboxButton,
        ListboxLabel,
        ListboxOption,
        ListboxOptions,
        CheckIcon,
        SelectorIcon,
    },
    created() {
        this.selected = this.modelValue != '' ? this.modelValue : this.options[0];
    },
    watch: {
        selected(value) {
            this.handleInput(value)
        },
    }
}

If I don't do anything in the parent component when emiting update modelValue it all works perfectly. Selected is set properly etc.

When I do an Inertia.get with preserveState I can see that the selected property in the dropdown is updated and stays absolutely the same as when it works, but the selected property of the ListboxOption returns false.

score 0 · Answer 1 · answered Jun 11 '23 at 13:26

What worked for me was to empty the selected array first then push the items into the selected array using the items that are tied to the array.

For example, if you have nutrients as the options and selected_nutrients as what is being v-modeled by the ListBox:

const nutrients = [
    { id: 1, name: 'Calories' },
    { id: 2, name: 'Fat' },
    { id: 3, name: 'Cholesterol' },
    { id: 4, name: 'Sodium' },
    { id: 5, name: 'Carbohydrates' },
    { id: 6, name: 'Fiber' },
    { id: 7, name: 'Sugar' },
    { id: 8, name: 'Protein' },
    { id: 9, name: 'Vitamin A' },
    { id: 10, name: 'Vitamin C' },
    { id: 11, name: 'Calcium' },
    { id: 12, name: 'Iron' }
];

const selected_nutrients = ref([nutrients[0], nutrients[1], nutrients[4], nutrients[7]])

You would have to do something like this to get the ListBox to cooperate:

selected_nutrients.value = [];
for (let i = 0; i < tracked_nutrition.length; i++) {
 selected_nutrients.value.push(nutrients[tracked_nutrition[i].id - 1]);
}

Headless UI's dropdown selected stops working after Inertia GET

1 Answers1