Show items for autosuggest textbox

I am trying to replace my selectboxes with autosuggestion textboxes. But I can’t seem to figure out how the autosuggest works. My property panel displays a textbox, but it doesn’t suggest any values when entering text. A selectbox has a selectOptions property with the available values, and I was wondering if the autosuggest textbox had the same kind of property. My selectbox looked like this:

group.entries.push(entryFactory.selectBox(translate, {
      id: 'component',
      description: '',
      label: 'Component',
      selectOptions: selectComponents,
      modelProperty: 'component'
    }));

And right now my autoSuggest looks like this, but doesn’t work:

group.entries.push(entryFactory.autoSuggest(translate, {
      id: 'component',
      description: '',
      label: 'Component',
      modelProperty: 'component',
      getItems: () => {return components.map(variable => {return variable.name})}
    }))

What I can see immediately is that your autoSuggest textbox is missing a canSuggest control. Given the only place the properties panel is currently using it, it’s needed to indicate whether a suggestion can take place on the current position.

Unfortunately, the current default seems to be false, so I think you need to at least add something like

group.entries.push(entryFactory.autoSuggest(translate, {
  ...
  canSuggest: () => { return true; }
}));

If this does not work, please share your setup inside a CodeSandbox so we can inspect it in a deeper manner.

1 Like

Do you know if it’s also possible to display suggestions before typing?
Right now I have to enter the first letter in order to display the suggestion list, but it would be nice if it displayed the suggestion list when the textbox is focused. So it would just show the options alphabetically for example.

Do you know if it’s also possible to display suggestions before typing?

Apparently, the suggestion will be triggered on input events, so seems like it needs to be typed at least once.

What you are describing reads like a different type of selection box that is not supported right now and you’d need to create it on your own.