Classes prop doesn't respond to changes when computed

[stevebauman]

Version

• Vue version: 3

Description

First off, thanks for the work on this! I really like this select component ❤️

When providing the classes prop as a computed property, multiselect doesn't apply the changes (i.e. is not reactive to the change).

I'm struggling attempting to apply "invalid" styling to the element, since the component doesn't re-compute class name changes.

Demo

https://jsfiddle.net/phuqkv0b/

When changing invalid to true and re-running the fiddle, the text and container border is appropriately changed to red. However, changing it dynamically via a button (for example) does not update the classes and reflect the necessary class changes.

[timoransky]

Hey, just found out about this problem as well. Any chanes we can get this fixed? Otherwise it's pretty impossible to style the Multiselect for invalid/error state :/

[stevebauman]

Hey @timoransky, I'm going to try and work on a PR, though I'm not convinced it'll get merged.

Not sure if this will help you, but to work around this at the moment I've place a wrapper around the <Multiselect> element:

<!-- Dropdown.vue -->
<template>
    <div
        :class="{
            'sm:text-xs': size === 'sm',
            'sm:text-sm': size === null,
            'sm:text-lg': size === 'lg',
            'border-gray-300': !isInvalid,
            'border-red-300 text-red-900': isInvalid,
        }"
        class="relative border rounded-md shadow-sm"
    >
        <Multiselect />
    </div>
</template>

<script>
export default {
    props: ['size', 'isInvalid'],

    // ...
}
</script>

This can get tricky since you'll have to make sure the border radius in your <Multiselect/> classes matches the wrappers border radius (not ideal).

[timoransky]

Hey, thanks a lot! I did it in very similar way.

[adamberecz]

Thanks for reporting @stevebauman - classes were indeed not reactive. This got fixed in 2.3.0.

[stevebauman]

Thanks @adamberecz! Really appreciate it 🙏