Component: NumberInput

[gsal]

prop:

input_mode
What's the difference between 'numeric' and 'decimal' ?
I don't readily notice one.

prop:

is_valid_character

• if the default valid characters are those that allow entering a floating point number, including scientific notation; and,
• if the widget does not even return a number and, instead, returns a string

Why does it insist in reformatting what I type?

There is value in typing a number in scientific notation, for example 1.23e-07, and I really don't want the widget to edit what I type and turn it into 0.000000123 ....now, I really need to squint and count how many zeroes I've got!

Let alone if I need to enter Boltzmann constant or Planck's constant ....then, with so many zeros on the left, I truly loose sight of the numbers.

If the widget needs to do some validation and make sure that the contents is a number or not, that's fine, but it shouldn't come back and change what I typed.

keyboard keys

"home" and "end" do not work for me; not only do they not work, they actually entirely replace the contents of the input field.

[gsal]

By the way, I kind of hate to bring this up, but....

I learned about Pynecone a few days after learning about Streamlit; and, in as much as Streamlit is super popular and mature, there was that thing about performance, and running the script from the beginning over and over, etc, that made me like Pynecone better and go with it even though I had found the project only a few days old!

Anyway, are you guys looking at Streamlit? For example, regarding precisely this number_input component...the one in Streamlit is very nice:
it can handle int or float
returns int or float (not a string)
if even has a way to indicate how one wants the number to be formatted

...I could really use these 3 features with Pynecone NumberInput.

[Alek99]

Thanks for the input I totally agree these components can be improved, will work on it in the next release

[gsal]

One more into the mix

I am going to have tens of input variables in a column, one or two may take on integral numbers, the rest are for material properties, dimensions in the thousands of mm, pressures, temperatures, etc., etc., all floating point numbers, really, and, so, the NumberInput increment and decrement functionality does not make sense; to that end, I would like to not even show them...

...is there a way to turn off the up-triangle, down-triangle stepper in the NumberInput widget?

When I have too many of them line up, they visually crowd the screen and they don't even make sense for floating point numbers with decimals.

Thanks

[Alek99]

Yes there is a way and I need to add an example in the docs in your app if you provide a child such as a pc.number_input_field() to the number input it will manually create the components. By default we auto add the stepper so if you don't have any children it will by default compile to the equivalent code.

pc.number_input(
   pc.number_input_field(),
   pc.number_input_stepper(
      pc.number_increment_stepper(),
      pc.number_decrement_stepper(),
   )
)

But if you do add a number_input_field as one of the number inputs children it will not add the stepper.

def air_number_input(vstr):
    return pc.hstack(
                pc.text(vstr, font_size="0.8em", width="12em"),
                pc.number_input(pc.number_input_field(),
                                on_change=lambda f: State.input_Air(f,vstr),
                                input_mode="decimal",
                                variant="outline",
                                font_size="0.8em"),
                pc.text(State.uAir[vstr], font_size="0.8em", width="12em"),
            )

We do this as a short hand so you don't have to manually add the stepper each time, and I forgot to add this to the docs. Will add this this weekend, thanks for pointing this out.

[gsal]

Ah, ok; yes, this works.

I guess that is already implemented, then....'cause I was going to suggest an alternate idea...

Following the "props" approach, it seems the thing to do would be to add another property, like stepper, that may default to True; but, that I can include stepper=False ....or just no_stepper ?

Also,

Should the NumberInput widget learned to handle and differentiate between floats and integers, maybe a stepper could be added by default to the integer case, but not to the float case.

Anyway, this works.

Thanks.

[Alek99]

keyboard keys
On your point with the keyboard keys I need to look into this but @picklelo was adding some special logic for the enter key maybe it is causing this. Ill find this out.

decimal vs numeric
Ill make the docs more clear here but

• decimal
  Fractional numeric input keyboard containing the digits and decimal separator for the user's locale (typically . or ,). Devices may or may not show a minus key (-).

• numeric
  Numeric input keyboard, but only requires the digits 0–9. Devices may or may not show a minus key.

scientific notation
I agree ideally this shouldn't reformat what the user types. We can fix this.

These are really good points overall thanks for testing out the framework and giving us feedback. Apologies for some of the bugs you have faced we still are pretty new so trying to fix as they come up. Feedback like this is really appreciated because some of these can be hard to find on our own.