Skip to content
This repository has been archived by the owner on Jun 4, 2024. It is now read-only.

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

Open
AnSohal opened this issue May 18, 2022 · 3 comments

Comments

@AnSohal
Copy link

AnSohal commented May 18, 2022

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
Copy link
Collaborator

@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
Copy link

t-mtzw commented Jun 2, 2022

@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.
1.mp4

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

2.mp4
3.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
Copy link
Collaborator

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.

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
None yet
Projects
None yet
Development

No branches or pull requests

3 participants