ampproject / amphtml

The AMP web component framework.
https://amp.dev
Apache License 2.0
14.89k stars 3.89k forks source link

amp-autocomplete doesn't work in Gmail client #39809

Open Shivraj97 opened 9 months ago

Shivraj97 commented 9 months ago

Description

amp-autocomplete dropdown list doesn't render in Gmail(checked in both incognito and without any extension). The same amp-autocomplete component list is rendered in the amp official playground and gmail amp playground. However, it doesn't get displayed in actual Gmail when I send the email using my Node.js but it gets displayed when I shoot the email from the Gmail amp playground. 4 scenarios - 3 ✅ 1 ❌ 1) InAMP playground (https://playground.amp.dev/) ✅

image

2) In Gmail AMP playground (https://amp.gmail.dev/playground/) ✅

image

3) In Gmail client sent via Gmail AMP playground ✅

image

4) In Gmail client sent via Nodemailer(Node.js) ❌

image

This is the amp-autocomplete code

              <amp-autocomplete min-characters="1" src="https://amp.dev/documentation/examples/api/autosuggest/characters" query="q">
                <input class="search" type="search" name="account_id" />
                <template type="amp-mustache">
                  <div>{{name}}</div>
                </template>
              </amp-autocomplete>

I am using the same API endpoint https://amp.dev/documentation/examples/api/autosuggest/characters for all 4 cases, so I don't know why it's not getting rendered in Gmail when I am shooting the email from my backend

Reproduction Steps

1) AMP playground (https://playground.amp.dev/)

2) Gmail AMP playground (https://amp.gmail.dev/playground/)

3) Create a Node.js app and use Nodemailer for sending emails.

Relevant Logs

VM8981:21 Could not parse event origin URL null TypeError: Failed to construct 'URL': Invalid URL
    at <anonymous>:19:31
(anonymous) @ VM8981:21
postMessage (async)
n.postMessage @ amp-viewer-integration-0.1.js:2
n.S @ amp-viewer-integration-0.1.js:2
n.sendRequest @ amp-viewer-integration-0.1.js:2
(anonymous) @ v0.js:2
(anonymous) @ v0.js:2
c @ v0.js:2
i.ut @ v0.js:2
i.sendMessage @ v0.js:2
i.flush @ v0.js:2
i.Sm @ v0.js:2
(anonymous) @ v0.js:2
u @ v0.js:2
setTimeout (async)
u @ v0.js:2
3 [amp-autocomplete] Expected a "data-value" or "data-disabled" attribute on the rendered template item. [object HTMLDivElement]

Browser(s) Affected

No response

OS(s) Affected

No response

Device(s) Affected

No response

AMP Version Affected

No response

Shivraj97 commented 9 months ago

Hi guys, may I please know the status of this bug. Is it even a bug or am I doing something wrong.