vuetifyjs / vuetify

🐉 Vue Component Framework
https://vuetifyjs.com
MIT License
39.89k stars 6.97k forks source link

[Feature Request] VTextField ability to disable size="1" #19818

Open jakeflorentine opened 6 months ago

jakeflorentine commented 6 months ago

Problem to solve

The current application of size="1" to the VTextField does not allow for the VTextField to auto-grow inside of a v-col with the auto prop on it. This is different behavior from Vue2. It would be nice to have the ability to have the previous functionality optionally.

Proposed solution

add an "autoGrow" prop to VTextField which optionally sets size to null instead of 1

jakeflorentine commented 6 months ago

image

jakeflorentine commented 6 months ago

https://play.vuetifyjs.com/#eNqtUz1PwzAQ/SuHl4BEyF6lSFUZmFgYGAiDSS4l0sW27HNBVP3vnB2+hBBQkcGW78Pv3T2fb3cq+LZaOXe2jagWqmYcHWnG88YA1NtSO5eP2fD2ETo0YYq+OltLICssG6Uj20a9B3OY8YnLfkDqgPQ9kqRdYK8jMZSwkguwttQoqD4wqwz6heMA1Cubgf8AemDhb+XC9fCMsH7QZoOd0CyC2BI3kX5qJVki4f/0TL7WyiMh45yK/oI7j6bfksyoajpPE1tXnyZZzND6wTEE5DgN9DA66xl24LGHPfTejlDIJyhSOkgTJjCMYQPLlHFcXCKRhRvrqTsqThLBBClgan+aaszb3QuvgwTM

yuwu9145 commented 6 months ago

v2 demo: https://codepen.io/yuchaosydney/pen/XWwmNzm?editors=101

https://github.com/vuetifyjs/vuetify/blob/33636128a3360a27b5e6cc533d92c3fac60b2aa1/packages/vuetify/src/components/VTextField/VTextField.tsx#L225

yuwu9145 commented 6 months ago

Although we could look into the possibility of removing default size={ 1 }, the best practice of using v-col is really explicitly define columns as opposed to allowing every column to auto-grow. The latter results in very fragile layout outcome which would be impacted by many other factors.

jakeflorentine commented 6 months ago

The goal here would not be to remove size=1, rather, to provide a prop to VTextField allowing the size to be nullified. This keeps default behavior, yet provides ease in migration from Vue 2.