Save input text in Input field inside Dash Editable Datatable without pressing 'Enter' key?

[AnSohal]

Hi All, On entering a value in an input field inside an editable datatable, the user must press 'Enter' key to save it. Instead, if the user simply clicks outside of this cell, the value provided is not saved and the previous state is visible.

Is there a way by which we can save the input provided when focus moves out without pressing 'enter'?

[alexcjohnson]

@AnSohal can you give an example of code showing this problem, and also state the version of dash you're using? If I try this on https://dash.plotly.com/datatable/editable it works, the new value is accepted when I click to a new cell.

[t-mtzw]

@alexcjohnson I tried the suggested site(https://dash.plotly.com/datatable/editable) to see if this problem occurs.

The following steps caused this problem.

1. "Double" click on the cell.
2. Enter a value.
3. Click on another cell.

https://user-images.githubusercontent.com/71798780/171529153-8efef3a6-92d0-4f3d-b325-667efdfc073f.mp4

This problem did not occur until dash-table==4.9.0.

https://user-images.githubusercontent.com/71798780/171530326-efce15df-af7c-40cc-9324-4d0196a85d5e.mp4

https://user-images.githubusercontent.com/71798780/171530344-92d71323-3c02-4414-9474-6295c78b06cb.mp4

The code used is the same.

# -*- coding: utf-8 -*-
import dash
import dash_table
import dash_html_components as html

app = dash.Dash(__name__)

app.layout = html.Div([
    html.P(f'dash-table == {dash_table.__version__}'),
    dash_table.DataTable(
        id='table',
        columns=(
            [{'id': p, 'name': p} for p in ['Column']]
        ),
        data=[
            dict(Model=i, **{param: 0 for param in ['Column']})
            for i in range(1, 3)
        ],
        style_header={
            "backgroundColor": "black",
            "color": "white",
        },
        style_table={
            'width':'10%',
        },
        editable=True
    )
])

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

Libraries used.

dash-table==4.9.0

Brotli==1.0.9
click==8.1.3
dash==1.14.0
dash-core-components==1.10.2
dash-html-components==1.0.3
dash-renderer==1.6.0
dash-table==4.9.0
Flask==2.1.2
Flask-Compress==1.12
future==0.18.2
importlib-metadata==4.11.4
itsdangerous==2.1.2
Jinja2==3.1.2
MarkupSafe==2.1.1
plotly==5.8.0
PyYAML==6.0
tenacity==8.0.1
Werkzeug==2.0.0
zipp==3.8.0

dash-table==4.10.0

Brotli==1.0.9
click==8.1.3
dash==1.15.0
dash-core-components==1.11.0
dash-html-components==1.1.0
dash-renderer==1.7.0
dash-table==4.10.0
Flask==2.1.2
Flask-Compress==1.12
future==0.18.2
importlib-metadata==4.11.4
itsdangerous==2.1.2
Jinja2==3.1.2
MarkupSafe==2.1.1
plotly==5.8.0
PyYAML==6.0
tenacity==8.0.1
Werkzeug==2.0.0
zipp==3.8.0

[alexcjohnson]

Thanks @AnSohal - it was the double click I was missing, it works fine with a single click but I see the behavior you're referring to when I double-click. This is indeed a bug, we should be able to fix it.