1535985 - `<datalist>` HTML element should display autocompletion drop-down UI

Status: NEW

(GeckoView :: General, defect, P2)

Description

[Philip Lamb]

Attachment: screen_shot_2019-03-18_at_3.50.01_pm.jpg

Steps to Reproduce

• Navigate to https://webxr.sh/dropdowns#datalist.
• Press the <datalist> element (it looks like a default text field).
• When the keyboard appears, type the letters pe.

Observed behavior:

• No dropdown UI appears to show the children of the <datalist> element.

Expected behavior:

• Dropdown UI should display matching elements from datalist, as per e.g. Firefox desktop 66:

Comment 1

[Chris Peterson [:cpeterson]]

We should fix this for Fenix M4.

Does the datalist dropdown work in Fennec? Is this a regression in GeckoView?

Comment 2

[Makoto Kato [:m_kato]]

(In reply to Chris Peterson [:cpeterson] from comment #1)

We should fix this for Fenix M4.

Does the datalist dropdown work in Fennec? Is this a regression in GeckoView?

Yes, Fennec shows dropdown list, but GV doesn't.

Comment 3

[Chris Peterson [:cpeterson]]

67=wontfix. Fenix MVP will use GeckoView 68, so we don't need to uplift this fix to 67 Beta.

Comment 4

[David Bolter [:davidb] (NeedInfo me for attention)]

Hi Makoto, any idea why GV is broken here?

Comment 5

[Makoto Kato [:m_kato]]

https://searchfox.org/mozilla-central/rev/6dab6dad9cc852011a14275a8b2c2c03ed7600a7/mobile/android/modules/FormAssistant.jsm#275

Fennec uses this method, but GV doesn't use this JSM module.

Comment 6

[Makoto Kato [:m_kato]]

So we need to add API to pass the list to browser.

Comment 7

[Makoto Kato [:m_kato]]

https://treeherder.mozilla.org/#/jobs?repo=try&revision=c17b9b57606c29083442cad1cc6f6f42abe5c003

Comment 8

[Makoto Kato [:m_kato]]

Attachment: Bug 1535985 - Part 2. Add junit test for auto complete suggestion

Comment 9

[Makoto Kato [:m_kato]]

Attachment: Bug 1535985 - Part 3. GeckoView example supports <datalist> popup

This is example implementation for GeckoView example.

Depends on D32987

Comment 10

[Makoto Kato [:m_kato]]

Attachment: Bug 1535985 - Part 1. Add show/hide auto complete suggestion API

Fennec's auto complete support is implemented by native UI and desktop's one
is into toolkit with original UI.

Since GeckoView doesn't have own Android's layout, we need to expose APIs to
show and hide suggestion list.

• onShowAutoCompleteSuggestion to show suggestion list by <datalist>. And when updating value of input element or potion of it, this is also called
• onHideAutoCompleteSuggestion to hide this list

When selecting item of list, it has callback interface as AutoCompleteCallback.
If application wants to set value, call autoComplete method of this interface.

Comment 11

[Makoto Kato [:m_kato]]

https://treeherder.mozilla.org/#/jobs?repo=try&revision=ff498636dd6e8d2bb6d3a1c40c866c22d7896b00

Comment 12

[Chris Peterson [:cpeterson]]

Fenix MVP is going to release with or without this fix, so it's not technically a Fenix MVP blocker. I'll move this bug to a later Fenix milestone. Makoto says Fennec shows dropdown list, but GV doesn't.

Comment 13

[James Willcox (:snorp) ([e-mail]) (he/him)]

I think we should just have something in PromptDelegate to handle <datalist>, similar to what we have for <select>.

Comment 14

[Makoto Kato [:m_kato]]

(In reply to James Willcox (:snorp) ([e-mail]) (he/him) from comment #13)

I think we should just have something in PromptDelegate to handle <datalist>, similar to what we have for <select>.

Thanks, I will update it

Comment 15

[Chris Peterson [:cpeterson]]

I'm editing a bunch of GeckoView bugs. If you'd like to filter all this bugmail, search and destroy emails containing this UUID:

e88a5094-0fc0-4b7c-b7c5-aef00a11dbc9

Comment 16

[Emily Toop (:fluffyemily)]

Makoto, do you have any idea when the patches for this might land. I notice that they are already a year old. Fenix would like to see this issue resolved.

Comment 17

[Makoto Kato [:m_kato]]

(In reply to Emily Toop (:fluffyemily) from comment #16)

Makoto, do you have any idea when the patches for this might land. I notice that they are already a year old. Fenix would like to see this issue resolved.

I will try autofill framework based implementation, but I guess that most autofill service may not support this situation... After implanted, I research services.

Comment 18

[Eugen Sawin [:esawin]]

This is an old bug and the implementation no longer fits the latest GV API.
We have two GV APIs serving autofill/autocomplete situations:

1. The Autofill API for integration with Android's AutofillManager.
2. The Autocomplete API to expose Gecko autocomplete mechanics.

The datalist options are best exposed via the Autocomplete API, either as a generic string option (combined with form history later) or as a specific new option type.
We should not introduce a new API for it. Rendering the options should be delegated to the app, as with the rest of the autocomplete elements, for consistency (e.g, autocomplete selections are not going to be positioned relative to the input field).

However, this case differs from the other autocomplete situations since the options are provided by content. We might want to have a default implementation for this in GV in the case when the app doesn't implement the delegate.

Comment 19

[Makoto Kato [:m_kato]]

Attachment: WIP with autofill

Comment 20

[Makoto Kato [:m_kato]]

(In reply to Eugen Sawin [:esawin] from comment #18)

This is an old bug and the implementation no longer fits the latest GV API.
We have two GV APIs serving autofill/autocomplete situations:

1. The Autofill API for integration with Android's AutofillManager.

View.AUTOFILL_TYPE_LIST won't be supported most autofill services (I cannot find it). When I install custom autofill service using Google's sample + adding View.AUTOFILL_TYPE_LIST dump, autofill service can recognize it.

Comment 21

[Makoto Kato [:m_kato]]

We should not introduce a new API for it. Rendering the options should be delegated to the app, as with the rest of the autocomplete elements, for consistency (e.g, autocomplete selections are not going to be positioned relative to the input field).

Hmm, we should port custom element version of popup to GV if we don't add an API?

Comment 22

[Eugen Sawin [:esawin]]

(In reply to Makoto Kato [:m_kato] from comment #21)

We should not introduce a new API for it. Rendering the options should be delegated to the app, as with the rest of the autocomplete elements, for consistency (e.g, autocomplete selections are not going to be positioned relative to the input field).

Hmm, we should port custom element version of popup to GV if we don't add an API?

I've extended the Autocomplete API doc with a selection delegate callback for strings. We should be able to unify all string-based selections like form history and <datalist> with this.

Comment 23

[Makoto Kato [:m_kato]]

We should not introduce a new API for it. Rendering the options should be delegated to the app, as with the rest of the autocomplete elements, for consistency (e.g, autocomplete selections are not going to be positioned relative to the input field).

Since browser level doesn't scan DOM tree, browser doesn't know suggestions from <datalist> . So I think that we need any API (previous fix, https://phabricator.services.mozilla.com/D32989 has onShowAutoCompleteSuggestion etc for it) to show/hide popup or notify browser of suggestions by <datalist>. from GV. Login data and form history can be fetched from browser's storage (via Firefox sync data) without DOM tree. But <datalist>'s suggestion items are in DOM tree.

Firefox desktop uses custom element to popup items, then popup UX uses XUL element in browser's XUL for popup. But GV doesn't have it, you know. So browser side requires UI implementation like prompt delegate.

I've extended the Autocomplete API doc with a selection delegate callback for strings. We should be able to unify all string-based selections like form history and <datalist> with this.

Gecko's autocomplete code uses index of item to fill item, but it will be OK to set string only. (After implementation is completed, I need some tests for compatibility)

Comment 24

[Makoto Kato [:m_kato]]

Android 11+ has new API for InlineSuggestions (https://developer.android.com/reference/android/view/inputmethod/InlineSuggestion), but no sample and no info except to class.

Comment 25

[firefox922]

I don't know whether this is the right place to ask for that, but in the meantime at firefox for android 88.1.2 the datalist bug is still present.
Is there any chance this issue got fixed?

Comment 26

[Karl Dubost💡 :karlcow]

setting webcompat priority to P2.
This is a major UI difference with other browsers and right now it is not very intuitive.
Note that chrome displays a drop-down on focus and Firefox nothing (on desktop).

Comment 27

[geral]

I just installed the version 90.1.1 build 2015820751 in android 8.1 and try the: https://w3schools.com/html/tryit.asp?filename=tryhtml5_datalist and still nothing happens. I am surprised how this basic feature of HTML5, defined several years ago, does not work in firefox.
Is there any workaround?

Comment 28

[geral]

I just tested with new 92.1.1 in android and the problem remains.

Comment 29

[Deebster]

Testing with version 94.1.1 build 2015842491 and it's still broken.

Is there a workaround or a fix in sight?

Comment 30

[Bastian]

Testing with version 95.2.0 build 2015851755 and the problem is still remains.

On a Smartphone with Android 11.

Can we have a hope that this issue will be fixed ?

Comment 31

[firefox922]

Testing with version 97.0.0-beta.6 and the problem is still remains.

On a Smartphone with Android 11.

Can we have a hope that this issue will be fixed ?

Comment 32

[Bastian]

Hi,
sorry, but this bug is still remains in FF V 97.0.0-beta.6
on Android 11 on my phone.

No data-list will be appear after input chars, like I do
on a PC.

Nothing will be happen.

Comment 35

[BugBot [:suhaib / :marco/ :calixte]]

The severity field for this bug is set to S4. However, the following bug duplicate has higher severity:

• Bug 1783594: S3

:m_kato, could you consider increasing the severity of this bug to S3?

For more information, please visit auto_nag documentation.

Comment 37

[Tom S [:evilpie]]

Hi! Are you still working on this?

Comment 39

[Makoto Kato [:m_kato]]

Although I have WIP, it isn't finished yet.

TODO items are

• We need a delegation implementation for autocomplete popup to Fenix/a-c (I have WIP)
• If Android is newer, we can/may use IME API to add suggestion into software keyboard
• Add autofill hint API (bug 1679248)

Comment 40

[Thomas Wisniewski [:twisniewski] [on PTO until Sep.9]]

Moving still-reproducing webcompat links to a new knowledge-base issue, bug 1891136.

Comment 41

[Calin Tanase]

The issue is still reproducible based on the webcompat reports:

• https://webcompat.com/issues/68171
• https://webcompat.com/issues/77692

Environment:
Operating system: OnePlus 6 A6000 (Android 11)
Browsers tested: Firefox Nightly 128.0a1-20240525201917 (Build #2016022983) / Firefox Release 126.0-20240509170740 / Chrome 125.0.6422.72

Note: Note reproducible on Chrome