903307 - Single Line Content Editable Div does not scroll automatically when being selected over mouse

Status: RESOLVED INVALID

(Core :: DOM: Editor, defect, P5)

Description

[filip_wieladek]

User Agent: Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Ubuntu Chromium/28.0.1500.71 Chrome/28.0.1500.71 Safari/537.36

Steps to reproduce:

I have the following HTML:

<div contenteditable="true">At vero eos et accusam et justo duo dolores et ea rebumm</div>

With the following css:
div {
    white-space: nowrap;
    word-wrap: keep-all;
    overflow: hidden;
    width: 100px;
}


This is used to create a single line rich text editor field, similar to a input text tag. While this started to work correctly in about firefox 20, mouse selection is still broken. 

I have created a fiddle here:
http://jsfiddle.net/BKhg3/1/


Actual results:

When selecting the text, the content does not move


Expected results:

The content should move so that it is possible to select the whole text with the mouse. This works fine in IE9 and Chrome. This still happens on the nightly build of FF

Comment 1

[Loic]

Attachment: 903307.html (testcase)

Comment 2

[Loic]

Are you sure it worked in Firefox in the past? On Win 7, I tried with old versions of FF (FF17) and with FF20 nightlies, it doesn't work (neither in FF23+).

Comment 3

[filip_wieladek]

Oh, Im sorry, I was not clear enough. Since FF 20 you could actually have a single line content editable which would scroll with the cursor (e.g by typing or moving the cursor left and right).

I guess that statement was confusing. The selection never worked. It is not a regression, just a bug

Comment 4

[Loic]

Ok, I see. I tested with IE9 and I observed the normal behavior (possibility to scroll the line with the mouse to select text).

Comment 5

[Paul Silaghi, QA [:pauly]]

NEW based on comment 4.

Comment 6

[Jens Stutte [:jstutte]]

Bulk-downgrade of unassigned, >=3 years untouched DOM/Storage bug's priority.

If you have reason to believe this is wrong, please write a comment and ni :jstutte.

Comment 7

[David Gausmann]

Today, I experienced the same issue. In Firefox and Chrome the selection position is updated if you move the caret with the keyboard, but not if it is moved via mouse.
From my point of view this is an issue, which should be fixed in the web browsers.

However, I created a workaround (might be interesting for those, who have the same issue and need a solution now):

document.addEventListener("selectionchange", document_onselectionchange);

function document_onselectionchange(event)
{
    const selection = window.getSelection();
    if(selection.rangeCount)
    {
        const range = selection.getRangeAt(0).cloneRange();
        let container = range.startContainer;
        while(container && container.nodeType !== Node.ELEMENT_NODE)
            container = container.parentNode;
        container = container?.closest?.("*[contenteditable=true]");
        if(container)
        {
            const style        = window.getComputedStyle(container);
            const overflowX    = style.getPropertyValue("overflow-x");
            const overflowY    = style.getPropertyValue("overflow-y");
            const paddingLeft  = style.getPropertyValue("padding-left");
            const paddingRight = style.getPropertyValue("padding-right");
            if(overflowX === "hidden" && overflowY === "hidden")
            {
                let useStart = true;
                if(selection.anchorNode && selection.focusNode)
                {
                    if(selection.anchorNode === selection.focusNode)
                    {
                        if(selection.anchorOffset < selection.focusOffset)
                            useStart = false;
                    }
                    else
                    {
                        let relation = selection.anchorNode.compareDocumentPosition(selection.focusNode)
                        if((relation & Node.DOCUMENT_POSITION_FOLLOWING) != 0)
                            useStart = false;
                    }
                }
                const paddingLeftPx  = (/^([0-9]+(?:\.?[0-9]+)?)px$/.exec(paddingLeft)?.[1]  ?? "0") * 1.0;
                const paddingRightPx = (/^([0-9]+(?:\.?[0-9]+)?)px$/.exec(paddingRight)?.[1] ?? "0") * 1.0;
                const rectSelection = range.getBoundingClientRect();
                const rectContainer = container.getBoundingClientRect();
                const containerInnerWidth = rectContainer.width - paddingLeftPx - paddingRightPx;
                const posX = (useStart ? rectSelection.left : rectSelection.right) - rectContainer.left;
                if(rectSelection.width == 0 && rectSelection.height == 0)
                    return;		// If the web browser windows loses focus, this will happen
                if(posX < 0)
                    container.scroll({ "left": Math.max(container.scrollLeft + posX, 0), "top": container.scrollTop, "behavior": "instant" });
                else if(posX > containerInnerWidth)
                    container.scroll({ "left": Math.max(container.scrollLeft + Math.max(posX - containerInnerWidth, 0), 0), "top": container.scrollTop, "behavior": "instant" });
            }
        }
    }
}

Comment 8

[Masayuki Nakano [:masayuki] (he/him)(JST, +0900)(sickish, maybe slower respose)]

In these days, this should be solved by web apps with:

overflow: auto;
scrollbar-width: none;

Although Safari has not supported scrollbar-width yet according to MDN.

I think this should be closed as INVALID.

Comment 9

[David Gausmann]

After I wrote my comment above, I also found that solution in the internet.
But scrollbar-width is currently not supported in the official release of Chrome.

This solution works in all major browsers, according to stackoverflow:

.container {
    overflow-y: scroll;
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none;  /* Internet Explorer 10+ */
}
.container::-webkit-scrollbar { /* WebKit */
    width: 0;
    height: 0;
}

From my point of view this ticket should also be closed.
However, it would be nice if this behavior could be added to MDN.
I've created a GIT request for it: https://github.com/mdn/content/issues/30949