Skip to content

[Bug Report] Strange animation when focusing outlined v-text-field without label #12248

Closed
@Mikilll94

Description

@Mikilll94
Contributor

Environment

Vuetify Version: 2.3.10
Vue Version: 2.6.12
Browsers: Chrome 85.0.4183.102
OS: Mac OS 10.15.6

Steps to reproduce

When you have an outlined v-text-field without label, the focus animation looks strange.

Screen Recording 2020-09-18 at 22 24 59

As you can see, at the beginning the text has lean blue border. Then after a moment it transtions to thick blue border. This looks good when the text field has floating label but without floating label the focus animation looks bad.

You can easily check easily this behavior this in the docs:
https://vuetifyjs.com/en/components/text-fields/#text-fields

Expected Behavior

The focus animation for outlined field without label should look fine.

Actual Behavior

The focus animation for outlined field without label looks bad.

Reproduction Link

https://codepen.io/mikilll94/pen/bGpmgJV

Activity

added
T: bugFunctionality that does not work as intended/expected
and removed on Jul 6, 2021
self-assigned this
on Jul 6, 2021
added this to the v2.5.x milestone on Jul 6, 2021
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

Labels

C: VTextFieldT: bugFunctionality that does not work as intended/expected

Type

No type

Projects

No projects

Relationships

None yet

    Development

    No branches or pull requests

      Participants

      @KaelWD@Mikilll94@ElijahKotyluk

      Issue actions

        [Bug Report] Strange animation when focusing outlined v-text-field without label · Issue #12248 · vuetifyjs/vuetify