PolymerElements / iron-list

Element for a virtual, "infinite" list
https://www.webcomponents.org/element/PolymerElements/iron-list
219 stars 131 forks source link

Results set does not clear with empty array and computed binding #557

Closed dman777 closed 5 years ago

dman777 commented 5 years ago

Description

Iron list does not clear results when given a empty array through computed binding

This works in Polymer 1, but not in Polymer 3

        <iron-list
         scroll-target="[[scrollTarget]]"                                
         items="[[_handleSearch(listings, searchBarValue)]]"             
         id="listResults">                                               

          <template>

            <div class="row">                                            

              <div class="col1">[[item.title]]</div>                     

              <div class="col2">
                [[item.name]]        
              </div>

              <div class="col3">[[item.cost]]</div>                      

              <div class="col4">[[_formatToLocalTimeZone(item.created_at)]]</div>       

            </div> <!-- end of row -->                                   

          </template>                                                    

        </iron-list>    
  _handleSearch(listings, searchBarValueRaw) {
    if (!searchBarValueRaw) {
      return listings;
    }

    const searchBarValue = searchBarValueRaw.toLowerCase();

    const foo =  listings.filter((item) => {
      const values = Object.values(item);
      return values.join(' ').toLowerCase().indexOf(searchBarValue) >= 0;
    });

    // I verified this is being hit and returned
    //when array is [] results do not clear
    console.log(foo);

    return foo;
  }
dman777 commented 5 years ago

Sorry, it wasn't a bug. The solution was to clone the array from the response JSON api.

      .then((response)=> {                                                                                     
        this.listings = [...response.results173];                                                              
      })

It seems there remained the memory reference to the api array. This is a bit strange since I never had to do this in Polymer 1.