Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

when cell_selectable=False text in columns with text presentation cannot be selected in data table #1975

Open
ned2 opened this issue Mar 17, 2022 · 1 comment
Labels
bug something broken dash-data-table related to DataTable component P3 backlog

Comments

@ned2
Copy link
Contributor

ned2 commented Mar 17, 2022

Describe the bug

When a DataTable is initialised with cell_selectable=False, cells no longer have a selected visual appearance and their contents are no longer copied to the clipboard (as expected), however for columns with a presentation attribute with value text, the text is still unable to be selected with the cursor and copied with control-C. Interestingly, this does work for markdown presentation (regardless of cell_selectable value).

Here's a relevant forum community post.

Expected behavior
Text should be selectable (eg with the mouse) when appearing in DataTables initialised with cell_selectable=False and columns with presentation set to text

Environment

dash                          2.3.0
dash-bootstrap-components     1.0.3
dash-core-components          2.0.0
dash-html-components          2.0.0
dash-table                    5.0.0

- OS: Ubuntu 21.10
- Browser Chrome
- Version 99.0.4844.51
@ned2
Copy link
Contributor Author

ned2 commented Mar 17, 2022

Did a little bit of digging in the browser dev tools, and it seems like removing the unfocused class from the div immediately wrapping the cell value fixes it. This is because of the following CSS selector that comes from Table.less:

.dash-table-container .dash-spreadsheet-container 
.dash-spreadsheet-inner td .dash-cell-value.unfocused::selection {
    background-color: transparent;
}

So it's not actually that the text isn't selectable, it's that the selection color is being set to being transparent.

Minimal Example
Text in all columns is unselectable, except for the Product column, which has had presentation set to markdown.

import dash
import pandas as pd
from dash import html
from dash.dash_table import DataTable

url = "https://github.com/plotly/datasets/raw/master/26k-consumer-complaints.csv"
df = pd.read_csv(url, nrows=100)
columns = [{"name": col, "id": col, "selectable": True} for col in df.columns]
columns[2]["presentation"] = "markdown"

app = dash.Dash(__name__)
app.layout = html.Div(
    [
        DataTable(
            columns=columns,
            data=df.to_dict("records"),
            cell_selectable=False,
        )
    ]
)

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

If it's simply a matter of not having the unfocused class generated for cell values when cell_selectable is false, then I could try to put a PR together.

@T4rk1n T4rk1n added the dash-data-table related to DataTable component label Mar 13, 2023
@gvwilson gvwilson self-assigned this Jul 24, 2024
@gvwilson gvwilson removed their assignment Aug 2, 2024
@gvwilson gvwilson added P3 backlog bug something broken labels Aug 13, 2024
@gvwilson gvwilson changed the title [BUG] DataTable: when cell_selectable=False text in columns with text presentation cannot be selected when cell_selectable=False text in columns with text presentation cannot be selected in data table Aug 13, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug something broken dash-data-table related to DataTable component P3 backlog
Projects
None yet
Development

No branches or pull requests

3 participants