How to achieve autofill feature over antd select element?

Viewed 414

To help our users, need to make checkout faster and for the delivery address, the browser's autofill function is very helpful. Street address, region, city postal code are working with autofill but the country option is not. In input elements, google tags are fine but in select elements, we need to do something more.

Is anybody see this same issue?

reference: https://developers.google.com/web/updates/2015/06/checkout-faster-with-autofill

enter image description here

1 Answers

I was able to confirm that HTML autocomplete tag is not compatible with AntD's Select component implementation. I did, however, manage to put together a workaround that might suit your use case.

In short, I used a hidden Input component to take advantage of the browser's autocomplete feature, and onChange of the hidden Input, I programmatically set the value of the country Select component.

Please see the Stackblitz link below for a working example:

https://stackblitz.com/edit/antd-select-autocomplete-workaround?file=index.js

Update:

I submitted a bug report regarding this issue, but a maintainer replied that Select doesn't support autoComplete.

https://github.com/ant-design/ant-design/issues/25595

Related