Editing a cell with long input causes paragraph rendering failure on scroll #229
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", <p> 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:
<!DOCTYPE html>
<html>
<head>
<script src="https://cdn.jsdelivr.net/npm/regular-table"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/regular-table/dist/css/material.css" />
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/regular-table/dist/css/sub-cell-scrolling.css"/>
</head>
<body>
<div>
<div style="width: 100%; height: 200px;">
<regular-table style="height: 100px;"></regular-table>
</div>
<h3>Steps to reproduce:</h3>
<ul>
<li>Make an initial horizontal scroll to the right ➡️</li>
<li>Type in "Type here" cell until "td-to-dissapear-1" column is not visible ✏️</li>
<li>Go to paragraph cell. Paragraph is not being rendered 👀</li>
</ul>
</div>
<script>
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();
});
</script>
</body>
</html>