[OutSystems UI] DropdownSearch is not a valid Label input widget
Question
Forge component by OutSystems R&D

I'm creating a Form and for some dropdowns I want to use the search capability provided by DropdownSearch. However, some of these dropdowns are mandatory and for this I want to target the DropdownSearch widget. This however is being blocked by Service Studio with the following error: "An input widget must be selected".  

Can this be changed so that the DropdownSearch widget (as wel as DropdownTags) is a valid input widget?

Note that I already tried a workaround by having a regular dropdown widget in the screen that is targeted by the label and then hide this dropdown but this is causing other issues like a misplacement of the "Required field!" text.

Greetings,

Vincent

mvp_badge
MVP

Hi Vincent,

Both the DropdownSearch and the DropdownTags provided by OutSystems UI are Patterns (implemented using Blocks), not native widgets (i.e HTML inputs), and as such cannot be directly bound to a Label (another HTML element)... that's what's making your situation tricky.

This is not an OutSystems UI issue though, it's an OutSystems language limitation. I've just created an Idea for this (couldn't find any existing one on the topic), feel free to upvote it.

Cheers

Hi Jorge,

I upvoted your idea. Lets hope it's gets picked up.

Greetings,

Vincent

Hi Vincent ,


To implement a custom Validation on the field you can set a "classname" in the extended class for widget and use following JS to show a validation inside the submit action

--------------------

var x = document.getElementsByClassName($parameters.ClassName);

var i;

for (i = 0; i < x.length; i++) {

  x[i].classList.add("not-valid");

}

--------------------

You can also give a custome validation message should you wish.


Hope this helps.


Regards,

Vaibhav Shukla

Hi Vincent Koning,


As both of these components are custom dropdowns based on a library, it's not really an issue, as html labels can only be connected to html inputs/selects. This is by design for any custom dropdown. 

For accessibility purposes, we added a tittle html attribute by default, on the internal hidden select tag on the pattern. This is accepted as a valid accessibility workaround when a label cannot be used. 


Best regards,

Bernardo Cardoso


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