defaultValue prop does not work on Autocomplete

[ImLuze]

Setting the defaultValue prop on an <Autocomplete /> component does nothing. At first glance it looks like that prop is not being used inside the Autocomplete.jsx file at the moment, except for assigning it to the state.

To Reproduce

Steps to reproduce the behavior:

1. Render an Autocomplete component with the defaultValue prop
2. Notice how the component still displays the placeholder by default.

Expected behaviour

Expected the Autocomplete component to display the defaultValue prop by default

OS (please complete the following information):

• Browser [safari, chrome]
• Version [14.1, 92.0]

[jsebrech]

The defaultValue property is picked up by AutoComplete already. You can see it in action in the live examples: https://digipolisantwerp.github.io/antwerp-ui_react/#autocomplete

Can you give more details of exactly how you're using AutoComplete so that defaultValue is not picked up?

By the way, the exact code that assigns defaultValue can be found in these files:

• For sync mode, used when setting the items property: https://github.com/digipolisantwerp/antwerp-ui_react/blob/master/packages/autocomplete/src/models/SyncSearchMode.js#L11
• For async mode, used when setting the asyncItems property: https://github.com/digipolisantwerp/antwerp-ui_react/blob/master/packages/autocomplete/src/models/AsyncSearchMode.js#L29

The logic that sends it to the input field depends on the selection mode:

• For single selection mode: https://github.com/digipolisantwerp/antwerp-ui_react/blob/master/packages/autocomplete/src/models/SingleSelectionMode.js#L12
• For multiple selection mode: https://github.com/digipolisantwerp/antwerp-ui_react/blob/master/packages/autocomplete/src/models/MultipleSelectionMode.js#L11

[ImLuze]

Hi,

Thanks for the respons and sorry for my late answer. I dug through our code a bit more and tried to isolate the issue:
I created a CodeSandbox reproduction: CodeSandbox.

Issues I've found

I managed to bring it down to 2 core issues:

1. Async defaultValue

We currently need to do an async request to get the data which we use as defaultValue for the Autocomplete component. This seems to be the main issue. I can work around this by updating the components key prop when the defaultValue loads in. This causes the component to force-remount. Although it's not ideal as it does reset the components internal state.

2. defaultValue not matching any item value.

One of our use cases allows the user to filter a list based on the name of a person. We use an Autocomplete component with a list of all people they can filter by. Being able to autocomplete this helps with spelling difficult names.

But if someone only types in a first name or a last name, instead of the full name. Then the query doesn't match any of the values of the provided items and the default value does not show up.

---

Are these issues that can be fixed on our end?

[jsebrech]

Indeed, this looks like a bug. If defaultValue is undefined and later defined when the user has not picked a value yet, the AutoComplete should update itself, but it does not.

You can work around it by reinitializing the component when defaultValue changes:

  useEffect(() => {
    cmp.searchMode.initialize();
  }, defaultValue);