How do i make a text inside disabled <v-text-field> selectable (simply to copy and paste somewhere else)?

40 Views Asked by At

I have recently upgraded to Vuetify 3 from Vuetify 2. All the disabled v-text-field are not selectable by dragging the cursor. However, I noticed that v-autocomplete and v-select, even when disabled, have text selectable. Does anyone know the solution to this?

I tried testing it on regular html elements, without Vuetify. HTML input elements when disabled can select text but not vuetify disabled input fields

Edit: I tested it again and found out that when the element has v-model, the text is no selectable.

    <v-text-field 
      :label="$t('softwareEditLabelKey')"
      v-model="software.key"
      :disabled="!isNewSoftware"
    >
    </v-text-field>

But is selectable when typed the following way:

    <v-text-field 
      :label="$t('softwareEditLabelKey')"
      :disabled="!isNewSoftware"
    >
      {{software.key}}
    </v-text-field>

But when used the second way, the label is also merged as placeholder along with value.

Link to vuetify Playground: https://play.vuetifyjs.com/#eNpNjMEKwjAQRH9lyaUXa+6SFvwGvRkPNVklsE1DdhME8d9N66WXGQbevNtHcXb6nNKxFlQnZQTnRJPgaCOAqb3gW/pnQPJQ+3nxSINVgixWgQ88PQj9CEbvyfY1eidqk10OSYBRStrUbokssIpggO7a+iI5xFe3fv9049T3EAvRFvcfkSs9WQ==

0

There are 0 best solutions below