[LazyDropdownSearch] Clear selected item programatically
lazydropdownsearch
Reactive icon
Forge component by Steven Decock
Application Type
Reactive

Is it possible to clear the selected item via logic? I have the following use cases;

  1. I use this dropdown to show people the current available list of items that they can add to a list. After the item has been added the list is refreshed with the now available items. The item that was previously selected is still shown although not available anymore in the list. This is confusing the users. 
  2. When using this component in an popup or sidebar and the item is reused because I open either again with a different input parameters the list is refreshed as expected (via a service call initiated in the OnParametersChanged action) but the previously selected item is still visible and possible totally incorrect in the context of the selected item. This could cause a lot of issues in our applications.

Using the SelectedItem input property does not solve this issue since that is only used during the initialization of the component. Since the item in both cases is already initialized and used this property doesn't do anything. 

An action that could be used to clear the selected property and go back to the initial state would solve all these problems (please do not fire the OnItemSelected event when doing so). 

Is it possible to add such an action?

Greetings,

Vincent

Solution

Hi Vincent,

I know you mentioned the SelectedItem property not solving the issue, but the problem seems to be solved for me by simply adding a blank Local Variable of type DropdownItem to the screen and adding it as the SelectedItem property of the LazyDropdownSearch block. I thought I would have to do additional work to get it to work, but after doing this, the selected item displayed is being cleared automatically every time the source of the SearchResultValues list is refreshed, which could be used as the trigger for clearing the selected item.

Hope this works for you too.

I finally got to it to test this (sorry for the long wait). And indeed, refreshing the source list does inject the selecteditem variable which can be empty. But still having the option to clear the selected value via an Action would also be very useful. If possible, could you take a look at it? 

Thanks! 

Vincent

Hi Vincent,

I've updated the Demo application to include a button that clears the selected item.  It does this as Francisco mentioned, by setting the SelectedItem.  I believe this should be the way to do it.

I don't think I understand what you mean with adding an action to clear the field.  A Block cannot expose an action as far as I know, unless with some magic JavaScript.  It can only take inputs and throw events.  So even if I wanted to add such an action, I don't understand how I should do that.

As mentioned in the description of the component, this is intended as a drop-in replacement for the DropdownSearch component, but with the lazy-loading option. And to clear the value in DropdownSearch you would also have to clear SelectedItem, so I think it's in line with that.

I hope the demo helps you in solving your problem in an elegant way.

If you have any more questions or input, let me know!


Regards,

Steven

Hi Steven,

I'll check out the demo but I already got it working via de method Francisco mentioned.

The reason I asked for an action is to prevent unnecessary queries. If I only need to empty the previously selected item why would I need to retrieve a new list. This puts load on both the server and the client and could be prevented if you ask me. As a developer you known when you want to clear the item, there could be several use cases for this. And when you encounter such a situation it would be nice to be able to call an action that could then clear the item without executing a query. But it is not a big problem so don't worry about it.

As for the comment that you can't expose actions for a web block. That is not entirely true although it depends on the underlying framework. I'm the author of Leaflet Reactive for example and this component exposes a lot of actions that interact with the Leaflet block. The used framework allows for this so it was "easy" to implement this.

When the framework doesn't allow this I have created blocks that still can do this but differently. For example, by using an input parameter as trigger. You can then use the onParametersChanged action to verify the need to perform a certain action and then execute it. It's not as pretty as an action but it can be a great addition to speed things up. 

Greetings,

Vincent

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