Using an "advanced" dropdown to add (and automatically select) new entry to the list
Application Type
Reactive

Hi everyone,

I'm curious if anyone has had this requirement for Reactive apps (on OutSystems 11) before and what approach you followed. Let me just start by describing what I know/have tried before detailing the requirement further.

The standard Dropdown widget provided by the platform is very rigid in its functionality, as it reflects the corresponding HTML element. So there's no way of searching or in any way typing in a dropdown itself.

OutSystems UI provides us with a more feature-rich dropdown (Dropdown Search) that allows searching from the list interface and not directly from the part of the UI that is always shown (in the example below, the user can search for "A" by typing it in the Search input that shows on the dropdown list, but not from where it is currently displaying "Edward" -  we have to open the dropdown in order to be able to write).

Traditional Web applications have long had Input_AutoComplete from RichWidgets that would allow the same sort of behaviour by attaching to a regular Input widget, but here the user would type directly on the Input widget. This one doesn't look like a dropdown though. 

Where the Dropdown Search is client-side (the full list is stored client-side and manipulated via JavaScript behind the scenes), the Input_AutoComplete is server-side (the search-list is manipulated server-side and sent to the browser for display and selection only).

I'm also aware of Input AutoComplete Reactive (from OutSystems Labs) that hasn't seen any stable version since it was first created over a year ago and; ReactiveAutoComplete (from Steven Decock) that was last updated over a year ago. Both follow a similar approach to the Input_AutoComplete above, and also don't align with the expected user interface of a Dropdown.

The requirement would be to have an input that looks similar to either a standard Dropdown or the Dropdown Search with the arrow down to expand and display a list (just like the Dropdown Search, but without the search field) and also allow me to directly type on it to search on the list, with some way to determine if the value on it is a valid value from the list or something that doesn't exist on the list so we can decide whether we want to allow adding (and selecting) it on the fly or showing a validation message.

Do you know of any other ready-made approach that would address this requirement? If not, what would your strategy be?

Thanks!

Hi Jorge,

For a somewhat similar requirement, I customized InputAutoCompleteReactive component, so that it would show the whole list with a certain sorting when the input is in focus, and it would filter by the keyword as user typed. A lot of CSS change was also needed to give the dropdown look&feel.

The whole customization was not very optimal, but that was still the fastest and most satisfactory solution for me. 

Community GuidelinesBe kind and respectful, give credit to the original source of content, and search for duplicates before posting.