vue-select with tailwind css class for longer text the search input field goes to next line.

[Aravinda93]

I am using the vue-select with vee-validate within my Nuxt 3 application but the problem is that when the selected option text is too large then the <input> goes to the next line due to which the overall field height increases which I want to avoid. For the selected text if the option text is not large then everything works fine. This is happenning only for large text only.

Following is the code I have:

<template>
  <div class="flex flex-col items-center max-w-md">
    <Field :name="name" v-model="fieldItem">
      <vSelect
        ref="selectDropdownRef"
        v-model="item"
        :options="options"
        :selectable="(option) => !option.disabled"
        :getOptionLabel="
          (option, concatValue) =>
            concatValue
              ? option.text.toLowerCase() === option.value.toLowerCase()
                ? option.text
                : `${option.text} ${option.value ? `(${option.value})` : ''}`
              : option.text
        "
        class="w-full bg-gray-50 dark:bg-gray-700 rounded p-1"
        :class="`${isDarkMode === 'dark' ? 'dark' : ''}`"
        appendToBody
      >
        <template #search="{ attributes, events }">
          <input class="vs__search w-full" v-bind="attributes" v-on="events" />
        </template>
      </vSelect>
    </Field>

    <div class="text-center">
      <ErrorMessage :name="name" class="text-red-500 mt-2 italic" />
    </div>
  </div>
</template>

<script setup>
import { Icon } from "@iconify/vue";
import { Field, ErrorMessage } from "vee-validate";
import vSelect from "vue-select";
</script>

<style src="vue-select/dist/vue-select.css"></style>

<style>
.vs__dropdown-menu,
.vs__dropdown-option--disabled {
  @apply bg-white dark:bg-slate-800;
}

.vs__dropdown-option,
.vs__selected,
.vs__search,
.vs__dropdown-option--disabled {
  @apply text-primary dark:text-white;
}

.vs__dropdown-option--disabled {
  @apply font-bold text-lg;
}

.vs__clear svg {
  @apply secondary-fill;
}

.vs__open-indicator {
  @apply secondary-fill;
}
</style>

For smaller text the field appears something like this:

For large text the field appears something like this:

As we can see the field expands when there is larger text and when I checked in inspect tab of chrome I can see that the <input> is shifting to next line due to large text which I want to avoid. I want to ensure that the field does not expand.

I tried adding few Tailwind css styles:

.vs__selected {
 display: block;
 white-space: nowrap;
 text-overflow: ellipsis;
 max-width: 100%;
}

This is making the icons to go beyond: