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

Question

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:

Answer 1

The extra space is due to the text wrapping as well as the input search element:

We can stop text wrapping to a new line by applying white-space: nowrap:

.vs__selected {
  white-space: nowrap;
}

To stop the input wrapping, we can remove the flex layout from wrapping:

.vs__selected-options[class] {
  flex-wrap: nowrap;
}

Vue.createApp({
  components: {
    'v-select': window['vue-select']
  },
  data() {
    return {
      item: 
        {
          text: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit',
          value: 'foo',
        },
      options: [
        {
          text: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit',
          value: 'foo',
        },
        {
          text: 'Bar',
          value: 'bar',
        },
      ],
    };
  },
}).mount('#app');

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/3.4.5/vue.global.prod.min.js" integrity="sha512-Reu6khHF2i9w9xRYM9FIpN5gnIN2NEomjN7lpCyfBtUWlOhZB78JJV3p685GNznhFov3urM2JxiDH14gwkaDMA==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/vue-select/4.0.0-beta.6/vue-select.min.css" integrity="sha512-u7sirbGarTU/dvVlIjUCOy3zmAj5BnrH+QdJSvHZlQgfJTlgDGUdzUgqpqsU5SK2wzFYq21OR4euSyyNsXNybw==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue-select/4.0.0-beta.6/vue-select.umd.js" integrity="sha512-pNr2dkpayXh1yJu30xtmo65dUTf5dKxfl89QnuCi1ndVrVU8O14yNlyey5C9/AcWavrwkMMHGnugYH+8w6VAoA==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="https://cdn.tailwindcss.com/3.4.0"></script>
<script>
tailwind.config = {
  theme: {
    extend: {
      colors: {
        primary: 'red',
      },
    },
  },
};
</script>

<div id="app">
  <div class="flex flex-col items-center max-w-md">
    <Field :name="name" v-model="fieldItem">
      <v-select
        ref="selectDropdownRef"
        v-model="item"
        :options="options"
        :selectable="(option) => !option.disabled"
        :get-option-label="
          (option, concatValue) =>
            concatValue
              ? option.text.toLowerCase() === option.value.toLowerCase()
                ? option.text
                : `${option.text} ${option.value ? `(${option.value})` : ''}`
              : option.text
        "
        class="w-fullbg-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>
      </v-select>
    </Field>

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

<style type="text/tailwindcss">
.secondary-fill {}

.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;
}

.vs__selected {
  white-space: nowrap;
}

.vs__selected-options[class] {
  flex-wrap: nowrap;
}
</style>