You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
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>
The text was updated successfully, but these errors were encountered:
paul-maki
changed the title
Paragraph not rendered after cell editing with a long string and scrolling right
Editing a cell with long input causes paragraph rendering failure on scroll
Mar 9, 2025
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:
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:
The text was updated successfully, but these errors were encountered: