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

paul-maki · 2025-03-09T15:45:04Z

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>

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

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

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

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

paul-maki commented Mar 9, 2025 •

edited

Loading

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

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

Comments

paul-maki commented Mar 9, 2025 • edited Loading

Bug Report

Description

Steps to Reproduce:

Expected Result:

Actual Result:

Environment:

paul-maki commented Mar 9, 2025 •

edited

Loading