2004106 - duckduckgo.com - Cannot delete search field text

Status: UNCONFIRMED

(Web Compatibility :: Site Reports, defect, P2)

Description

[Kate Peterson]

User Agent: Firefox/
145.0.2 (Build #2016128151), c91eb2b65acc555204a0b7f5fbf95b66e9ac5493
GV: 145.0.2-20251124145406
AS: 145.0.2
OS: Android 16

Steps to reproduce:

Navigated back to the search screen from a page I had selected from it
Tried to delete text in the search field

Actual results:

Text keeps reappearing
X button refreshes text rather than deletes it

Expected results:

Deleted text so I could start a new search

Comment 1

[Kate Peterson]

I couldn't add a comment on the prior ticket closed 9 days ago marking this as something folk couldn't reproduce, but it's something I'm still seeing. I added more details on which Firefox build I'm on, and I seem to be on a newer Android version than the other person.

Comment 2

[Hsin-Yi Tsai (she/her) [:hsinyi]]

It's intermittent, but once you got to reproduce it once, you will see it very easily.

It doesn't look like Android-only; we saw this on Desktop, MacOS and Windows.

Comment 3

[Edgar Chen [:edgar]]

I can reproduce this, and also on Desktop.

My STR:

• Go to https://duckduckgo.com/
• Type "foo" in search field and search
• Click the first link of search result
• Navigate back via back button
• press delete key to delete text

Actually result:
When the last character, "f" in this case, is deleted, original text shows up again.

Expected result:
Whole text can be deleted.

Comment 4

[Jeff Muizelaar [:jrmuizel]]

"foo" gets put back in via:

      function ee(e, t, r) {
        'number' === t &&
        $(e.ownerDocument) === e ||
        (
          null == r ? e.defaultValue = '' + e._wrapperState.initialValue : e.defaultValue !== '' + r &&
          (e.defaultValue = '' + r)
        )
      }

Comment 5

[Jeff Muizelaar [:jrmuizel]]

The site is using React.

Some relevant excerpts:

                                      id: 'search_form_input',
                                      ref: x,
                                      name: 'q',
                                      className: Up,
                                      onChange: e => {
                                        if (Y && n !== e.currentTarget.defaultValue) {
                                          if (
                                            '' !== e.currentTarget.defaultValue &&
                                            e.currentTarget.value.startsWith(e.currentTarget.defaultValue)
                                          ) {
                                            const t = n + e.currentTarget.value.slice(e.currentTarget.defaultValue.length);
                                            o(t)
                                          }
                                        } else o(e.currentTarget.value)
                                      },

          let {
            data: {
              navigationValue: b,
              value: E,
              lastEventType: C
            },
            inputRef: x,
            state: z,
            transition: k,
            listboxId: P,
            autocompletePropRef: L,
            openOnFocus: T,
            isExpanded: D,
            ariaLabel: V,
            ariaLabelledby: H,
            persistSelectionRef: _,
            isControlledRef: F
          }
          = l.useContext(q);

It looks like the combobox implementation is https://github.com/reach/reach-ui/blob/b3d94d22811db6b5c0f272b9a7e2e3c1bb4699ae/packages/combobox/src/reach-combobox.tsx#L98

Comment 6

[Jeff Muizelaar [:jrmuizel]]

We can probably figure out what's going on here by logging in the reducer function:

var F = (e, t) => {
        let r = w(w({
        }, e), {
        }, {
          lastEventType: t.type
        });
        switch (t.type) {
          case I:
          case O:
            return w(w({
            }, r), {
            }, {
              navigationValue: null,
              value: t.value
            });
...

Comment 7

[Jeff Muizelaar [:jrmuizel]]

FWIW, it looks like Chrome is not hitting their equivalent to the BFCache, so it could be that this has something to do with the state the page is in after coming back from BFCache.

Comment 8

[Kagami Rosylight [:saschanaz] (they/them)]

DumpJSStack() gives me:

0 set(e = ""foo"") ["https://duckduckgo.com/dist/wpmv.e859a5bf05c95ad5b38f.js":2:453733]
    this = [object HTMLInputElement]
1 X(e = "[object HTMLInputElement]", t = "[object Object]") ["https://duckduckgo.com/dist/wpmv.e859a5bf05c95ad5b38f.js":2:454875]
2 mc(e = "[object Object]", t = "[object Object]") ["https://duckduckgo.com/dist/wpmv.e859a5bf05c95ad5b38f.js":2:541211]
3 pc(e = "[object Object]", t = "[object Object]") ["https://duckduckgo.com/dist/wpmv.e859a5bf05c95ad5b38f.js":2:540411]
4 mc(e = "[object Object]", t = "[object Object]") ["https://duckduckgo.com/dist/wpmv.e859a5bf05c95ad5b38f.js":2:540524]
5 pc(e = "[object Object]", t = "[object Object]") ["https://duckduckgo.com/dist/wpmv.e859a5bf05c95ad5b38f.js":2:540411]
6 mc(e = "[object Object]", t = "[object Object]") ["https://duckduckgo.com/dist/wpmv.e859a5bf05c95ad5b38f.js":2:540721]
7 pc(e = "[object Object]", t = "[object Object]") ["https://duckduckgo.com/dist/wpmv.e859a5bf05c95ad5b38f.js":2:540411]
8 mc(e = "[object Object]", t = "[object Object]") ["https://duckduckgo.com/dist/wpmv.e859a5bf05c95ad5b38f.js":2:540721]
9 pc(e = "[object Object]", t = "[object Object]") ["https://duckduckgo.com/dist/wpmv.e859a5bf05c95ad5b38f.js":2:540411]

      function X(e, t) {
        Q(e, t);
        var r = U(t.value),
        n = t.type;
        if (null != r) 'number' === n ? (0 === r && '' === e.value || e.value != r) &&
        (e.value = '' + r) : e.value !== '' + r &&
        (e.value = '' + r);
         else if ('submit' === n || 'reset' === n) return void e.removeAttribute('value');
        t.hasOwnProperty('value') ? ee(e, t.type, r) : t.hasOwnProperty('defaultValue') &&
        ee(e, t.type, U(t.defaultValue)),
        null == t.checked &&
        null != t.defaultChecked &&
        (e.defaultChecked = !!t.defaultChecked)
      }

Chrome hits the same function. The difference is that t.value gives "foo" on Firefox while it gives "f" and "" on Chrome (it hits multiple times).

Comment 9

[Kagami Rosylight [:saschanaz] (they/them)]

React.version says 18.3.1.

X seems ReactDOMInputUpdateWrapper per the source: https://github.com/facebook/react/blob/v18.3.1/packages/react-dom/src/client/ReactDOMComponent.js#L836-L841

Not super useful info though.

Comment 10

[Jeff Muizelaar [:jrmuizel]]

It seems like unstable_scheduleCallback is not calling postMessage in the bad case.

Comment 11

[Jeff Muizelaar [:jrmuizel]]

and that seems to be because isHostCallbackScheduled but never gets set back to false.

Comment 12

[Jeff Muizelaar [:jrmuizel]]

But I can't figure out why isHostCallbackScheduled gets set and not restored during the navigation to Wikipedia and back

Comment 13

[Jeff Muizelaar [:jrmuizel]]

It somehow getting set in between the pagehide and pageshow handlers.

Comment 14

[Jeff Muizelaar [:jrmuizel]]

Seems like it happens in the visibilitychange event.

Comment 15

[Jeff Muizelaar [:jrmuizel]]

It's happening via this handler:

        const [t,
        e] = (0, i.useState) (!0);
        return (0, i.useEffect) (
          (
            () => {
              const t = () => e(!document.hidden);
              return document.hidden &&
              t(),
              document.addEventListener('visibilitychange', t),
              () => {
                document.removeEventListener('visibilitychange', t)
              }
            }
          ),
          []

Comment 16

[Jeff Muizelaar [:jrmuizel]]

It seems like the cause is that the message sent on the MessageChannel during the visibilitychange event handler is dropped.

Comment 17

[Jeff Muizelaar [:jrmuizel]]

Attachment: Test case showing the port message being dropped

Comment 18

[Jeff Muizelaar [:jrmuizel]]

I get

Page startup
Received message: Hello from port1!
Document is now hidden
Sending message via port
Document is now visible
Received message: port message is hidden

In Chrome Canary after clicking on the link and going back.

Firefox gives, at least sometimes:

Page startup
Received message: Hello from port1!
Document is now hidden
Sending message via port
Document is now visible

Comment 19

[Jeff Muizelaar [:jrmuizel]]

It seems like maybe the cache headers on bugzilla are preventing the test case from hitting the BFCache in Firefox.

Comment 20

[Jeff Muizelaar [:jrmuizel]]

Attachment: Test case showing the port message being dropped

This version of the testcase works around a webkit bug.

In Chrome and Safari it now shows:

Page startup
Received message: Hello from port1!
Button clicked
Document is now hidden
Sending message via the port
Document is now visible
Received message: port message is hidden

Comment 21

[Jeff Muizelaar [:jrmuizel]]

Attachment: Test how many messages can be sent during document.visibiltyState == hidden

Chrome seems to have a limit of 1 million messages that can be queued while in document.visibiltyState == hidden. Safari does not have the same limit.