CODEWITHSUNDEEP
emailgmailamp-form
coderX
coderX

Reputation: 223

AMP amp-autocomplete doesn't work in Gmail client

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/) ✅ enter image description here

  2. In Gmail AMP playground (https://amp.gmail.dev/playground/) ✅ enter image description here

  3. In Gmail client sent via Gmail AMP playground ✅ enter image description here

  4. In Gmail client sent via Nodemailer(Node.js) ❌ enter image description here

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]

Upvotes: 0

Views: 19

Answers (0)

Related Questions