finos / finos/regular-table

Editing a cell with long input causes paragraph rendering failure on scroll

Open
#229 0 comments 0 reactions 0 assignees View on GitHub
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.

![Image](https://github.com/user-attachments/assets/ddf917ff-448f-42c2-a4f5-dfcaaf4bce17)

### 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

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.