Integer field takes zero (0) as an empty form field

Dash Python
1

I have a form containing a outsourcing_share field, it looks something like this:

Screenshot 2023-10-04 at 11.59.15 copy

This how I have defined the form field:

...

def layout(project_data, _):
    return html.Div(
        [
            html.Div(
                [
                    html.P('Budget and development details', className='mb-0 h3'),
                    html.Small('Questions marked with * are mandatory'),
                ],
                className='mb-3',
            ),
            dbc.Row(
                [
                    dbc.Col(
                        [
                            ...,
                            html.Div(
                                [
                                    html.P(get_label('values2-6'), style=inputStyle),
                                    numeric_input(
                                        'values2-6',
                                        value=project_data.outsourcing_share,
                                        step=10,
                                        prefix='%',
                                        validationRule='percentage',
                                    ),
                                ],
                                className='mb-3',
                            ),

Under the hood, it is using react_components.NumericInput.

My problem is that, for some reason, even though it allows me to introduce 0 as a valid value, after saving the data, it considers the field to be empty if it has a value of 0.

I have defined the field like this in my project’s model and in Alembic:

    outsourcing_share = Column(Integer)  # %

        sa.Column('outsourcing_share', sa.Integer(), nullable=True),

If I type in a value of 1 for example, it doesn’t think the field is empty.

My question is, how can I make the 0 be taken as a value, not as if the form field was empty.

2

Hello @Ricardo,

Where are you seeing 0 being read as a null? Is this in a callback?

If so, you need to adjust your criteria for checking whether there is a value.

if n or n == 0:

Something like the above.

2 Likes
3

Hey @Ricardo

Did you wrap the react NumericInput component? If not where did you find it? It’s a very useful component and people have been asking for that one for a while.

2 Likes
4

Thanks for the help guys. It turns out I was pretty confused with this and the root cause for my issue had nothing to do with Dash. Apologies for the confusion.

2 Likes