JS SyntaxError: not a valid selector, when using Pattern-Matching Callbacks with bootstrap

I want to sync values from slider to input fields and vice versa. The number of sliders and inputs can vary, therefore i wanted to use Pattern-Matching Callbacks, but

i get an JS SyntaxError when using bootstrap with Pattern-Matching Callback, where the ids get the predefined JSON structure.
Uncaught (in promise) bootstrap-autofill-overlay.js:7651
SyntaxError: Failed to execute ‘querySelectorAll’ on ‘Document’: ‘label[for=“{“index”:0,“type”:“coefficient-input”}”]’ is not a valid selector.

bootstrap-autofill-overlay.js:7651:
return element.getRootNode().querySelectorAll(labelQuerySelectors.replace(/\n/g, ""));

Error occurs when callback is triggered, but the callback does its work just fine. I am new to bootstrap, maybe other things may fail because of this? But does this mean i can’t use Pattern-Matching callbacks with bootstrap?

@callback(
    [
        Output({"type": "coefficient-slider", "index": MATCH}, "value"),
        Output({"type": "coefficient-input", "index": MATCH}, "value")
    ],
    [
        Input({"type": "coefficient-slider", "index": MATCH}, "value"),
        Input({"type": "coefficient-input", "index": MATCH}, "value")
    ],
    prevent_initial_call=True
)
def sync_coefficient_controls(slider_value, input_value):
    """
    Synchronize coefficient slider and input values.
    Returns the triggering input's value to both outputs.
    """
    ctx = dash.callback_context
    if not ctx.triggered:
        raise PreventUpdate
        
    trigger = ctx.triggered[0]
    prop_id = trigger['prop_id']
    
    if '"type":"coefficient-slider"' in prop_id:
        return slider_value, slider_value
    return input_value, input_value
def generate_coefficient_sliders(n_freqs=DEFAULT_N_FREQS, initial_values=None):
    """Generate sliders for Fourier series coefficients."""
    return dbc.Row(
        [
            dbc.Col(
                [
                    dbc.Input(
                        type="number",
                        id={"type": "coefficient-input", "index": i},
                        value=initial_values[i],
                        min=0,
                        max=1,
                        step=0.1,
                        size="sm",
                        style={
                            "font-size": "0.8rem",
                            "maxWidth": "60px",
                        },
                    ),
                    html.Div(
                        dcc.Slider(
                            min=0,
                            max=1,
                            value=initial_values[i],
                            vertical=True,
                            marks={
                                **{i/10: str(i/10) for i in range(1,10)},
                                0: "0.0",
                                1: "1.0"
                            },
                            id={"type": "coefficient-slider", "index": i},
                            updatemode="drag",
                        ),
                        # style={"height": "200px"},
                    ),
                ],
                className="text-center",
            )
            for i in range(n_freqs)
        ],
        className="g-1",
    )

Thanks for any help :slight_smile:

Hello @palupu,

Welcome to the community!

This is just an issue with the JS that bootstrap has for this.

Why are you trying to use an autofill from them?