Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Open
paul-maki opened this issue Mar 9, 2025 · 0 comments

Comments

@paul-maki
Copy link

paul-maki commented 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:

  • 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

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>
@paul-maki 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
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant