Open Bug 1522492 Opened 3 years ago Updated 2 years ago

When multiple cells in the table are selected, the selection is wrong

Categories

(Core :: DOM: Selection, defect, P3)

64 Branch
defect

Tracking

()

UNCONFIRMED

People

(Reporter: CodePlayer360, Unassigned)

References

(Blocks 1 open bug)

Details

(Keywords: parity-chrome, testcase)

Attachments

(1 file)

User Agent: Mozilla/5.0 (Windows NT 6.1; Win64; x64; rv:64.0) Gecko/20100101 Firefox/64.0

Steps to reproduce:

My firefox version is 64.0.2 (64bit) in Windows 7 (64bit).

In a rich-text editor, I want to drag the mouse to select multi-row cells within the table. Then, execute "window.getSelection()" in the console.

The source code of html file is as follows:

<!DOCTYPE html>
<html lang="zh_CN">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no, shrink-to-fit=no">
<title>CodePlayer Editor</title>
<style>
.editor {
min-width: 800px;
min-height: 600px;
border: 1px solid #ccc;
padding: 5px;
}

    td,
    th {
        border: 1px solid #ccc;
    }

    table {
        border-spacing: 0;
        border-collapse: collapse;
    }
</style>

</head>

<body>
<div id="editor" class="editor" contenteditable="true">
<table>
<tbody>
<tr>
<th>hello</th>
<th>world</th>
<th>java</th>
</tr>
<tr>
<td>js</td>
<td>css</td>
<td>html</td>
</tr>
<tr>
<td>yes</td>
<td>or</td>
<td>no</td>
</tr>
<tr>
<td>hehah</td>
<td>OK</td>
<td></td>
</tr>
</tbody>
</table>
</div>
</body>

</html>

Actual results:

However, the return value is incorrect. The "Selection.anchorNode" and "Selection.focusNode" still always on the same row even if I select multiple different rows.

Using Chrome for the same operation, the output is not the same, the result of chrome is in line with expectations.

Expected results:

The anchorNode and focusNode of the selection should correspond to the correct node.

<!DOCTYPE html>
<html lang="zh_CN">
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no, shrink-to-fit=no">
    <title>CodePlayer Editor</title>
    <style>
        .editor {
            min-width: 800px;
            min-height: 600px;
            border: 1px solid #ccc;
            padding: 5px;
        }

        td,
        th {
            border: 1px solid #ccc;
        }

        table {
            border-spacing: 0;
            border-collapse: collapse;
        }
    </style>
</head>

<body>
    <div id="editor" class="editor" contenteditable="true">
        <table>
            <tbody>
                <tr>
                    <th>hello</th>
                    <th>world</th>
                    <th>java</th>
                </tr>
                <tr>
                    <td>js</td>
                    <td>css</td>
                    <td>html</td>
                </tr>
                <tr>
                    <td>yes</td>
                    <td>or</td>
                    <td>no</td>
                </tr>
                <tr>
                    <td>hehah</td>
                    <td>OK</td>
                    <td></td>
                </tr>
            </tbody>
        </table>
    </div>
</body>

</html>

Based on the above demo, the Selection.anchorNode should be at the first row of the table.

Has STR: --- → yes
Component: Untriaged → Selection
Product: Firefox → Core
See Also: → 1417535
Priority: -- → P3

Guys,

While the table/cell selection feature in Firefox is cool, it is not on any standards track and is unsupported in any other browser. There are also a number of quarks in the implementation.

There are plenty of good well documented ways using css and javascript to implement cross browser table/cell selection.

As the standard bearer, shouldn't we be trying to promote standards and harmony between browsers rather than fragmentation. I say we depreciate and then remove this feature. Then, if we feel that table/cell selection should be implemented, let's instead work towards a new standard that everyone can benefit from.

Having written more than a few html editors in my day, I can tell you that having standardized and standards based behaviour between browsers makes for less code and better quality. I am sure that the folks at Tiny, ckEditor, etc. who have made html editors probably have a similar line of thinking.

Cheers,

Alex

Blocks: 1590379
You need to log in before you can comment on or make changes to this bug.