In the latest Safari (Version 14.1 - 16611.1.21.161.3), the search field doesn't work. You can enter one character, but then it's somehow blocked:

In other browsers it's ok.

All

• Alle

None

• Keine

Select All

• Alle auswählen

Unselect All

• Alle abwählen

No Options available

• Keine Optionen verfügbar

No Options found

• Keine Optionen gefunden

You can't select more Options

• Es können nicht mehr Optionen ausgewählt werden

Select an Option...

• Wähle eine Option...

Select up to :limit Options...

• Wähle bis zu :limit Optionen...

Type in to search...

• Suchwort eingeben...

This Field is disabled

• Dieses Feld ist deaktiviert

Hello.

I would like to add the greek translation for your excellent plugin.

You can use it if you like.

Thanks.

all: "Όλα",
none: "Κανένα",
empty: "Δεν υπάρχουν διαθέσιμες επιλογές",
emptySearch: "Δεν βρέθηκαν επιλογές",
limit: "Δεν μπορείτε να επιλέξετε περισσότερες επιλογές",
placeholder: "Επιλέξτε μία επιλογή...",
placeholderMulti: "Επιλέξτε μέχρι :limit επιλογές...",
search: "Πληκτρολογήστε για αναζήτηση...",
disabled: "Αυτό το πεδίο είναι απενεργοποιημένο"

Currently the option classNames can be used to add classes to the tail.select wrapper div. However, there is more styling in the immediate inner div, and the individual items. Is it possible for us to customize those using classes? This would come in really handy for those who use TailwindCSS and other class-based CSS frameworks.

Thanks for your help! :)

All

• Toate

None

• Nimic

Select All

• Selectează tot

Unselect All

• Deselectează tot

No Options available

• Nu există opțiuni disponibile

No Options found

• Nu s-au găsit opțiuni

You can't select more Options

• Nu puteți selecta mai multe opțiuni

Select an Option...

• Selecteaza o opțiune

Select up to :limit Options...

• Selectați până la :limit opțiuni

Type in to search...

• Tastați pentru a căuta

This Field is disabled

• Acest câmp este dezactivat

Hi, it isn't possible to deselect options by the keyboard (keydown - enter). Here's my patch.

if(key == 13){ if((opt = self.dropdown.querySelector(".dropdown-option.hover:not(.disabled)"))){ // CUSTOM if(opt.classList.contains("selected")) { self.options.unselect.call(self.options, opt); } else { self.options.select.call(self.options, opt); } } }

Hello, thank you very much for your great collaboration.

I am trying to use tail.select in vue js, specifically in a modal, the problem is that when I go from one route to another the tail.select is still stuck to my modal, I have not been able to solve it, do you have any idea that I have wrong?

this is what my modal looks like if i pass from one component to another

TailSelect.vue

<template>
   <select class="w-full tail-select" ref="tailRefSelect" :multiple="multiple"
        @change="updateValue" v-model="selected">
        <slot></slot>
   </select>
</template>

<script>
import TailSelect from "tail.select.js";

export default {
    props:{
        options:{
            type:Object,
            default(){
                return {};
            },
            required:false
        },
        search:{
            required:false,
            default:false,
            type:Boolean
        },
        placeholder:{
            required:false,
            default:false
        },
        multiple:{
            required:false
        },
        value:{
            type: [String, Number, Array],
            default: null,
        }
    },

    model:{
        event:'change'
    },

    data(){
        return {
            selected: this.value
        }
    },

    mounted(){
        let el = this.$refs.tailRefSelect;
        if(this.options.locale === undefined){
            this.options.locale = 'es'
        }
        if(this.options.height === undefined){
            this.options.height = 270
        }
        if(this.search !== undefined){
            this.options.search = this.search;
        }
        this.options.classNames = el.classList.value; // w-full
        if(this.placeholder){
            this.options.placeholder = this.placeholder
        }
        if(this.multiple !== undefined){
            this.options.descriptions = true;
            this.options.hideSelected = true;
            this.options.hideDisabled = true;
            this.options.multiLimit = 15;
            this.options.multiShowCount = false;
            this.options.multiContainer = true;
        }
        // this.$tailSelect(el, this.options).reload(true);
        TailSelect(el, this.options);
    },

    updated(){
        // this.$tailSelect(this.$refs.tailselectsimple,this.options).reload(true)
        this.selected = this.value
        TailSelect(this.$refs.tailRefSelect, this.options).reload()

    },


    methods:{
        updateValue() {
            // Emitting a `change` event with the new
            // value of the `<select>` field, updates
            // all values bound with `v-model`.
            this.$emit('change', this.selected);
        },
    },
};
</script>

MyComponent.Vue

<TailSelect
        v-model="form.product_types"
        ref="tail_select"
        :options="{
        search: true,
        descriptions: true,
        hideSelected: true,
        hideDisabled: true,
        multiLimit: 15,
        multiShowCount: false,
        multiContainer: true,
        classNames: 'w-full'
    }"
        multiple
    >
        <option v-for="pt in product_types" :value="pt.code">{{ pt.name }}</option>
</TailSelect>

DevTools failed to load SourceMap: Could not load content for http://localhost:8080/css/tail.select-default.map: HTTP error: status code 404, net::ERR_HTTP_RESPONSE_CODE_FAILURE