fix(VField): Applied text-align to input element

[prashantsinghb]

fixes #17856

Description

Applied fieldClass to input element

Markup:

<template>
  <v-app>
    <v-container>
      <v-locale-provider rtl>
        <v-text-field v-model="msg" label="test" />
        <v-text-field v-model="msg" reverse label="test" />
        <v-textarea v-model="msg" label="test" />
        <v-textarea v-model="msg" reverse label="test" />
        <v-select
          label="Select"
          v-model="msg"
          :items="['California', 'Colorado', 'Florida', 'Georgia', 'Texas', 'Wyoming']"
        ></v-select>
        <v-select
          label="Select"
          v-model="msg"
          :items="['California', 'Colorado', 'Florida', 'Georgia', 'Texas', 'Wyoming']"
          reverse
        ></v-select>
      </v-locale-provider>
      <v-locale-provider ltr>
        <v-text-field v-model="msg" label="test" />
        <v-text-field v-model="msg" reverse label="test" />
        <v-textarea v-model="msg" label="test" />
        <v-textarea v-model="msg" reverse label="test" />
        <v-select
          v-model="msg"
          label="Select"
          :items="['California', 'Colorado', 'Florida', 'Georgia', 'Texas', 'Wyoming']"
        ></v-select>
        <v-select
          v-model="msg"
          label="Select"
          :items="['California', 'Colorado', 'Florida', 'Georgia', 'Texas', 'Wyoming']"
          reverse
        ></v-select>
      </v-locale-provider>
    </v-container>
  </v-app>
</template>

<script setup>
  import { ref } from 'vue'

  const msg = ref('California')
</script>

[johnleider]

This causes visual issues

[prashantsinghb]

@johnleider - Have removed the fieldClass from input element, and applied text align property via VField sass instead based on your feedback.
Please review.

[yuwu9145]

In v2 & v3 RTL support,

• labels are right aligned as well: demo
• Selections in select components are right aligned: demo

[prashantsinghb]

@yuwu9145 - Have updated the fix as per you observation.
Please review.

[johnleider]

This passed tests locally:

[yuwu9145]

But inner icon should be left aligned: v3 RTL

Probably it should be handled in an new issue

[prashantsinghb]

@yuwu9145 - Could I look into the issueBut inner icon should be left aligned:v3 RTL.
Or you will handle this in #17960 ?

[yuwu9145]

Could I look into the issueBut inner icon should be left aligned:v3 RTL.

@prashantsinghb feel free to give it a crack.

#17960 is just an irrelevant improvement