scryfall.com - letters appear in wrong order, or don't appear when using advanced search #47822

BrandonWade · 2020-01-25T04:06:39Z

URL: https://scryfall.com/

Browser / Version: Firefox 74.0a1 (Fenix)
Operating System: Android 9
Tested Another Browser: Yes Chrome

Problem type: Site is not usable
Description: Unable to type
Steps to Reproduce:
Browser Versions:

Fennec Nightly (68.0a1) with no Add-ons
Fenix Nightly (74.0, Thursday 1/23)

-- Issue #1 - Search Term "Swaps" --

Prerequisites:

I can reproduce this in Fennec only. I cannot reproduce this with Fenix as it does not seem to save / suggest previously entered search terms.
Ensure you do not have any search terms previously entered.

Steps to Reproduce:

On the main page, https://scryfall.com/ if you enter a search term (e.g. the phrase "Temple") and hit enter, the page works successfully.
Return to https://scryfall.com/ and enter a different search term (e.g. "Shadow") and hit enter. The phrase "Shadow" switches to "Temple" before loading the search results.

Notes:

I have a keyboard app installed, SwiftKey, and I am unable to reliably reproduce the "swap" when spelling words by "swiping" instead of directly typing them out; typing them out directly causes the issue.
Possibly related to the above issue, I think this might be related to some sort of "focused" state that the browser seems to be keeping. For example, during step 2 if you (when you have a search term previously entered from step 1) and have typed in another phrase (e.g. "Shadow"), then tap somewhere else to cause the textbox to lose focus (e.g. the background, not on a link or button). Then focus the textbox again and hit enter, the "swap" does not occur - the search will be for "Temple" and not for "Shadow".

-- Issue #2 - Unable to Search Using Certain Fields --

Prerequisites:

I can reproduce this in both Fennec and Fenix.

Steps to Reproduce:

On the advanced search page, https://scryfall.com/advanced scroll down to the "Sets" section.
Tap on the first input that says "Enter the set name or choose from the list". A list of the available sets sppears - these work fine; ignore these.
Tap on the input again to allow searching via text.
Attempt to enter a phrase (e.g. "Secret"). The letters either do not appear, or appear in the wrong order.

Notes:

This issue seems to apply to all instances of this "text input / dropdown hybrid" component on the page.
This component works in Chrome, although it is worth noting that you can't type quickly to search; you must pause between typing each letter - if you don't, some of the letters do not appear and appear to be being "skipped" (however, they do not appear in the wrong order).
Screenshot

Browser Configuration

gfx.webrender.all: true
gfx.webrender.blob-images: true
gfx.webrender.enabled: false
image.mem.shared: true
buildID: 20200123214224
channel: nightly
hasTouchScreen: false
mixed active content blocked: false
mixed passive content blocked: false
tracking content blocked: false

View console log messages

From webcompat.com with ❤️

cipriansv · 2020-01-27T09:41:32Z

Thank you for the report, @BrandonWade.

Regarding the first issue, I am not able to reproduce it. I am redirected directly to the "Shadow" search result page.

However, I am indeed able to reproduce the second issue.

Tested with:
Browser / Version: Firefox Preview Nightly 200126 (🦎: 74.0a1-20200125094527), Chrome Mobile 79.0.3945.136
Operating System: Huawei P10 (Android 9.0) - 1080 x 1920 pixels (~432 ppi pixel density)

This is the web page displayed in Firefox Preview Nightly when I try to type the word "Secret":

And this is the web page displayed in Chrome:

Moving to needsdiagnosis.

BrandonWade · 2020-01-29T01:45:16Z

Thanks for testing it out! Interestingly enough, I can't reproduce the first issue on Fennec 68.0b5 (Fennec Beta). It's possible my Fennec Nightly profile got corrupted somehow or something...

miketaylr · 2020-04-15T20:27:56Z

Note: this site is using this jQuery widget: https://github.com/select2/select2

karlcow · 2020-04-27T06:49:22Z

this is still happening but only on fenix preview nightly.
It doesn't happen on rdm

with a break on focus events
when i type s, everything is fine, then as soon as I type e, it stops in:

ve.focusin || we.each({
    focus: 'focusin',
    blur: 'focusout'
  }, function (e, t) {
    var n = function (e) {
      we.event.simulate(t, e.target, we.event.fix(e))
    };

and the keyboard disappears. eventually it makes its way to

we.Event = function (e, t) {
    if (!(this instanceof we.Event)) return new we.Event(e, t);
    e && e.type ? (this.originalEvent = e, this.type = e.type, this.isDefaultPrevented = e.defaultPrevented || void 0 === e.defaultPrevented && !1 === e.returnValue ? S : A, this.target = e.target && 3 === e.target.nodeType ? e.target.parentNode : e.target, this.currentTarget = e.currentTarget, this.relatedTarget = e.relatedTarget)  : this.type = e,
    t && we.extend(this, t),
    this.timeStamp = e && e.timeStamp || Date.now(),
    this[we.expando] = !0
  },

then the keyboard will reappear. if I just log focus

15:48:18.409
focus { target: input.select2-search__field
, isTrusted: true, view: Window, detail: 0, layerX: 0, layerY: 0, which: 0, rangeParent: Restricted, rangeOffset: 2, SCROLL_PAGE_UP: -32768, … }
scryfall-4549d4966d4f9695e0ba3cdac1a9eacfad77209e9708e6a8681eb2fbaf6685be.js:formatted:7140
15:48:19.726
focus { target: input.select2-search__field, isTrusted: true, view: Window, detail: 0, layerX: 0, layerY: 0, which: 0, rangeParent: #text
, rangeOffset: 55, SCROLL_PAGE_UP: -32768, … }
scryfall-4549d4966d4f9695e0ba3cdac1a9eacfad77209e9708e6a8681eb2fbaf6685be.js:formatted:7140
15:48:19.888
focus { target: input.select2-search__field
, isTrusted: true, view: Window, detail: 0, layerX: 0, layerY: 0, which: 0, rangeParent: Restricted, rangeOffset: 3, SCROLL_PAGE_UP: -32768, … }
scryfall-4549d4966d4f9695e0ba3cdac1a9eacfad77209e9708e6a8681eb2fbaf6685be.js:formatted:7140
15:48:20.921
focus { target: input.select2-search__field, isTrusted: true, view: Window, detail: 0, layerX: 0, layerY: 0, which: 0, rangeParent: #text
, rangeOffset: 55, SCROLL_PAGE_UP: -32768, … }
scryfall-4549d4966d4f9695e0ba3cdac1a9eacfad77209e9708e6a8681eb2fbaf6685be.js:formatted:7140
15:48:21.059
focus { target: input.select2-search__field, isTrusted: true, view: Window, detail: 0, layerX: 0, layerY: 0, which: 0, rangeParent: Restricted, rangeOffset: 4, SCROLL_PAGE_UP: -32768, … }

karlcow · 2020-04-27T06:55:46Z

let's try to record more events.

15:52:06.112
keydown { target: input.select2-search__field
, key: "Process", charCode: 0, keyCode: 229 }
scryfall-4549d4966d4f9695e0ba3cdac1a9eacfad77209e9708e6a8681eb2fbaf6685be.js:formatted:6038
15:52:06.118
input { target: input.select2-search__field
, isTrusted: true, isComposing: true, inputType: "insertCompositionText", data: "S", view: Window, detail: 0, layerX: 0, layerY: 0, which: 0, … }
scryfall-4549d4966d4f9695e0ba3cdac1a9eacfad77209e9708e6a8681eb2fbaf6685be.js:formatted:6038
15:52:06.972
keyup { target: input.select2-search__field
, key: "Process", charCode: 0, keyCode: 229 }
scryfall-4549d4966d4f9695e0ba3cdac1a9eacfad77209e9708e6a8681eb2fbaf6685be.js:formatted:10205
15:52:06.977
keyup { target: input.select2-search__field
, key: "Process", charCode: 0, keyCode: 229 }
scryfall-4549d4966d4f9695e0ba3cdac1a9eacfad77209e9708e6a8681eb2fbaf6685be.js:formatted:10205
15:52:07.108
keydown { target: input.select2-search__field
, key: "Process", charCode: 0, keyCode: 229 }
scryfall-4549d4966d4f9695e0ba3cdac1a9eacfad77209e9708e6a8681eb2fbaf6685be.js:formatted:6038
15:52:07.112
input { target: input.select2-search__field
, isTrusted: true, isComposing: true, inputType: "insertCompositionText", data: "Se", view: Window, detail: 0, layerX: 0, layerY: 0, which: 0, … }
scryfall-4549d4966d4f9695e0ba3cdac1a9eacfad77209e9708e6a8681eb2fbaf6685be.js:formatted:6038
15:52:07.337
focus { target: input.select2-search__field
, isTrusted: true, view: Window, detail: 0, layerX: 0, layerY: 0, which: 0, rangeParent: Restricted, rangeOffset: 2, SCROLL_PAGE_UP: -32768, … }
scryfall-4549d4966d4f9695e0ba3cdac1a9eacfad77209e9708e6a8681eb2fbaf6685be.js:formatted:7140
15:52:07.357
keyup { target: input.select2-search__field
, key: "Process", charCode: 0, keyCode: 229 }
scryfall-4549d4966d4f9695e0ba3cdac1a9eacfad77209e9708e6a8681eb2fbaf6685be.js:formatted:10205
15:52:07.359
keyup { target: input.select2-search__field
, key: "Process", charCode: 0, keyCode: 229 }
scryfall-4549d4966d4f9695e0ba3cdac1a9eacfad77209e9708e6a8681eb2fbaf6685be.js:formatted:10205
15:52:08.307
keydown { target: input.select2-search__field
, key: "Process", charCode: 0, keyCode: 229 }
scryfall-4549d4966d4f9695e0ba3cdac1a9eacfad77209e9708e6a8681eb2fbaf6685be.js:formatted:6038
15:52:08.310
input { target: input.select2-search__field, isTrusted: true, isComposing: false, inputType: "deleteContentBackward", view: Window, detail: 0, layerX: 0, layerY: 0, which: 0, rangeParent: #text
, … }
scryfall-4549d4966d4f9695e0ba3cdac1a9eacfad77209e9708e6a8681eb2fbaf6685be.js:formatted:6038
15:52:08.909
focus { target: input.select2-search__field, isTrusted: true, view: Window, detail: 0, layerX: 0, layerY: 0, which: 0, rangeParent: #text
, rangeOffset: 55, SCROLL_PAGE_UP: -32768, … }
scryfall-4549d4966d4f9695e0ba3cdac1a9eacfad77209e9708e6a8681eb2fbaf6685be.js:formatted:7140
15:52:08.912
input { target: input.select2-search__field
, isTrusted: true, isComposing: true, inputType: "insertCompositionText", data: "Sc", view: Window, detail: 0, layerX: 0, layerY: 0, which: 0, … }
scryfall-4549d4966d4f9695e0ba3cdac1a9eacfad77209e9708e6a8681eb2fbaf6685be.js:formatted:6038
15:52:09.089
focus { target: input.select2-search__field
, isTrusted: true, view: Window, detail: 0, layerX: 0, layerY: 0, which: 0, rangeParent: Restricted, rangeOffset: 3, SCROLL_PAGE_UP: -32768, … }
scryfall-4549d4966d4f9695e0ba3cdac1a9eacfad77209e9708e6a8681eb2fbaf6685be.js:formatted:7140
15:52:09.093
keyup { target: input.select2-search__field
, key: "Process", charCode: 0, keyCode: 229 }
scryfall-4549d4966d4f9695e0ba3cdac1a9eacfad77209e9708e6a8681eb2fbaf6685be.js:formatted:10205
15:52:09.096
keyup { target: input.select2-search__field
, key: "Process", charCode: 0, keyCode: 229 }
scryfall-4549d4966d4f9695e0ba3cdac1a9eacfad77209e9708e6a8681eb2fbaf6685be.js:formatted:10205
15:52:10.286
keydown { target: input.select2-search__field
, key: "Process", charCode: 0, keyCode: 229 }
scryfall-4549d4966d4f9695e0ba3cdac1a9eacfad77209e9708e6a8681eb2fbaf6685be.js:formatted:6038
15:52:10.290
input { target: input.select2-search__field, isTrusted: true, isComposing: false, inputType: "deleteContentBackward", view: Window, detail: 0, layerX: 0, layerY: 0, which: 0, rangeParent: #text
, … }
scryfall-4549d4966d4f9695e0ba3cdac1a9eacfad77209e9708e6a8681eb2fbaf6685be.js:formatted:6038
15:52:10.459
focus { target: input.select2-search__field, isTrusted: true, view: Window, detail: 0, layerX: 0, layerY: 0, which: 0, rangeParent: #text
, rangeOffset: 55, SCROLL_PAGE_UP: -32768, … }
scryfall-4549d4966d4f9695e0ba3cdac1a9eacfad77209e9708e6a8681eb2fbaf6685be.js:formatted:7140
15:52:10.462
input { target: input.select2-search__field
, isTrusted: true, isComposing: true, inputType: "insertCompositionText", data: "Se", view: Window, detail: 0, layerX: 0, layerY: 0, which: 0, … }
scryfall-4549d4966d4f9695e0ba3cdac1a9eacfad77209e9708e6a8681eb2fbaf6685be.js:formatted:6038
15:52:10.592
focus { target: input.select2-search__field
, isTrusted: true, view: Window, detail: 0, layerX: 0, layerY: 0, which: 0, rangeParent: Restricted, rangeOffset: 4, SCROLL_PAGE_UP: -32768, … }
scryfall-4549d4966d4f9695e0ba3cdac1a9eacfad77209e9708e6a8681eb2fbaf6685be.js:formatted:7140
15:52:10.595
keyup { target: input.select2-search__field
, key: "Process", charCode: 0, keyCode: 229 }
scryfall-4549d4966d4f9695e0ba3cdac1a9eacfad77209e9708e6a8681eb2fbaf6685be.js:formatted:10205
15:52:10.597
keyup { target: input.select2-search__field
, key: "Process", charCode: 0, keyCode: 229 }
scryfall-4549d4966d4f9695e0ba3cdac1a9eacfad77209e9708e6a8681eb2fbaf6685be.js:formatted:10205
15:52:11.244
keydown { target: input.select2-search__field
, key: "Process", charCode: 0, keyCode: 229 }
scryfall-4549d4966d4f9695e0ba3cdac1a9eacfad77209e9708e6a8681eb2fbaf6685be.js:formatted:6038
15:52:11.246
input { target: input.select2-search__field, isTrusted: true, isComposing: false, inputType: "deleteContentBackward", view: Window, detail: 0, layerX: 0, layerY: 0, which: 0, rangeParent: #text
, … }
scryfall-4549d4966d4f9695e0ba3cdac1a9eacfad77209e9708e6a8681eb2fbaf6685be.js:formatted:6038
15:52:11.373
focus { target: input.select2-search__field, isTrusted: true, view: Window, detail: 0, layerX: 0, layerY: 0, which: 0, rangeParent: #text
, rangeOffset: 55, SCROLL_PAGE_UP: -32768, … }
scryfall-4549d4966d4f9695e0ba3cdac1a9eacfad77209e9708e6a8681eb2fbaf6685be.js:formatted:7140
15:52:11.376
input { target: input.select2-search__field
, isTrusted: true, isComposing: true, inputType: "insertCompositionText", data: "St", view: Window, detail: 0, layerX: 0, layerY: 0, which: 0, … }
scryfall-4549d4966d4f9695e0ba3cdac1a9eacfad77209e9708e6a8681eb2fbaf6685be.js:formatted:6038
15:52:11.556
focus { target: input.select2-search__field
, isTrusted: true, view: Window, detail: 0, layerX: 0, layerY: 0, which: 0, rangeParent: Restricted, rangeOffset: 5, SCROLL_PAGE_UP: -32768, … }
scryfall-4549d4966d4f9695e0ba3cdac1a9eacfad77209e9708e6a8681eb2fbaf6685be.js:formatted:7140
15:52:11.558
keyup { target: input.select2-search__field
, key: "Process", charCode: 0, keyCode: 229 }
scryfall-4549d4966d4f9695e0ba3cdac1a9eacfad77209e9708e6a8681eb2fbaf6685be.js:formatted:10205
15:52:11.560
keyup { target: input.select2-search__field
, key: "Process", charCode: 0, keyCode: 229 }
scryfall-4549d4966d4f9695e0ba3cdac1a9eacfad77209e9708e6a8681eb2fbaf6685be.js:formatted:10205

I get some weird deletecontent backward and some insertcompositiontext

@makotokato would you have a hint on what to do here?

makotokato · 2020-04-27T17:16:20Z

I guess that this is GeckoView bug. When text suggestion on IME is enabled, this will occur. JavaScript on Web site will update input.value, then Gecko commits IME text. But it causes a mismatch of caret position for IME and Gecko.

So this won't occurs when GBaord (and any IMEs) turns off text suggestion.

karlcow · 2020-04-28T00:58:37Z

Close as duplicate of https://bugzilla.mozilla.org/show_bug.cgi?id=1633621

lock · 2020-05-05T22:48:00Z

This issue has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue at https://webcompat.com/issues/new if you are experiencing a similar problem.

anonymousbot added this to the needstriage milestone Jan 25, 2020

anonymousbot added browser-firefox engine-gecko The browser uses the Gecko rendering engine form-v2-experiment type-webrender-enabled Firefox webrender engine pref labels Jan 25, 2020

softvision-oana-arbuzov added browser-fenix and removed browser-firefox labels Jan 27, 2020

cipriansv changed the title ~~scryfall.com - site is not usable~~ scryfall.com - Typing is faulty Jan 27, 2020

cipriansv added the severity-important A non-core broken piece of functionality, not behaving the way you would expect. label Jan 27, 2020

cipriansv modified the milestones: needstriage, needsdiagnosis Jan 27, 2020

miketaylr changed the title ~~scryfall.com - Typing is faulty~~ scryfall.com - letters appear in wrong order, or don't appear when using advanced search Apr 15, 2020

webcompat-bot modified the milestones: needsdiagnosis, duplicate Apr 28, 2020

webcompat-bot closed this as completed Apr 28, 2020

lock bot locked as resolved and limited conversation to collaborators May 5, 2020

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

scryfall.com - letters appear in wrong order, or don't appear when using advanced search #47822

scryfall.com - letters appear in wrong order, or don't appear when using advanced search #47822

BrandonWade commented Jan 25, 2020 •

edited by miketaylr

Loading

cipriansv commented Jan 27, 2020

BrandonWade commented Jan 29, 2020

miketaylr commented Apr 15, 2020

karlcow commented Apr 27, 2020

karlcow commented Apr 27, 2020

makotokato commented Apr 27, 2020

karlcow commented Apr 28, 2020

lock bot commented May 5, 2020

scryfall.com - letters appear in wrong order, or don't appear when using advanced search #47822

scryfall.com - letters appear in wrong order, or don't appear when using advanced search #47822

Comments

BrandonWade commented Jan 25, 2020 • edited by miketaylr Loading

cipriansv commented Jan 27, 2020

BrandonWade commented Jan 29, 2020

miketaylr commented Apr 15, 2020

karlcow commented Apr 27, 2020

karlcow commented Apr 27, 2020

makotokato commented Apr 27, 2020

karlcow commented Apr 28, 2020

lock bot commented May 5, 2020

BrandonWade commented Jan 25, 2020 •

edited by miketaylr

Loading