14

Steps to reproduce:

  1. Use Microsoft Edge on Windows 10 (I'm using RTM, version 20.10240.16384.0).

  2. Go to StackExchange chat. Specifically, I'm testing this in Super User's chatroom, Root Access.

  3. Make sure you're logged in and have >20 rep network-wide so you can talk.

  4. Hover over a chat message, then click the arrow on the right-hand side of the message box to start replying to the chat message.

  5. Start typing.

  6. Observe that your chat textbox now has something in it like "Hello:215456839", instead of ":215456839 Hello". The former will appear in chat as nonsense; the latter will reply to message #215456839.

  7. Expected result: the "caret" should be moved to the end of the textbox after the message ID is inserted. This behavior works fine on Internet Explorer, Firefox, and Chrome, but not on Microsoft Edge.

Questions:

  • Do we have to wait for Edge to update for this, or can it be worked around in SE's chat code?
  • Should I/we report this to Microsoft as a compatibility issue?
  • What is the "root cause" technical description of the actual problem that causes this behavior?

Screenshot added by Nathan Osman:

enter image description here

2

I decided to put on my debugging hat and see what's causing this.

Here's the relevant lines from master-chat.js:

function U(e) {
    e && e.messageId || (e = $(this).closest(".message"));
    var t = e.messageId(), n = $("#input").focus().val().replace(/^:([0-9]+)\s+/, "");
    r(":" + t + " " + n).focus();
}

What's happening here is:

  • focus is given to the input
  • the current value is retrieved and any existing message ID is stripped (such as :123456)
  • the input value becomes : + message ID + the value from the previous step

None of this code attempts to change the cursor position. Therefore, the question now becomes, "What is Edge doing differently than the other browsers and is this correct behavior?"

Here's a simple test case that reproduces the behavior:
https://jsbin.com/lajafiquko/edit?html,js,output

  • Internet Explorer, Firefox, and Chrome put the insertion point at the end of the input
  • Edge puts it at the beginning

Is this correct?

According to the W3C DOM Level 2 HTML Specification, nothing is stated about the position of the insertion point. So I'm going to conclude that this is something Stack Exchange needs to fix. (And this is how it would be done.)

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .