[Bug Report][3.6.12] v-textarea and v-text-field icon/button alignment issue

[mschoeffmann]

Environment

Vuetify Version: 3.6.12
Last working version: 3.6.11
Vue Version: 3.4.31
Browsers: Safari 17.5
OS: Mac OS 10.15.7

Steps to reproduce

Switch from v3.6.11 to v3.6.12 in the Playground to see the alignement issue.

The provided workaround in #20154 does have some unwanted side effects:

• It makes the ripple/pressed background too small
• It does not work with "text" buttons

The center-affix also has unwanted side effects:

• It makes the field single-line which does remove the label

Expected Behavior

Everything should be aligned as in 3.6.11.
If center-affix would not remove the label, this would be a workaround.

Actual Behavior

• Layout is broken
• Text-Buttons are aligned to top
• Ripple/pressed background too small
• CenterAffix removes the label

Reproduction Link

https://play.vuetifyjs.com/#...
(v-btn style just for better visualisation of ripple/hover background)

Other comments

Could be related to #20064, #20134 and #20154.

[yuwu9145]

• VTextarea has to display affixes aligned to top with input when using multiple rows, so textarea's affixes cannot be expected to be able to occupy whole row the same as VTextfield does
• For VTextfield, it always has only one row, you can usecenter-affix to get buttons occupies the whole field

https://play.vuetifyjs.com/#eNrtlm1P2zAQx7/KqXvBJi2tgGnSWEEqECBaaac+MbTuhZtcGgsnjmwno0N8913SQpMu7Vq0veNNlNzZ9+D7/xR/f6hp5TZacVxPE6wd1ZoGw1gwgyfjCKCZWiyO89f8w5WRYTxCtTCR0eMpuIJpfTyuxcb6MK49+wCGGsEECKMEDfdnkKLSXEagUaBrpAIjwQ3QvctXedz3UWHkooZ6vd6cKGgUgn0VyCgeE1pCyCMv3xNIitlwBXfv0ANtqHJgmlxcgw7kT3rKEGHC3LupkknkLeO5UkhVf26kQZ2sbwviiXVY6u2m2/vS6nWHnXM4657bcNq2uzdw4wyuYDS0B87FLYzsXt/pduCw/rG+fwD9gdNuw1WrD5dtZ3B2ZffXJE8tD32WCKOtWMmUe4UDz90G743lcxSFdgBSK5QeCqqYR3FixrWi80jRYZBrf8Ucsntr4fpUdpEMXAykoOzkvJWJgmvUmk2RhlNeKtgkz+tkeSGgIZb9KVOcRYZWyMQIEpBX9nsYaW5m5Hdl6Etl2ESshMinlQ1D8ZCpWdnJEiNpZyzQYJbE91c2Y2RQWcz3+X3RHklLoea/sGgM6LxpACR0oZf2wgBoBE+UwJtYYYyRZ/GoiMXzpCYmKnSfzW1cA04c0VfoccsVUlOnJaFneihguCYxgblj3pMBatNs5M7dK9WUbXOhS2NRoUtZk7lK1zsw1+05l06n1S4RRxz2N3C3vxayKoo2MFRJ0Fp+tqZnMzubyfkrNxuo2cxMBRnVEFXRUtTCNqS8kJM1lGzDyK6EvIyPCjr+YOM/q/8AWtkPyu4M7F7r4sL5tgx3OhxAz77ujuw+tFundvsVlH8DSvUPpAqfV1C2B+XJWL6DZpb5FXWlyaZ2FY8NXTVNMr/B8jCmwcMDKPThEXwlQ9ijW+/e/EworjaQixmOszVv97ImrVxue++yBPOQi/BmJubV1uctP8xLXN40qVLS1BEIPg3MVLHZ52zFYx5osbn2+D5KhMgfP34DKqJvAw==

[mschoeffmann]

@yuwu9145 Thank you for checking on that. I tested center-affix already but it forces the "single-line" prop (which removes the label).

So, does this mean: Having a centred icon-button inside an append-inner slot and showing the label is not possible any more? Or do you have a hint how to archive this?

Or should I open an issue regarding center-affix not to force single-line (or at least not removing the label).

(example use case: a bunch of v-text-field, readonly, displaying a value and the corresponding label, the slot contains a component with a "copy to clipboard" button)

[yuwu9145]

@mschoeffmann I had the same pain. bc2f96a has been made on master branch.

So center-affix will only set single-line when it's default null, but showing labels can be enforced by explicitly set single-line to a Boolean false

[mschoeffmann]

@yuwu9145 I had the same pain. bc2f96a has been made on master branch.

Great - Thank you very much! I'll check this out with the next release.

[yuwu9145]

@mschoeffmann We are going to revert this breaking change #20173, but all changes that were talked about in this thread will be available on dev branch and in a future release