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

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)

Start with the dcc.Input implementation and its number-type behavior, then review how formatting and increment/decrement controls are handled. The issue is done when a currency-formatted input preserves a numeric value and retains the arrows, with the behavior covered by the relevant input tests.