Editing a cell with long input causes paragraph rendering failure on scroll
- Dominant language
- JavaScript
- Stars
- 403
- Forks
- 43
- Avg merge
- 3m
- Merged PRs (30d)
- 1
Description
## Bug Report
### Description
The issue appears when scrolling horizontally after editing a cell with a long input, which causes that cell to expand and obscure the following columns. Once these columns go out of view and you scroll to the "paragraph column", **\
** inside this cell is not being rendered.
### Steps to Reproduce:
* Scroll to the right.
* Type in the cell of the column labeled **"type here"** until **"td-to-disappear-1"** column is not visible.
* Navigate to the cell with the column **"paragraph-td"** to observe that the paragraph is not rendered as expected.

### Expected Result:
After editing the cell in **"type here"** column, the paragraph in the **"paragraph-td"** cell should render as expected.
### Actual Result:
After editing the cell in **"type here"** column, the paragraph in the **"paragraph-td"** cell is not being rendered.
### Environment:
The issue occurs in both Firefox and Google Chrome.
Code:
```
Steps to reproduce:
- Make an initial horizontal scroll to the right ➡️
- Type in "Type here" cell until "td-to-dissapear-1" column is not visible ✏️
- Go to paragraph cell. Paragraph is not being rendered 👀
function createParagraph(text) {
const p = document.createElement('p');
p.textContent = text;
return p;
}
function getRegularTable() {
return document.getElementsByTagName("regular-table")[0];
}
const DATA_COLUMN_NAMES = ['normal-td-1', 'Type here', 'td-to-disappear-1', 'td-to-disappear-2', 'td-to-disappear-3', 'paragraph-td', 'td-to-disappear-4'];
const DATA = [
['Very long text that should be inside the td and generates an horizontal scroll'],
[''],
['Very long text that should disappear from the visible area to generate the error'],
['Very long text that should disappear from the visible area to generate the error'],
['Very long text that should disappear from the visible area to generate the error'],
[createParagraph('paragraph')],
['Very long text that should be inside the text and generate an horizontal scroll'],
]
function dataListener(x0, y0, x1, y1) {
if (x0 === 0 && y0 === 0 && x1 === 0 && y1 === 0) {
return {
num_rows: DATA[0].length,
num_columns: DATA_COLUMN_NAMES.length,
column_headers: DATA_COLUMN_NAMES.slice(x0, x1).map(x => [x])
};
}
return {
num_rows: DATA[0].length,
num_columns: DATA.length,
column_headers: DATA_COLUMN_NAMES.slice(x0, x1).map(x => [x]),
data: DATA.slice(x0, x1).map(col => col.slice(y0, y1))
};
}
function write(active_cell) {
const table = getRegularTable();
const meta = table.getMeta(active_cell);
if (meta) {
let text = active_cell.textContent;
DATA[meta.x][meta.y] = text;
table.draw();
}
}
window.addEventListener("load", () => {
const table = getRegularTable();
table.addEventListener("focusout", event => {
write(event.target);
});
table.addEventListener("scroll", event => {
write(event.target);
});
table.setDataListener(dataListener);
table.addStyleListener(() => {
for (const td of table.querySelectorAll("td")) {
const meta = table.getMeta(td);
const column = meta.column_header[0];
if (column === 'normal-td-1') {
td.style.backgroundColor = 'white';
continue;
}
if (column === 'Type here') {
td.style.backgroundColor = 'lightblue';
td.contentEditable = true;
continue;
}
if (column === 'paragraph-td') {
td.style.backgroundColor = 'lightgreen';
const p = td.children[0];
if (p == null) {
console.log('p is not present in paragraph-td');
}
continue;
}
td.contentEditable = false;
td.style.backgroundColor = 'khaki';
}
});
table.draw();
});
```
Contributor guide
Assessment
This issue has not been assessed yet.