qinput says that the value it expects is wrong

  • Hi

    I have a qinput with type=number and step=0.0001. I see the following notification:

    It happens only on a user’s browser (Firefox and Iron (which is based on Firefox)). I don’t know if it’s related but his computer locale requires a comma as a decimal separator but he can’t enter a comma, just a dot and the message is confusing. Clicking up/down arrow also generates a number with a dot and it goes up/down by 0.0001 as expected. Still this message appears.

    I’m most certain this is not quasar specific problem, but because of the confusing message, I don’t know where to start looking.

    Any hint will help here. Thanks

  • First of all, thanks a lot.

    1. I can’t check it on my computer because it works even as it is now, so I will have to “release” it and tell that user to check it.
    2. The comma and dot are less of a problem, the more intriguing part is the notification he gets about the same value the component expects, how can I know where to look for the reason for this “confusion” of the component?

  • I wonder if your component will have the same issue on his browser because it’s “just” a wrapper so his browser will behave the same.

    This is my code

    <q-input rounded outlined v-model.number="newTransactionTotal" @keyup="totalChange" @change="totalChange" type="number" step="0.0001" label="Total" prefix="$" :rules="[ val => val && val > 0 || 'Total is missing']"/>

  • Thanks, I will give it a try.
    Though not taking a comma is fine as long as it will be able to “swallow” dots. The confusing message is the real question here (for the browser)…

  • Thanks, the discussion is old (2011-2014) and is only similar, not the same problem as mine. Notice that the browser doesn’t tell the user that 642.32 (dot) is wrong and it should be 642,32 (comma), it gives him the same exact number with the same exact separator.

    There is a conversation about the differences between Chrome and Firefox and generally it seems that type=number is handled differently between browsers. I already encountered such difference not long time ago but now it really affects the user. The only way for me to check it is to “release” the code and let that user check it over and over again…

    I guess that for now, using type=text is the lesser evil, until this is sorted out.

  • @metalsadman is there a reason why you removed the link to you base base-currency-input project?
    I need to know how to register the component in order to try it

Log in to reply