Closed Bug 1379561 Opened 3 years ago Closed 1 year ago

Can't paste text to some textareas

Categories

(Web Compatibility :: Desktop, defect, P1)

Firefox 55
x86_64
Windows 7

Tracking

(Not tracked)

VERIFIED FIXED

People

(Reporter: Virtual, Assigned: adamopenweb)

References

Details

(Keywords: nightly-community, reproducible)

[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
Summary: Can't paste text to some text areas → Can't paste text to some textareas
Blocks: 1318312
Component: Layout: Form Controls → Editor
Priority: -- → P1
This seems to be regression by bug 1318312
Flags: needinfo?(masayuki)
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.
Flags: needinfo?(masayuki)
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?
>       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.
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"
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?
Mike, could you or your team contact to https://freshservice.com/ as tech evangelism issue?  Detail is comment #7 and comment #8.
Flags: needinfo?(miket)
Yep, sure thing. Adam, can you get in touch please?

(I'm gonna move this to Tech Evangelism...)
Component: Editor → Desktop
Flags: needinfo?(miket) → needinfo?(astevenson)
Product: Core → Tech Evangelism
Whiteboard: [needscontact]
Version: 55 Branch → Firefox 55
Reaching out over Linkedin.
Assignee: nobody → astevenson
Flags: needinfo?(astevenson)
Whiteboard: [needscontact] → [sitewait]
Our contact is investigating the issue and will get back to us.
Let's remove the regression keyword, we've been
Keywords: regression
...dealing with this for a while.
I cannot reproduce the original issue anymore on Nightly65.0a1 as well as Firefox60esr windows10....
(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.
Status: ASSIGNED → RESOLVED
Closed: 1 year ago
Resolution: --- → FIXED
Whiteboard: [sitewait]
Product: Tech Evangelism → Web Compatibility
You need to log in before you can comment on or make changes to this bug.