plotly / plotly/dash

Dash editable DataTable issues

オープン
#2,018 コメント 3 件 リアクション 4 件 担当者 0 名 GitHub で見る

まだ誰も着手していません。

bug dash-data-table P3
主要言語
Python
スター
24.4k
フォーク
2.3k
平均マージ
2日 7時間
マージ済み PR(30日)
13

説明

Describe your context

dash                          2.3.1
dash-core-components          2.0.0
dash-html-components          2.0.0
dash-table                    5.0.0

Describe the bug

The editable datatable could be really great for a data entry tool, but there are a number of inconsistencies in the behavior that are making it very tough to use in practice.

First up, the behavior of the enter key is inconsistent in the bottom row (or tab in the rightmost column). Normally, when a cell becomes active and you begin to type, it clears the contents allowing you to enter a new value. Then, the enter key commits the change, and moves the active cell down 1. However, in the last row enter commits the change but then doesn't move, and importantly doesn't re-activate the cell such that if you type again, it appends to the existing value instead of clearing it first as it does normally.

I'm not familiar with typescript at all, but it seems like a quick and dirty fix for this particular issue would be to check if the nextCell is equal to active_cell and then set whatever flag indicates that the cell has newly become active before line 620 below. Perhaps that would be better accomplished inside the setProps function?
https://github.com/plotly/dash/blob/693b62cc68701628b4836fc80f6306af5ae50a9b/components/dash-table/src/dash-table/components/ControlledTable/index.tsx#L612-L628

Alternately, changing the behavior of the enter key (and tab) to mimic the behavior when a range of cells is selected would be a good solution. When a range of cells is selected, enter in the bottom row of the selection goes to the top row of the next column. I would argue that with no selection, the table should behave the same way (i understand Excel doesn't behave like that, but it effectively has infinite rows...).

Another related issue, is that the behavior of the del or backspace key is inconsistent. The element's data is cleared immediately (which is different from any other entry), but it is still displayed in the active cell as if it is an entry until the enter key is pressed (at which point it clears). This is the most obvious when a range is selected, the range clears except for the active cell immediately. Things get really confusing if you begin to edit a cell, then use del or backspace then enter. Again, it doesn't affect the entry, and if there was a value in the cell it clears it immediately. But, if there wasnt a value in the cell initially, on enter, it now commits the entry (which i dont want since i just tried to delete it). So there is no clear or consistent way to correct a typo, you have to commit a bad change, then go back and edit it again.

The del key should clear the current entry, backspace should clear the last character of the current entry, and the underlying data should not be modified until the active_cell changes to be consistent with the other forms of entry.

Also, as a feature request, i would like escape to first clear a selection (if its larger than the active_cell) and then on a second press clear the active_cell without committing changes. Its frustrating that there is no built in way to clear the 'active_cell' once there is one.

I tried to make a gif to demonstrate, but struggled to get keyboard input with the low frame rate, all of these issues are reproducible in the help documentation. I know the descriptions above are hard to follow, so try editing a cell twice in the bottom row using enter to confirm the change. Then try to correct a typo in an entry using the backspace. Those will highlight the biggest issues in my opinion.
https://dash.plotly.com/datatable/editable

I believe the following are related.
#1800
plotly/dash-table#427

コントリビューションガイド

コントリビューションガイドを開く

はじめの一歩

  1. issue を最後まで読み、次にプロジェクトのコントリビューションガイドを読みます。
  2. 着手することを issue にコメントします — 二人が同じ作業をするのを防げます。
  3. リポジトリをフォークし、ブランチを切って変更します。
  4. issue 番号を参照したプルリクエストを送ります。

調査の方向性

components/dash-table/src/dash-table/components/ControlledTable/index.tsx の612〜628行目あたりから始め、dash.plotly.com/datatable/editable の編集可能な DataTable ドキュメントにあるキーボード動作を再現します。最下行での Enter と最右列での Tab を通常のナビゲーションと比較し、Del、Backspace、Escape による削除をテストします。編集、ナビゲーション、削除、選択の解除、キャンセルが、データの早すぎる更新なしに一貫して動作すれば完了です。

索引モデルが issue の本文から書いたものです。

評価

技術スタック
python, react, typescript
領域
frontend
issue の種類
バグ
難易度
4/5
見積もり時間
3〜5日
活発さ
活発
明瞭さ
説明が足りない
初心者へのやさしさ
38/100

新しい issue をメールで受け取る

初心者向けの GitHub issue を短くまとめたダイジェスト。