HTML/DBC Button Disable Not Working at Startup?

Dash Python
1

Hi all,

I’ve been working on an app and wanted to initially make a button disabled upon startup, and then allow it to be enabled later through a callback. However, it appears that setting disabled=True doesn’t seem to disable the button and when I mouse over it.

I’ve provded a reprex below:

import dash
import dash_core_components as dcc
import dash_html_components as html
import dash_bootstrap_components as dbc

external_stylesheets = ['https://codepen.io/chriddyp/pen/bWLwgP.css']

app = dash.Dash(__name__, external_stylesheets=external_stylesheets)
server = app.server
app.title = "Test"
app.config.suppress_callback_exceptions = True

app.layout = html.Div([
    html.Button("Test", id="test", disabled=True)
])

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

I’ve also tried using dash bootstrap components and disabling that button upon startup, but it hasn’t worked, so perhaps it’s an issue on my end. Any help would be appreciated.

2

Hmm I realize that the initial disabled=True did not disable it during app startup. I had to hook up disable property to a signal at startup to be able to disable that.

Here’s how I solved it:

#!/usr/bin/env python

import base64, io
import dash
import dash_core_components as dcc
import dash_html_components as html
from dash.dependencies import Input, Output
from dash_table import DataTable
from dash.exceptions import PreventUpdate
from os.path import isfile, isdir, abspath, join as pjoin, dirname, splitext, basename
from os import makedirs, getenv, remove, listdir



SCRIPTDIR=dirname(abspath(__file__))


CONTAMIN=.05

external_stylesheets = ['https://codepen.io/chriddyp/pen/bWLwgP.css']
app = dash.Dash(__name__, external_stylesheets=external_stylesheets, suppress_callback_exceptions=True,
                title='Outlier detection')


app.layout=html.Div([
    html.Div([
        html.Button(id='analyze',
                    n_clicks_timestamp=0,
                    children='Analyze',
                    disabled=False,
                    title='Analyze text file to detect outliers')],
    style={'float': 'center', 'display': 'inline-block'}),

    html.Br(),
    dcc.Input(id='outDir')
])


@app.callback(Output('analyze', 'disabled'),
              Input('outDir', 'value'))
def activate_analyze(value):

    if not value:
        # disable at startup
        return True
    else:
        # enable later
        return False
    

@app.callback(Output('analyze', 'children'),
              [Input('analyze', 'n_clicks'), Input('outDir', 'value')])
def activate_analyze(button, value):

    if button:
        print(value)

    raise PreventUpdate


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