Alter custom input option on select component

  1. My goal: Prefix "+" icon on custom option
  2. Issue: Unable to make new/custom option identical
  3. Steps I've taken to troubleshoot: Prefix "+" icon on custom option
  4. Additional info: (Cloud or Self-hosted, Screenshots)

refer SS below, where the last option is new (not available in data source)/custom input. we need to prepend it with + symbol

@retool_dev @system any update?

Hey @Arvind - thanks for reaching out and for your patience!

Currently, there's no native way to visually indicate that a particular option in the select dropdown is a custom option, which I agree would be a useful feature.

It's technically possible to engineer a workaround that augments the existing list of defined options with the current value of select.inputValue, but it's certainly not ideal. You can see an example of such an implementation here (76.1 KB). Hopefully something like that is sufficient, though!

Regardless, I'll document the context of this request internally and talk to the team about potentially adding it to the roadmap.

1 Like

@Darren Thank you for the update. However, it is important that we preserve the “+” symbol within the list. With some minor modifications, we were able to retain it, but unfortunately, the “+” symbol is then displayed as the input value or the selected option, which is not desirable. Your approach successfully prevents the symbol from appearing in the input or selected value, but the downside is that the “+” symbol disappears from the mapped list altogether in next iteration.

I am maintaining attribute custom:true on change event

{{ allSelectOptions.value.concat([{ value: select1.value, label: select1.value, custom: true }]) }}

@Darren any update?