Custom anchor target for Autocomplete

[jalendport]

What component (if applicable)

• URL for category: https://tailwindcss.com/plus/ui-blocks/documentation/autocomplete
• Component name: Autocomplete

Is there a way to set a custom anchor target for the el-options for an Autocomplete block? I have some other elements in my el-autocomplete element, and I don't want the el-options to cover them up. Currently, it seems like the el-options popover is anchored to the input, and I'd like to configure it so it is anchored to the el-autocomplete instead. What I'm trying to achieve is how the Select block works; no matter what you add to the el-select, the el-options never covers it up because the popover is anchored to the el-select. Thanks!

[philipp-spiess]

Hey! What we've done in this case is that the <input> is larger than the text editable area so that e.g. a chevron icon could overlay the input. Is that something that would work in your case? See: https://tailwindcss.com/plus/ui-blocks/application-ui/forms/comboboxes#component-886412bdec54790d0c35bb5a09086c9a

The autocomplete component is modeled after the native <datalist> element so it's thought of enhancing a text input field. Curious to learn how you'd like to use it! I'm asking mainly because I wonder if you're using it as a searchable select which might require a different pattern instead!

[jalendport]

@philipp-spiess yeah, I'm basically using it as a searchable multi-select 😅

I'm storing the data for which items are selected in my own place, so it's as simple as hooking into the @change on the el-autocomplete, grabbing the current value, clearing the input, and re-focusing it. Selected items are being displayed as children of the el-autocomplete element, which is why I'd rather the popover be anchored to that element and not the input.

Is there a better way to do this? I'd love to rely as much as possible on Elements, because it saves me the need from having to get too deep into the weeds on building this stuff custom.

[philipp-spiess]

@jalendport Yeah I see, hmm. We don't have a better way to do this right now (i.e no built-in searchable multi-select) – but it's something we might consider in the future!

In your example, do you think it's possible to position the input so that it spans the full width somehow and then use padding-right in case you don't want text underneath the caret? So something like this:

That way it should be possible to position the dropdown with some margin/padding and using --anchor-gap.