2 Replies Latest reply on Oct 29, 2019 8:44 AM by Georgios Galanopoulos

    oj-list-view selected item reference is lost

    Georgios Galanopoulos

      It seems that there are cases where the component looses the selected item reference (e.g. when the sorting of the elements is changing).

       

      In order to reproduce the issue:

       

      - Open https://www.oracle.com/webfolder/technetwork/jet/jetCookbook.html?component=listView&demo=observableArrayListView

       

      - Change the demo.html bya adding the following bold lines (sort buttons) right after remove button and prior oj-list-view

       

       

                  <oj-button id="addButton" on-oj-action="[[addItem]]">Add</oj-button>

                  <oj-button id="removeButton" on-oj-action="[[removeSelected]]">Remove</oj-button>

       

                  <oj-button id="sortButton" on-oj-action="[[sortAsc]]">SortAsc</oj-button>           

                  <oj-button id="sortButton" on-oj-action="[[sortDesc]]">SortDesc</oj-button>           

               

                  <oj-list-view id="listview" aria-label="list using observable array"

                      data="[[dataProvider]]" selection-mode="multiple" selection="{{selectedItems}}">

                    <template slot="itemTemplate" data-oj-as="item">

                        <span>

                            <oj-bind-text value='[[item.data.item]]'></oj-bind-text>

                        </span>

                    </template>

                  </oj-list-view>

                 

                 

      - Change demo.js by adding the following bold lines (sort functions) right after dataprovider and prior addItem function

       

       

                this.dataProvider = new ArrayDataProvider(this.allItems, {'keyAttributes': 'id'});       

       

                this.sortAsc = function () { this.doSort(true); }.bind(this);

             

                this.sortDesc = function () { this.doSort(false); }.bind(this);

             

                this.doSort = function (mode)

                {

                  this.allItems.sort(function(a, b) {

                    var x=a.item;

                    var y=b.item;

                    return mode? x.localeCompare(y) : y.localeCompare(x);

                  });           

                }.bind(this);    

       

                this.addItem = function ()

       

               

      - Click Apply in order to load the project

       

      - Select "Milk", List shows item as selected

       

      - Press "Sort Asc", selection for milk is kept

       

      - Press "Sort Desc", selection for milk is also kept

       

      - Press "Sort Asc", selection for milk is lost

                   

       

      this seems to be quite weird