Make nutrition input numeric

[MauroMombelli]

Summary:

Make the input box for nutritional fact numeric

Steps to reproduce:

if you try to add the nutritional fact, the full keyboard appears instead of the numeric

[huzaifaiftikhar]

We can't have a numeric input type for nutritional fact because we need to type the following characters as well "<", ">"and "~". It is not possible to type these on a numeric input type.

[MauroMombelli]

Sorry for the late answer.
While i agree those information may be important to collect, I also know those symbols are little and well known.
IMHO a better approach would be to keep the field numeric and instead add those symbols to the drop box (or add another drop box) as this would make the parsing of the field much easier (also in a database query, looking for specific values would be much better.)

[huzaifaiftikhar]

@MauroMombelli Your suggestion looks good to me! I am reopening this issue.

[vanshikaarora]

@MauroMombelli @huzaifaiftikhar Can I please take this Issue if you are not working on it?

[huzaifaiftikhar]

@vanshikaarora go ahead :)

[vanshikaarora]

Thanks @huzaifaiftikhar for assigning the work to me:)

Well before working upon I would mention all the changes that I'll be making. As I see in nutrition fact only Serving size has a numeric keyboard while all other fields have full keyboard. So I need to change input type for all of them as numeric. Well, if there anything else you would like to add then please inform here:)

[vanshikaarora]

Hey @huzaifaiftikhar I have raised a PR here #2650 Can you please review :)

[huzaifaiftikhar]

@vanshikaarora I have gone through the PR, I guess you didn't get the issue exactly. Anyway, I'll try to explain to my best.
Currently, we have a full keyboard for all the nutrition facts fields (except serving size) because we need to type these characters as well "<", ">" and "~". By simply changing the input type to numeric won't fix the issue as the user won't be able to input the above characters then. To fix this I would suggest you add a spinner before the input field (similar to the one already present for units) which would contain these characters as suggested by @MauroMombelli.

[vanshikaarora]

@huzaifaiftikhar I am sorry for not understanding the exact issue before. And thanks for explaining it as well:) .

To fix this I would suggest you add a spinner before the input field (similar to the one already present for units) which would contain these characters as suggested by @MauroMombelli.

While fixing this, I felt that this is disturbing the UI and adding two spinners for each field makes it a big congested. So, how about adding a single spinner just next to the radio boxes. Whenever the user taps on edit text numeric keyboard pops up and the spinner,next to radio boxes for these characters becomes visible?

[huzaifaiftikhar]

@vanshikaarora I guess the spinner beside the radio boxes won't be visible when we are inputting the last nutrient for a long list of nutrients. Can you post screenshots for both the approaches?

[vanshikaarora]

Hey @huzaifaiftikhar here are the screenshots for both the states

The position of the spinner in this could be either right or left

The position and appearence of this single spinner can even be modified further

[huzaifaiftikhar]

@teolemon @deniger @brandenfung @Karljoones Can you take a look at this? Which UI seems appropriate?

[MauroMombelli]

My 5 cent: I see you ask for "NUMERIC", in my opinion the possible sign would have to be hardcoded (><~ and no simbol). A second phase of this PR would could be to update the DB field structure to break the filed into 2 field, numeric and symbols(char? Enum?). I like the one spinner for field, but maybe placing them both on the right? [....number...][simbol][unit]

…

On Fri, May 24, 2019, 10:46 Huzaifa Iftikhar ***@***.***> wrote: @teolemon <https://github.com/teolemon> @deniger <https://github.com/deniger> @brandenfung <https://github.com/brandenfung> @Karljoones <https://github.com/Karljoones> Can you take a look at this? Which UI seems appropriate? — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#2605?email_source=notifications&email_token=ABQTZUKZAQY5ES3X553N4YTPW6TNBA5CNFSM4HK4HKH2YY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGODWESG6Y#issuecomment-495526779>, or mute the thread <https://github.com/notifications/unsubscribe-auth/ABQTZUKEWED2KXDLRMJG2QTPW6TNBANCNFSM4HK4HKHQ> .

[vanshikaarora]

@huzaifaiftikhar Are the symbols very frequently used while filling these fields? If not, then I think that just one spinner for all could a better option(position of this can be decided according to convenience).

Rest I leave it upon the opinion of other community members, to decide. And I'll modify accordingly:)

[huzaifaiftikhar]

I'm pretty sure that these symbols are not used often. Keeping a single spinner can work provided that it doesn't create any confusion for the user.
I'm waiting for others to take a look at this.

[vanshikaarora]

I'm pretty sure that these symbols are not used often. Keeping a single spinner can work provided that it doesn't create any confusion for the user.

@teolemon @deniger @brandenfung @Karljoones Can you please pitch in your suggestions too? I'll add single spinner at the appropriate position, if you agree with it.

[deniger]

IMHO, i'll try to do something like that but I will let @teolemon gives his feedback :)

• a spinner for each line as this info can change

If it's the chosen solution, the code should be organized to avoid duplicated block ....

[tur-ium]

Any updates with regard to this issue? It would significantly speed up data entry to have a numeric input. I created a fork to change the input type before finding this thread. I'd personally go for a gross between @deniger and @vanshikaarora 's solutions. Have a light grey dropdown (as @vanshikaarora) and add symbols (as @deniger).

[teolemon]

@deniger your solution seems reasonable. This bug passed under my radar.