Dropdown Search doesn't show the default "select an item" while searching?
Application Type
Reactive

Hi,

I have a dropdown search that has the list of countries. It doesn't give an option for the user unselect the selected country (once a country is selected, there is no way he can go back to blank again).

I see from other sample applications (using the same widget with same options) get the "select an item" as their first option to unselect.


How do I get this 'select an item' in my search list?

Thanks,

Ok,

so to confuse things even more, I just noticed, even if you don't supply an EmptyText, it is by default "Select an Item".

If everything is the same between your sandbox app and your main app, do we maybe need to go search elsewhere for the differences ?  I can see your two screens look different, so they have different themes, right.

So maybe something in the css of your main app.

I manage to make the placeholder option dissappear with

.choices__list--dropdown .choices__placeholder{
    display:none;
}

so maybe something similar is going on ?

Dorine

See attached oml for example

QDRDropDownSearch.oml

Thanks a lot Dorine, I didn't realize that the theme could have been overwritten. 

Looks like these lines are the root cause

.choices .choices__list--dropdown .choices__item[data-value="0"] {
  display: none; }

How do I override these? I cannot change this theme as it is shared for many modules (and has many customizations). But I just want to override these lines in a module specific theme.

See my attached oml, for one option : you create a new class and put your dropdown in a container of that class.  Another option is to have something like this in your module css

.choices .choices__list--dropdown .choices__item[data-value="0"] {
  display: flex; }

So basically make sure you have a selector with at least same specificity.


That will then have effect on all your choices widgets in your module.

Thank you so much Dorine and others for the effort. The issue is now fixed by implementing Dorine's suggestions.

See my attached oml, for one option : you create a new class and put your dropdown in a container of that class.  Another option is to have something like this in your module css

.choices .choices__list--dropdown .choices__item[data-value="0"] {
  display: flex; }

So basically make sure you have a selector with at least same specificity.


That will then have effect on all your choices widgets in your module.

Hi KatSiv,

you can use the EmptyText property of the widget for that.

Dorine

Hi Dorine, 

The empty text is displayed when no item is selected. But when I click on the dropdown, I need to see 'select an item' as the first item, so that if the user doesn't want to select anything (after a valid selection is made), he can click on that to unselect. Please check the second image in my original question ('select an item' surrounded in red)

Thanks


what exact widget are you using, this is what i get with interaction\dropdownsearch in reactive




Hello.

Can you check if your dropdown search's properties look like this?


If you have "" on the "Empty Text" property, it will not show the 'select an item'.

Best regards

Hi Tiago,

I have 'Empty text'

And it is shown when the dropdown is not clicked. I need 'select a country' below the search box, in case if the user doesnt want to select a country.

Thanks

Hi KatSiv

Please look at the oml. I have used the same property "EmptyText" as everyone suggested and i could see the first item as per expectation.

https://vani-mankad.outsystemscloud.com/Reactive_POC/Screen1?_ts=637546342288467946

Looks like issue is different. please have a look at oml and compare what different you are doing.

Thanks,

Vani

ReactivePOC.oml

Hello @KatSiv 

Check here if this is what you need: https://galmeida.outsystemscloud.com/DropDowndefault/Dropdown?_ts=637546309330966627

You can also check the implementation in the oml attached

Regards

Gonçalo Almeida

DropDowndefault.oml

Hello @KatSiv,

If the issue is still unresolved despite the above recommendations, then we may need to focus on other aspects of your code. Are you able to share the oml where this occurs? If not, can you share a screenshot and/or explain the logic of what's happening in the DropdownSearch widget's 'OnSelect' event?

Thanks,

AJ

@Dorine Boudry , @=AJ= , @Goncalo Almeida , @Vani Mankad , @Tiago Oliveira

I am using Interaction\DropdownSearch only. Strange thing is, it works exactly fine if I keep in a separate application just for my testing, I am using same the list (and the same action that populates the list) and the same OnSelect event. But it works well on my Sandbox application, but not in the main application.

Using the same widget in both applications (in fact, I copied it from the sandbox app to the main one)

Thank you KatSiv, what would help is to see the DropdownSearch's Properties (All of them) in a screenshot, and the logic in the 'OnSelect' event, if that's possible.

Also are you preselecting 'UNITED STATES OF AMERICA' when the screen loads? <-- this will be clear from the properties screenshot anyway.

Thanks,

AJ

Yes =Aj=, I have "United States of America" in the selected item, but I tried without that too, didn't help. And the "OnSelect" event, just assigns the SelectedItem.Value to a local variable. It does nothing else.

One with 'Selected Value'


Ok,

so to confuse things even more, I just noticed, even if you don't supply an EmptyText, it is by default "Select an Item".

If everything is the same between your sandbox app and your main app, do we maybe need to go search elsewhere for the differences ?  I can see your two screens look different, so they have different themes, right.

So maybe something in the css of your main app.

I manage to make the placeholder option dissappear with

.choices__list--dropdown .choices__placeholder{
    display:none;
}

so maybe something similar is going on ?

Dorine

See attached oml for example

QDRDropDownSearch.oml

Thanks a lot Dorine, I didn't realize that the theme could have been overwritten. 

Looks like these lines are the root cause

.choices .choices__list--dropdown .choices__item[data-value="0"] {
  display: none; }

How do I override these? I cannot change this theme as it is shared for many modules (and has many customizations). But I just want to override these lines in a module specific theme.

See my attached oml, for one option : you create a new class and put your dropdown in a container of that class.  Another option is to have something like this in your module css

.choices .choices__list--dropdown .choices__item[data-value="0"] {
  display: flex; }

So basically make sure you have a selector with at least same specificity.


That will then have effect on all your choices widgets in your module.

Thank you so much Dorine and others for the effort. The issue is now fixed by implementing Dorine's suggestions.

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