Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

q-input / q-field error attribute don't work as boolean #17662

Open
DavidHequet opened this issue Nov 25, 2024 · 4 comments
Open

q-input / q-field error attribute don't work as boolean #17662

DavidHequet opened this issue Nov 25, 2024 · 4 comments
Labels
area/components bug/1-repro-available A reproduction is available and needs to be confirmed. flavour/quasar-cli-vite kind/bug 🐞 Qv2 🔝 Quasar v2 issues

Comments

@DavidHequet
Copy link

DavidHequet commented Nov 25, 2024

What happened?

the documentation of q-input / q-field present error property as a boolean, but if the value is different of undefined or null, the error's placeholder appear (div class="q-field__bottom")
image

What did you expect to happen?

i expected that the error placeholder don't show up when :error="falsy value"

Reproduction URL

https://codepen.io/onclebob/pen/jENNxmN

How to reproduce?

Go te reproduction link and see the space under the second input

Flavour

Quasar CLI with Vite (@quasar/cli | @quasar/app-vite)

Areas

Components (quasar)

Platforms/Browsers

Chrome

Quasar info output

No response

Relevant log output

No response

Additional context

No response

@github-actions github-actions bot added area/components bug/1-repro-available A reproduction is available and needs to be confirmed. flavour/quasar-cli-vite labels Nov 25, 2024
@FangHanZreo
Copy link

FangHanZreo commented Nov 26, 2024

Please use the hide-bottom-space property to hide this space.

hide-bottom-space: Boolean

Description: Do not reserve space for hint/error/counter anymore when these are not used; As a result, it also disables the animation for those; It also allows the hint/error area to stretch vertically based on its content

@DavidHequet
Copy link
Author

DavidHequet commented Nov 26, 2024

I my usecase, i have a validator that set error and error-message, it is counter-intuitive to set hide-bottom-space too.
Especially when the doc indicate that error is a boolean (if set error to null/true instead of false/true, it work as intended).

But maybe only a revision to the documentation is needed, i spend 1 hour to find why i had this extra space visible..

@FangHanZreo
Copy link

If error is set to false, the space will not be displayed, which can lead to a lack of reserved space when the rules are not validated. Not reserving this space can cause the page height to jitter when error messages appear. Additionally, in the latest documentation, the type of the error props is Boolean | null.
image

@DavidHequet
Copy link
Author

ok i undestand it work as intended. I still think that the documentation could specify that using a boolean will reserve space for futur error message.

I wasn't aware of the behavior and i prefer page height jitter for one error instead of using lot of space on each input (i have a lot of inputs)
Thank you for your time, it's not a bug :)

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
area/components bug/1-repro-available A reproduction is available and needs to be confirmed. flavour/quasar-cli-vite kind/bug 🐞 Qv2 🔝 Quasar v2 issues
Projects
None yet
Development

No branches or pull requests

2 participants