ampproject / ampproject/amphtml

Inconsistent rendering of amp-autocomplete

Open
#38,471 1 comment 0 reactions 0 assignees View on GitHub
P3: When Possible Stale Type: Bug
Dominant language
JavaScript
Stars
14.9k
Forks
4.1k
PR merge metrics
No merged PRs in 30d

Description

### Description

Amp-autocomplete renders the associated input field differently, depending on browser and/or if it uses amp-moustache. In chromium based browsers the close button (x) is sometimes displayed inside the INPUT element (if autocomplete uses amp-moustache template), while in Firefox it is never displayed.

Also I have been unable to find a way NOT to display the close button, as it interferes with a custom icon used in input fields I am working on.

### Reproduction Steps

https://amp.dev/documentation/examples/components/amp-autocomplete/?format=websites

Compare your example page in Chrome and Firefox. In Firefox the (x) close button is never displayed, while in Chrome it's sometimes displayed, sometimes not.

Chromium (106.0.5249.91):
![chrome1](https://user-images.githubusercontent.com/36624624/194024718-956dd760-17b1-44e6-8b93-9efd9b1bc0fe.png)
![chrome2](https://user-images.githubusercontent.com/36624624/194024726-8bfedf59-bbec-461e-8934-88d206c1300d.png)
![chrome3](https://user-images.githubusercontent.com/36624624/194024730-5f94f41a-6c52-4fa6-8fd3-01bead40e134.png)
![chrome4](https://user-images.githubusercontent.com/36624624/194024734-9c3a005e-7b61-4909-b6e5-c80917044fc9.png)

Firefox (105.0.1):
![firefox1](https://user-images.githubusercontent.com/36624624/194024744-f3554b2b-08b3-4104-a8f2-0a8761f9f9e8.png)
![firefox2](https://user-images.githubusercontent.com/36624624/194024747-4939e76b-6e93-4474-931d-7058dde80d55.png)

### Relevant Logs

_No response_

### Browser(s) Affected

Chrome, Firefox

### OS(s) Affected

Linux

### Device(s) Affected

_No response_

### AMP Version Affected

2209142312000

Contributor guide

Open the contributing guide

Research direction

Start with the amp-autocomplete example at https://amp.dev/documentation/examples/components/amp-autocomplete/?format=websites and reproduce the input rendering in Chrome and Firefox on Linux. Investigate the differing close-button behavior, including the amp-moustache case and the custom-icon conflict; the issue is resolved when rendering is consistent and the close button can be omitted.

Written by the indexing model from the issue text.

Assessment

Tech stack
javascript
Domain
frontend
Issue type
Bug
Difficulty
4/5
Estimated time
3-5 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
35/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.