Polaris Web Components - Custom Autocomplete Component

Polaris
1

I need to recreate the Autocomplete component from the React package.

I ran across this in the limitations of the select component.

| The component doesn’t include search or filtering functionality. For option lists where merchants need to search (like country selection with 200+ countries), implement a custom autocomplete or searchable dropdown pattern.

Okay great, I considered using a s-search-field with an s-popover component. However s-popover tells us.

| Popovers can only be opened by user interaction, not programmatically on page load.

So we can’t open s-popover programmatically? How do we replicate the Combobox / Autocomplete functionality? There is no commandFor prop for s-search-field or s-text-field.

Has anyone been able to figure this out?

2

Okay I think I figured out a solution.

I wrapped an s-clickable component with a commandFor that targets the popover around my s-search-field.

It seems to be working so far.

3

There’s still quite a bit of limitations surrounding this component.

Keyboard navigation doesn’t really work. Since the component is on a clickable, I find that it inconsistently hides and shows. Also, the popover component (with clickables inside) is not accessible via the keyboard like the old react autocomplete component was.

The old Autocomplete component would allows the user to select items via the arrow keys, this doesn’t seem to be supported - working on rolling my own version of this now…

Can we programatically focus or select input elements in web components? if I use a ref and try to focus() the web component, that function doesn’t trickle down to the actual input element. So the parent is focused, but I can’t actually select the input?

I am building a form and would love for the focus to automatically move to the next field when certain actions are taken by the user.

4

So, what you’ve concluded is that the web components aren’t able to do this pattern cleanly, or at all? But the old React components worked?

Asking, because that has been my frustration for the past couple of weeks really trying to lean into these.

Honestly, they are just not ready.

5

Ya they just aren’t ready.

Honestly, the Web Components are a mess and the DX around them are a pain.

  • The @GovRayt/polaris-types package is full of missing props, and nothing is exported for us to extend, so this makes it really hard to extend these components.
  • We get a little bit of events exposed for us to hook into, but we can’t set things like tab-index or hook into events on child elements in the web component
  • No css style tokens are exposed for us to use, so we can’t even build a custom element that looks like Polaris

I tried moving my stuff over to web components and lost a week fighting it. It works when you have something simple, but as soon as you want to reach outside the box they fall apart.

1 Like