Edit and save button regarding textarea

Dash Python
1

Hi,

I’m trying to make a functionality to my dcc textarea.
The functionality should be as follows:

  1. If the edit button is not pressed, the textarea is locked for input
  2. When the edit button is pressed, the textarea becomes editable and the save button appears and the edit button gets hidden.
    3 . After the user have input their comments, they press the save button and the input is saved.
  3. We are back to 1, where the edit button is visible again and the save button is hidden.

The area of my code where I need help is the following:

html.Div([
            dcc.Textarea(
                id='textarea_comments_growth',
                value='', 
                placeholder='Write comments here',
                persistence=True, persistence_type='local',
                readOnly=True,
                style={'width': '100%', 'height': 200,'display': 'block'}),
            html.Button('Save', id='save_button_growth', n_clicks=0, hidden = True),
            html.Button('Edit', id='edit_button_growth', n_clicks=0),
            html.Div(id='comments_growth', style={'whiteSpace': 'pre-line'})
    ]),
])


@app.callback(
    Output('comments_growth', 'children'),
    Input('save_button_growth', 'n_clicks'),
    Input('edit_button_growth', 'n_clicks'),
    State('textarea_comments_growth', 'value')
)




def update_output(save, edit,  comment):
    if edit > 0:
        #readability = {"readOnly":"True"} 
        comment.readOnly = False
        return comment 
        # if save > 0:
        #     return comment

Is there anyone that can help me with this?

Thanks in advance!

2

Hi @gks123 ,

I think this should work:

import dash
from dash import html, Input, Output, State, dcc, callback_context

app = dash.Dash(__name__)
app.layout = html.Div(
    [
        dcc.Textarea(
            id='textarea_comments_growth',
            value='',
            placeholder='Write comments here',
            persistence=True, persistence_type='local',
            readOnly=True,
            style={'width': '100%', 'height': 200, 'display': 'block'}),
        html.Button('Save', id='save_button_growth', n_clicks=0, hidden=True),
        html.Button('Edit', id='edit_button_growth', n_clicks=0),
        html.Div(id='comments_growth', style={'whiteSpace': 'pre-line'}),
    ]
)


@app.callback(
    [
        Output('textarea_comments_growth', 'readOnly'),
        Output('save_button_growth', 'hidden'),
        Output('edit_button_growth', 'hidden'),
        Output('comments_growth', 'children'),
    ],
    [
        Input('edit_button_growth', 'n_clicks'),
        Input('save_button_growth', 'n_clicks'),
    ],
    State('textarea_comments_growth', 'value'),
    prevent_initial_call=True
)
def update_output(edit, save, comment):
    trigger = callback_context.triggered_id
    if trigger == 'edit_button_growth':
        return False, False, True, comment
    else:
        return True, True, False, comment


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

Thank you!

The functionality works perfect besides the buttons does not disappear and reappear. Maybe I need to do something with my layout for that to happen?

4

My bad, I used some external_stylesheet that prevented the code from working properly :slight_smile:

5

I just wanted to respond, that it’s working for me. Maybe you can mark your questions as answered then.

1 Like