Text input with leading zero

Dash Python
1

Hey Guys,

I am sure that this is an easy one that others have dealt with before. Basically I am wanting to have a simple search box where people can search for phone numbers - often the phone number will start with a zero or multiple zeros (sometimes the field can contain special characters). So I have set it to be type text.

This all works well however when the user inputs the phone number and clicks enter and search is performed - the text input box has the leading zeros removed.

The full phone number gets passed to the function so it works as expected, however the user often gets confused and thinks they are seeing results for a search without the leading zeros - is there a way to stop the input text box from changing when the user hits enter?

Simple example of the problem below

from dash.dependencies import Input, Output, State
import dash
import dash_html_components as html
import dash_core_components as dcc

app = dash.Dash(name)

app.layout = html.Div([
html.Div(children=[
html.Label(‘Search Text’),
dcc.Input(
id=“phone-number-search”,
style={‘display’: ‘none’},
type=“text”,
placeholder=“Enter Phone Number”,
inputMode=‘verbatim’,
debounce=False)
]),
html.Div(id=‘my-div’)

])

@app.callback(
Output(component_id=‘my-div’, component_property=‘children’),
[Input(component_id=‘phone-number-search’, component_property=‘value’)]
)
def update_output_div(input_value):
return ‘You've entered “{}”’.format(input_value)

if name == ‘main’:
app.run_server(debug=True,port=5000,threaded=True, host=‘0.0.0.0’)

2

Python str instances come with a useful string method, zfill, that should do the trick:

def update_output_div(input_value):
    return f"You’ve entered {input_value.zfill(10)}"
3

Thanks Neocontrails,

However the value in the function was not the problem - it was the value left on the screen being cleared from what what the user input.

I switched to the bootstrap input rather than the standard input - it does not remove zeros from the input text when I hit enter - so all good now.