[v1] QInput hide spacing for error-message before display

[codegrue]

Current behavior is if you have a validation rule, spacing below QInput is reserved for the message. If you have a list of QInputs, this creates inconsistent vertical spacing between then (the ones with rules and the ones without.)

Request: optionally be able to hide this whitespace until the error is displayed.

Suggestion: If this cannot be default behavior, please add a property to turn the default behavior off. Maybe "ReserveSpaceForErrorMessage" or something like that.

[metalsadman]

+1 because of this line in QField that check if it has bottom slot hasBottom () { return this.bottomSlots === true || this.hint !== void 0 || this.rules !== void 0 || this.counter === true }, always returns true if rules props is set, although you can control this with external validation like vuelidate checking for error on bottom-slots of the qinput props. the thing though if bottom slots is false, the animation doesn't work when error message is shown, so it'll just pop up and adjusts instantly when there's an external validation error.

maybe if the check on the this.rules part includes the validate function something like (this.rules !== void 0 && this.validate(this.value)) could work.

[rstoenescu]

feat(QInput/QSelect/QField): new prop (hide-bottom-space: Boolean) #3880
Description: "Does not reserves space for hint/error/counter anymore
when these are not used; as a result, it also disables the animation for those"

Will be available in beta.19

[codegrue]

Works as described. Thank you! Just a minor nuance, if hint is null it still reserves space. Use case: a containing control with a prop for hint that defaults to null, the spacing is present even if nothing is provided in the prop.

<q-input :hint="hint" hide-bottom-space></q-input>


props: {
    hint: { type: String, default: null }
}

[rstoenescu]

Use void 0 or undefined instead of null.