Box text field focuses only when clicked on input

Steps to reproduce

Create <v-text-field box> as in codepen, try to focus the input by clicking the field outside the blue area

Versions

0.15.7

What is expected ?

Clicking the box field in any place (with pointer cursor) should focus the input

What is actually happening ?

Input focuses only when the blue area is clicked (although the hover area is bigger)

Reproduction Link

https://codepen.io/anon/pen/aLZJVP

[nkovacs]

Textareas can be fixed using this css:

.input-group--text-field.input-group--textarea:not(.input-group--full-width) .input-group__input {
    padding: 0;
    textarea {
        padding: 30px 0 0 13px;
    }
}

The other inputs can also be fixed in a similar way, extending their click area to the label’s (transformed) position, e.g.:

.input-group--text-field:not(.input-group--select):not(.input-group--single-line):not(.input-group--text-field-box):not(.input-group--textarea) {
    padding-top: 0; // original is 18px

    input {
        height: 48px;
        padding-top: 18px;
    }

    textarea {
        padding-top: 18px;
    }

    .input-group--text-field.input-group--multi-line textarea {
        padding-top: 22px;
    }
}

Edit: unfortunately, this doesn’t look good when scrolling, because most browsers (excluding Firefox) will let the scrolled text enter the padding. Firefox clips it, so it looks good there.

Or with something like this: https://github.com/nkovacs/vuetify/commit/9d0c164a3718521b43fb8dffd32fe8981934eff1

[johnleider]

We could probably go back and forth, I suggest coming to the community: https://community.vuetifyjs.com and continue the conversation there.