Allow currency format for dcc.Input of type='number'

[celia-lm]

Describe the solution you'd like
Allow currency format for dcc.Input while keeping the value type as number and the arrows to increase/decrease it.

Describe alternatives you've considered
Clientside circular callback that updates the value format based on this JS solution:

import dash
from dash import Input, Output, State, callback, dcc, html, ctx

app = dash.Dash(__name__)

app.layout = html.Div([
    dcc.Input(id='input-number', value=522.31, type='number')
])

app.clientside_callback(
    """
    function(value) {
        return value.toLocaleString('us-US', { style: 'currency', currency: 'USD' });
    }
    """,
    Output('input-number', 'value'),
    Input('input-number', 'value')
)

if __name__ == '__main__':
    app.run_server(debug=True)

It raises this error in the JS Console:

react-dom@16.v2_7_0m1667919873.14.0.js:1857 The specified value "-US$1.00" cannot be parsed, or is out of range.

If type='number' is not specified, the value is accepted but the arrows to increase/decrease the value disappear.

Other option is a one-cell table with html.Buttons and a callback to increase/decrease the value (it's very complex for just a simple input)