Search field not clear for another list popup

Question

I am using Devextreme module for a dxlist popup. I am able to open the popup and to show the list of items with a search input field but I have one more list popup. When I search in the first popup and close it, open the second popup, the search field text is not cleared.

    <dx-popup class="popup popupMore" [width]="500" [height]="500" [showTitle]="true" title="{{popupdata.name}}" [dragEnabled]="false"
  [closeOnOutsideClick]="true" [(visible)]="isVisible">

  <div class="list-container">
    <dx-list #list [dataSource]="popupdata.data" [height]="400" [searchEnabled]="true" 
      searchMode="contains"  >
      <div *dxTemplate="let data of 'item'">
        <div>{{data}}</div>
      </div>
    </dx-list>
  </div>
</dx-popup>

The above code is used in the html. Same popup will open for another two event.

Example: I have three buttons. When we click on each button we need to open the same popup with different data. When we click on the first button, this list popup will open with a search option. I searched in the search field and closed the popup. Then clicked the second button, same popup will open with new data but the search input field is not cleared.

Could anyone please help me, how to clear the search field for the next list popup that opens?

Thanks in advance.

Answer 1

As mentioned in the comment above, the cleverest approach I could think of is registering the dxPopup's onShown event and, when fired, you may either:

• Reset the list.instance searchValue option (using this.list.instance.option('searchValue','');).
• Assign a two-way binded value to the dx-list component and reset that value. For that case, specifically, add [(searchValue)]="_searchValue" to the html dx-list tag, and add this._searchValue = '' in the dxPopup's onShown callback.