Ways to render (one or more) default items with an empty autocomplete field?

[Josh68]

Hello.

We have a proposal to add a location autocomplete in MCT, to work as follows:

• When the input is empty, on focus, show two results (items): 1) a prompt to allow geolocation and use a current location and 2) a current address (from DB) to use
• When the user starts typing in the field, those initial items should be cleared and our code will call an endpoint to get addresses (and the autocomplete work as intended)

Is there a way (or are there ways) with Autocomplete as it is to implement this behavior? OTOH, would it be possible to accomplish with more than one component, rendering one or the other as the user begins to input characters (less than optimal, but maybe a possibility)? Or should we be looking for a 3rd-party solution even (least desirable)?

Thanks

[pwolfert]

@Josh68, I think the current autocomplete is totally capable of such behavior. If you supply those default items through items, the autocomplete should render them in the list whenever the autocomplete gets focus and hide them when it doesn't. Once you have input, you can replace those items with whatever you need to. Let me know if you want to hop on a call and prototype together.

[Josh68]

Thanks, @pwolfert. I actually tried this as a POC on one of our pages that uses Autocomplete, and it didn't work. I also tried adding a focus listener and using loadingMessage, and that might be a workaround, although I'd have to simulate a loading state. The issue with just pre-populating items is that the input won't render them unless there's a text match in the input, or at least that's what I seem to have found. If I'm approaching it wrong and you can simulate this behavior, let me know. Also, yes, I'll ping you tomorrow to look at it with you.

[Josh68]

Confirmed that this should work OOB with the current DS, and with a minor workaround on older versions, in which the Autocomplete is based on Downshift