Problems creating an input that allows positive and negative decimal values

[ronniebax]

Question

I'm working on a tool that has some inputs to register decimal values. The input should accept both positive and negative values. To ensure the right format is entered a mask is used. Unfortunately, there are no masks available that meet the requirements.

My idea was to still use the mask #,## and use a keydown event to determine if a positive or negative value is entered. When the user presses the "-" (minus or dash) key, a prefix is added to the input to show the user that negative values are accepted now. After pressing the "+" key the input should register positive values again. Unfortunately I can't get the keydown event working for the "-" key. The "+" key works fine.

Some examples of what I tried: (only the "+" key example works(

from nicegui import ui

ui.input("Press '-' key").on('keydown.Minus', lambda: ui.notification(message='You pressed the - key', timeout=1)).props('outlined filled mask="#,##" fill-mask="0,00" reverse-fill-mask input-class="text-right"')
ui.input("Press '-' key").on('keydown.-', lambda: ui.notification(message='You pressed the - key', timeout=1)).props('outlined filled mask="#,##" fill-mask="0,00" reverse-fill-mask input-class="text-right"')
ui.input("Press '-' key").on('keydown.NumpadSubtract', lambda: ui.notification(message='You pressed the - key', timeout=1)).props('outlined filled mask="#,##" fill-mask="0,00" reverse-fill-mask input-class="text-right"')
ui.input("Press '+' key").on('keydown.+', lambda: ui.notification(message='You pressed the + key', timeout=1)).props('outlined filled mask="#,##" fill-mask="0,00" reverse-fill-mask input-class="text-right"')

ui.run()

The second thing I've tried was adding a button slot to the ui.input but then I'm not able to use the click event to run a Python function

ui.input(label='Overtime balance (hours)', on_change=calculate).classes('w-64').props('outlined filled mask="#,##" fill-mask="0,00" reverse-fill-mask input-class="text-right"').add_slot('append',"""
        <q-btn @click="set_negative" :ripple="false" round dense flat icon="exposure"></q-btn>""")

Does someone have an idea how to realize this?

[falkoschindler]

Thanks for reporting this problem, @ronniebax! I created issue #4210 to further investigate the minus key event subscription.

As a workaround you can subscribe to any "keydown" event and handle the individual key codes in Python:

def handle_key(event: events.GenericEventArguments) -> None:
    if event.args['key'] == '+':
        ui.notify('You pressed the + key')
    if event.args['key'] == '-':
        ui.notify('You pressed the - key')

ui.input().on('keydown', handle_key)

But I'll leave this discussion open in case someone from the community has a better idea how to created masked inputs for signed numbers. (Did you think about using ui.number?)

[ronniebax]

Thanks @falkoschindler for your quick and helpful reply! Your first solution will definitely solve my problem.

I wasn't aware of ui.number but that component should also solve the issue.