Virtual_ManPL [:Virtual] 🇵🇱 - (please needinfo? me - so I will see your comment/reply/question/etc.) Reporter
	Description • 7 years ago

[Tracking Requested - why for this release]: Regression

STR:
1. Open this website page - http://help.msgsafe.io/support/tickets/new
2. Copy website page address
3. Paste it to "Description" text area
and see that nothing happens

	Makoto Kato [:m_kato]
	Comment 1 • 7 years ago

This seems to be regression by bug 1318312

	Masayuki Nakano [:masayuki] (he/him)(JST, +0900)
	Comment 2 • 7 years ago

Could be, but the behavior is really odd. At pasting something into the rich text editor, focus is always gone. I already stopped moving focus *from* contenteditable editor to the others in bug 1367460. So, the website does something tricky.

	Makoto Kato [:m_kato]
	Comment 3 • 7 years ago

Is this ASP by https://freshservice.com/ ?

	Masayuki Nakano [:masayuki] (he/him)(JST, +0900)
	Comment 4 • 7 years ago

Yeah, looks like so. I got this error at pasting:

> NS_ERROR_FAILURE:  redactor-8d8f8e9767c20b4c9490a5da8c930687.js%20line%2012%20%3E%20eval:1
> 	Selection.setSelection https://assets4.freshservice.com/assets/cdn/redactor-8d8f8e9767c20b4c9490a5da8c930687.js%20line%2012%20%3E%20eval:1:2672
> 	restoreSelection https://assets4.freshservice.com/assets/cdn/redactor-8d8f8e9767c20b4c9490a5da8c930687.js:13:25633
> 	paste_selection_modification/< https://assets4.freshservice.com/assets/cdn/redactor-8d8f8e9767c20b4c9490a5da8c930687.js:12:31061
> 	s https://assets5.freshservice.com/assets/cdn/portal_head-51c8de39a533df2d0c6a05b45dea0905.js:17:15539

	Masayuki Nakano [:masayuki] (he/him)(JST, +0900)
	Comment 5 • 7 years ago

I found this element at the bottom of the page:
<div rel="tmpClipboard" style="width: 100px; height: 10px; opacity: 0; overflow: hidden;" contenteditable="true"></div>

Looks like that when pasting something, it tries to move focus here temporary and receive the clipboard content?

	Masayuki Nakano [:masayuki] (he/him)(JST, +0900)
	Comment 6 • 7 years ago

>       var a = e('body').find('[rel=tmpClipboard]');
>       a.attr('contenteditable', 'true'),
>       a.css('width', '100px'),
>       a.css('height', '10px'),
>       a.css('opacity', '0'),
>       a.css('overflow', 'hidden'),
>       this.isMobile(!0) === !1 && (this.cleanStyleAttr(), 1 == e.browser.msie && e.browser.msie && parseInt(e.browser.version, 10) <= 10 && this.$editor.bind('beforepaste', e.proxy(function () {
>         this.paste_selection_modification(a)
>       }, this)), this.$editor.bind('paste', e.proxy(function (t) {
>         if (this.setCursorPosition(), this.specialPaste) this.specialPaste = !1;
>          else if (this.paste_supported_browser) {
>           var n = t.clipboardData.getData('text/plain');
>           0 == n.length && this.opts.clipboardImageUpload !== !1 ? e(this).pasteImage(t)  : this.paste_selection_modification(a)
>         } else if (e.browser.msie && parseInt(e.browser.version, 10) > 10 && void 0 != window.clipboardData) {
>           var n = window.clipboardData.getData('Text');
>           void 0 != n && n.length > 0 ? this.paste_selection_modification(a)  : this.opts.clipboardImageUpload !== !1 && e(this).pasteImage(t)
>         } else {
>           var n = '';
>           n = t.clipboardData.getData('text/html'),
>           0 == n.length && (n = t.clipboardData.getData('text/plain'), this.textPaste = !0),
>           0 == n.length && this.opts.clipboardImageUpload !== !1 ? (this.textPaste = !1, e(this).pasteImage(t))  : (t.preventDefault(), this.pasteCleanUp(n))
>         }
>         this.saveScroll = this.opts.autoresize === !0 ? document.body.scrollTop : this.$editor.scrollTop()
>       }, this)), this.$editor.bind('drop', e.proxy(function (t) {
>         t.preventDefault(),
>         this.focusOnCursor(),
>         e(this).pasteImage(t)
>       }, this))),
>       this.keyup(),
>       this.keydown(),
>       this.bindclick(),
>       this.bindCustomEvent(),
>       e(this).removeCursorImage(this),
>       this.opts.autosave !== !1 && this.autoSave(),
>       this.observeImages(),
>       this.observeTables(),
>       this.observeCode(),
>       e.browser.mozilla,
>       this.opts.focus && this.focusOnCursor(),
>       this.opts.fixed && (this.observeScroll(), e(document).scroll(e.proxy(this.observeScroll, this))),
>       'function' == typeof this.opts.callback && this.opts.callback(this);
>       var s = this;
>       this.inputEventAvailable() && this.$editor.on('input', function () {
>         s.syncCode()
>       }),
>       this.$editor.on('drop', function () {
>         s.inputEventAvailable() || setTimeout(function () {
>           s.syncCode()
>         }, 1)
>       }),
>       this.$editor.on('blur', function () {
>         s.syncCode(),
>         s.$el.is(':hidden') && s.insertCaretImage(),
>         e(this).parent().removeClass('redactor_focus')
>       }),
>       this.$editor.on('focus', function () {
>         e(this).parent().addClass('redactor_focus')
>       }),
>       this.$el.data('quotedTextarea') ? (e(this).quotedtext(this), this.hasQuotedText = !0)  : this.hasQuotedText = !1
>     },

>     paste_selection_modification: function (t) {
>       this.saveSelection();
>       var n = this.getSelection();
>       n.removeAllRanges();
>       var i = document.createRange();
>       i.selectNodeContents(t.get(0)),
>       n.addRange(i),
>       setTimeout(e.proxy(function () {
>         var e = t.html();
>         t.html(''),
>         this.restoreSelection(),
>         this.pasteCleanUp(e)
>       }, this), 1)
>     },

>     saveSelection: function () {
>       if (this.savedSel = null, this.savedSelObj = null, e.browser.msie && parseInt(e.browser.version, 10) < 9) {
>         var t = this.$editor.get(0);
>         this.savedSel = window.Selection.getOrigin(t),
>         this.savedSelObj = window.Selection.getFocus(t)
>       } else {
>         e.browser.msie && parseInt(e.browser.version, 10) > 10 && (this.undoDisable = !0);
>         var n = this.getSelection();
>         this.savedSel = [
>         ],
>         this.savedSelObj = [
>         ],
>         this.savedSel[0] = n.anchorNode,
>         this.savedSel[1] = n.anchorOffset,
>         this.savedSelObj[0] = n.focusNode,
>         this.savedSelObj[1] = n.focusOffset
>       }
>     },

>     restoreSelection: function () {
>       null !== this.savedSel &&
>       null !== this.savedSelObj &&
>       'BODY' !== this.savedSel[0].tagName ?
>         window.Selection.setSelection(window, this.savedSel[0], this.savedSel[1],
>                                       this.savedSelObj[0], this.savedSelObj[1])  :
>         this.$editor.focus()
>     },

Okay, looks like that setSelection is failed because the temporary editor still has focus and the restoring selection range is outside of current selection root. I wonder, why does Chromium allow this?

# If the code moves focus first, then, it should work.

	Alice0775 White
	Comment 7 • 7 years ago

FYI,
UA spoofing seems to fix the problem on Windows10 Nightly56.0a1.
i.e, seting general.useragent.override = "Mozilla/5.0 (Windows NT 10.0; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/54.0.2840.99 Safari/537.36"

	Masayuki Nakano [:masayuki] (he/him)(JST, +0900)
	Comment 8 • 7 years ago

Thank you. That's good information. I guess that they change the script files coming from the server.

There are two problems:

1. Moving focus to the transparent editor temporarily causes scrolling.
2. Failing to move selection from the transparent editor to the original editor.

I think that the latter problem should be fixed by the web service because I have no idea how to change our behavior only in this case. They should move focus to the original editor OR do document.getSelection().removeAllRanges() before restoring the selection. Then, it perhaps won't fail.

I have no idea about the first issue. Chrome does not scroll to the focused editor when focus is changed by Selection API. However, I don't feel that it's good behavior for users in typical cases. Additionally, we scroll the page to focused editor when an editor (<input> or <textarea>) gets focus. I don't like to break this consistency with them. So, I think that they should move the transparent editor to around caret.

Does somebody know who is a good person to contact them as TechEvangelism issue?

	Makoto Kato [:m_kato]
	Comment 9 • 7 years ago

Mike, could you or your team contact to https://freshservice.com/ as tech evangelism issue?  Detail is comment #7 and comment #8.

	Mike Taylor [:miketaylr]
	Comment 10 • 7 years ago

Yep, sure thing. Adam, can you get in touch please?

(I'm gonna move this to Tech Evangelism...)

	Virtual_ManPL [:Virtual] 🇵🇱 - (please needinfo? me - so I will see your comment/reply/question/etc.) Reporter
	Comment 11 • 7 years ago

Zendesk also seems to be affected.

	Adam Stevenson [:adamopenweb] Assignee
	Comment 12 • 7 years ago

Reaching out over Linkedin.

	Adam Stevenson [:adamopenweb] Assignee
	Comment 13 • 7 years ago

Our contact is investigating the issue and will get back to us.

	Mike Taylor [:miketaylr]
	Comment 14 • 6 years ago

Let's remove the regression keyword, we've been

	Mike Taylor [:miketaylr]
	Comment 15 • 6 years ago

...dealing with this for a while.

	Alice0775 White
	Comment 16 • 6 years ago

I cannot reproduce the original issue anymore on Nightly65.0a1 as well as Firefox60esr windows10....

	Virtual_ManPL [:Virtual] 🇵🇱 - (please needinfo? me - so I will see your comment/reply/question/etc.) Reporter
	Comment 17 • 6 years ago

(In reply to Alice0775 White from comment #16)
> I cannot reproduce the original issue anymore on Nightly65.0a1 as well as
> Firefox60esr windows10....

Thank you very much for checking!
I'm marking this bug as FIXED, as it's fixed on website page by its developers.