[BUG] active_cell does not work correctly with table dropdowns

[vivekvs1]

When selecting the input for the dropdown, the expected behaviour I think should be that the active_cell changes to the dropdown in focus. However, this isn't the case:

[vivekvs1]

Is the above intended behavior, or is it a bug?

[alexcjohnson]

@vivekvs1 I think you're right in principle, but I don't see much practical benefit to making a dropdown the active cell, unless and until we build a way to choose dropdown values via the keyboard. Would you agree that these go together, or do you see a benefit to making it active before that?

[vivekvs1]

@alexcjohnson You are correct! In my use-case though, I trigger callbacks based on which column is clicked. I got around this issue by comparing with data_previous, but I believe that this comparison is expensive.
This is what I have implemented now to get around this issue:

if clicked == "table":

      df = pd.DataFrame(data)
      df_prev = pd.DataFrame(data_previous)
      df = df.fillna("-")
      df_prev = df_prev.fillna("-")

      if not df.equals(df_prev):

          status = 1 - df.eq(df_prev)
          status["decision"] = status.sum(axis=1)
          modified_row_id = status.query("decision == True").index.tolist()[0]
          modified_row = status.loc[modified_row_id]
          modified_column_id = modified_row[modified_row == 1].index.to_list()[0]

Also it is inconsistent with the keyboard navigation where I can actually have the drop-down in focus.

Slightly deviating from topic,
I just noticed that the behavior of active_cell has changed. I remember that active_cell was triggered by the table timestamp, the column and row id of the active_cell used to be for the cell that was modified. Now, I am unable to figure when this changed, but it is now showing the current location of cell. For ex.

        ColA, ColB
row0
row1

I modify ColA row 0:
a. When I press Enter, the active cell becomes ColA, row 1,
b. When I press arrow key, the active cell becomes ColB row 0.

It was super convenient to modify values of other columns in the table based on which cell was modified - by using active_cell which is not the case anymore.

With the old behavior of active_cell, I felt that it was super critical that the drop-downs resulted in the correct active cell, so that I can modify the 'row' of the active cell appropriate.

If my description is not very clear, I can provide an example. Thanks!!!!

[alexcjohnson]

That makes sense, I'd say that's a good enough reason to consider this a bug even without the ability to update the dropdown via the keyboard. But I think the current behavior of active_cell as the cursor location after editing the cell, rather than the edited cell itself, is correct. It may be worthwhile making another prop though that just contains the difference between data and data_previous - as you're right, doing that diff yourself is expensive, but also because it's possible to have edits affecting more than one cell: multi-cell cut/paste, row deletion, column clear.

[vivekvs1]

I wanted to branch this from here to a separate issue but didn't know how.

I just realized that the 'active_cell' being returned is different when using the keyboard, and when clicking on cells.

From my understanding,
1.The 'active_cell' becomes the cell that was just edited, when using mouse clicks to lose focus on cell.
2. The 'active_cell" becomes the newly focussed cell, when using keyboard to jump to adjacent cell or when pressing enter

Thanks.

[vivekvs1]

@alexcjohnson :

Working example to demonstrate above bug: i.e.e active_cell different for keyboard and click actions:

import dash
from dash.dependencies import Input, Output, State
import dash_table
import dash_html_components as html

app = dash.Dash(__name__)

app.layout = html.Div(
    [
        dash_table.DataTable(
            id="computed-table",
            columns=[
                {"name": "Input Data", "id": "input-data"},
                {"name": "Input Squared", "id": "output-data"},
            ],
            data=[{"input-data": i} for i in range(11)],
            editable=True,
        ),
        html.Div(id = "display_active_cell"),
    ]
)


@app.callback(
    [Output("computed-table", "data"), Output("display_active_cell", "children")],
    [Input("computed-table", "data_timestamp")],
    [State("computed-table", "data"), State("computed-table", "active_cell")],
)
def update_columns(timestamp, rows, active_cell):
    for row in rows:
        try:
            row["output-data"] = float(row["input-data"]) ** 2
        except:
            row["output-data"] = "NA"
    return [rows, str(active_cell)]


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

I copied an existing Dash example and modified it.

[vivekvs1]

Any updates on this? :)

[vivekvs1]

If there is anything I can do to help fix this issue, let me know. Thanks