[BUG] DataTable: when cell_selectable=False text in columns with text presentation cannot be selected

[ned2]

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]

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.