[TIMOB-24351] iOS: Support "editActions" in listview search-results

GitHub Issue	n/a
Type	Improvement
Priority	None
Status	Closed
Resolution	Fixed
Resolution Date	2017-08-15T15:28:08.000+0000
Affected Version/s	Release 6.0.0, Release 6.0.1
Fix Version/s	Release 6.2.0
Components	iOS
Labels	n/a
Reporter	Ricardo Ramirez
Assignee	Vijay Singh
Created	2017-01-27T21:59:46.000+0000
Updated	2017-08-18T17:20:24.000+0000

Description

Issue Description

Adding the EditActions for the listview. Listview also having the search functionality using SearchBar Edit Functionalities are working especially swipe to delete in the list view data. But, Using the search bar, tapping on searching the results, swipe to delete feature is not working

Steps to replicate

Download the project from here: https://drive.google.com/file/d/0BwTWo-c2a0b9X2NkbG5la0VJWnM/view?usp=sharing

Run the project

Swipe on the list items to see the options in the rows

Make a search like "papaya"

Swipe again to see the options in a result

The option is not showing.

Expected results

List item options should be showed even after search

Comments

Hans Knöchel 2017-01-30

This can be achieved as soon as we migrate the UISearchDisplayController to the UISearchController. See TIMOB-24335 for details. Test-Case (to be achieved):

   var win = Ti.UI.createWindow({
       backgroundColor: '#fff'
   });
   
   var list = Ti.UI.createListView({
       searchView: Ti.UI.createSearchBar(),
       sections: [Ti.UI.createListSection({
           items: [{
               properties: {
                   title: "Item 1",
                   canEdit: true,
                   searchableText: "Item 1",
                   editActions: [{title: "Delete"}, {title: "Edit"}]
               }
           },{
               properties: {
                   title: "Item 2",
                   canEdit: true,
                   searchableText: "Item 2",
                   editActions: [{title: "Delete"}, {title: "Edit"}]
               }
           },{
               properties: {
                   title: "Item 3",
                   canEdit: true,
                   searchableText: "Item 3",
                   editActions: [{title: "Delete"}, {title: "Edit"}]
               }
           }]
       })]
   })
   
   win.add(list);
   win.open();

Ricardo Ramirez 2017-03-02

Any updates here?
Ricardo Ramirez 2017-03-14

Hi [~emerriman] Is possible to include this one on the current sprint ?
Abir Mukherjee 2017-04-17

Reproduced with this environment: Node Version: 6.10.1 NPM Version: 3.10.10 Mac OS: 10.12.4 Appc CLI: 6.2.0 Appc CLI NPM: 4.2.9 Titanium SDK version: 6.0.3.GA Appcelerator Studio, build: 4.8.1.201612050850 Xcode 8.2.1 [~emerriman] Yes, I can reproduce it. Without any filtering, when I swipe to the left on any list item, there are options to either edit or delete. When I type anything in the search field, and I select any items that matched the search, the options do not appear if I try to swipe left on any selected item.
Hans Knöchel 2017-04-19

We will be able to fix this when TIMOB-24335 is implemented, see the above comments for details.

Vijay Singh 2017-07-19

PR: https://github.com/appcelerator/titanium_mobile/pull/9227 Test Cases - /// Search with search bar and listview

   
   1.
   //1. Default edit action i.e delete
   var win = Ti.UI.createWindow({
       backgroundColor: '#fff'
   });
    
   var sb = Ti.UI.createSearchBar();
   var list = Ti.UI.createListView({
       top: 50,
       keepSectionsInSearch: true,
       pruneSectionsOnEdit: true,
       sections: [Ti.UI.createListSection({
                   headerTitle:"Item List 1",
           items: [{
               properties: {
                   title: "Item 1",
                   canEdit: true,
                   searchableText: "Item 1",
               }
           },{
               properties: {
                   title: "Item 2",
                   canEdit: true,
                   searchableText: "Item 2",
               }
           },{
               properties: {
                   title: "Item 3",
                   canEdit: true,
                   searchableText: "Item 3",
               }
           }
           ]
       }),
       Ti.UI.createListSection({
                    headerTitle:"Item List 2",
   
           items: [{
               properties: {
                   title: "Item 4",
                   canEdit: true,
                   searchableText: "Item 4",
               }
           },{
               properties: {
                   title: "Item 5",
                   canEdit: true,
                   searchableText: "Item 5",
               }
           },{
               properties: {
                   title: "Item 6",
                   canEdit: true,
                   searchableText: "Item 6",
               }
           }
           ]
       })]
   })
    
    list.addEventListener("delete", function(e){
       Ti.API.info("Deleted Row Index is is: " +e.itemIndex);
       Ti.API.info("Deleted Section Index is is: " +e.sectionIndex);
   
    });
   
   var searchBar = Ti.UI.createSearchBar({
       height:44,
       top:0,
       barColor:'#000',
       showCancel:true,
   });
   searchBar.addEventListener('change', function(e){
       Ti.API.info("searched item is: "+e.value);
       list.searchText = e.value;
   });
   
   searchBar.addEventListener('return', function(e){
   searchBar.blur();
   });
   
   searchBar.addEventListener('cancel', function(e){
   searchBar.blur();
   });
   
   win.add(searchBar);
   win.add(list);
   win.open();

   //2. Actions
   var win = Ti.UI.createWindow({backgroundColor: 'white'}),
   
       favoriteAction = {
           identifier: 'setFavorite',
           title: 'Favorite',
           style: Ti.UI.iOS.ROW_ACTION_STYLE_DEFAULT,
       },
       unfavoriteAction = {
           identifier: 'unsetFavorite',
           title: 'Unfavorite',
           style: Ti.UI.iOS.ROW_ACTION_STYLE_NORMAL,
       },
       deleteAction = {
           identifier: 'delete',
           title: 'Delete',
           style: Ti.UI.iOS.ROW_ACTION_STYLE_NORMAL,
       },
       data1 = [
           {properties: {canEdit: true, editActions: [favoriteAction, deleteAction], title: 'Kitten Whiskers', searchableText:'Kitten Whiskers'}},
           {properties: {canEdit: true, editActions: [favoriteAction, deleteAction], title: 'Copper Kettle', searchableText:'Copper Kettle'}},
           {properties: {canEdit: true, editActions: [favoriteAction, deleteAction], title: 'Woolen Mittens', searchableText:'Woolen Mittens'}},
            ],
   
       listSection1 = Ti.UI.createListSection({
           items: data1
       }),
   
      data2 = [
           {properties: {canEdit: true, editActions: [favoriteAction, deleteAction], title: 'Apple Strudel', searchableText:'Apple Strudel'}},
           {properties: {canEdit: true, editActions: [favoriteAction, deleteAction], title: 'Brown Packages', searchableText:'Brown Packages'}},
           {properties: {canEdit: true, editActions: [favoriteAction, deleteAction], title: 'Dog Bites', searchableText:'Dog Bites'}},
           {properties: {canEdit: true, editActions: [favoriteAction, deleteAction], title: 'Bee Stings', searchableText:'Bee Stings'}}
       ],
       listSection2 = Ti.UI.createListSection({
           items: data2
       }),
       listView = Ti.UI.createListView({
           top: 50,
           sections: [listSection1, listSection2]
       });
   
    listView.addEventListener('editaction', function(e) {
       var item = e.section.getItemAt(e.itemIndex)
       if (e.identifier === 'setFavorite') {
           item.properties.editActions = [unfavoriteAction, deleteAction];
            e.section.updateItemAt(e.itemIndex, item)
       } else if (e.identifier === 'unsetFavorite') {
           item.properties.editActions = [favoriteAction, deleteAction];
           e.section.updateItemAt(e.itemIndex, item, { animationStyle: Ti.UI.iOS.RowAnimationStyle.BOTTOM});
   
       } else if (e.identifier === 'delete') {
           e.section.deleteItemsAt(e.itemIndex, 1);
   
       }
   });
   
   var searchBar = Ti.UI.createSearchBar({
       height:44,
       top:0,
       barColor:'#000',
       showCancel:true,
   });
   searchBar.addEventListener('change', function(e){
       Ti.API.info("searched item is: "+e.value);
       listView.searchText = e.value;
   });
   
   searchBar.addEventListener('return', function(e){
   searchBar.blur();
   });
   
   searchBar.addEventListener('cancel', function(e){
   searchBar.blur();
   });
   
   win.add(searchBar); 
   win.add(listView);
   win.open();

   // 3. Edit
   var win = Ti.UI.createWindow({backgroundColor: 'white', fullscreen: true, title: 'Shopping List'});
   var navWin = Ti.UI.iOS.createNavigationWindow({window: win});
    
   var listView = Ti.UI.createListView({
               pruneSectionsOnEdit: true,
               top:50,
               keepSectionsInSearch: true,
           }
   );
    
   // Listen when items are deleted or moved
   function report (e) {
       Ti.API.info('Item ' + e.itemIndex + ' was ' + e.type + 'd!');
   }
   listView.addEventListener('delete', report);
   listView.addEventListener('move', report);
   // Left navigation button to toggle between editing and selection mode
   var button = Ti.UI.createButton({title: 'Edit'});
   win.leftNavButton = button;
   var flag = false;
   button.addEventListener('click', function(){
       flag = !flag;
       listView.editing = flag;
       if (flag) {
           button.title = "Stop Editing";
       } else {
           button.title = 'Edit';
       }
   });
    
   var sections = [];
   var fruitSection = Ti.UI.createListSection({ headerTitle: 'Fruits'});
   var fruitDataSet = [
       {properties: { title: 'Apple', canEdit: true, canMove: true, searchableText:'Apple'}},
       {properties: { title: 'Banana', canEdit: true, canMove: true, searchableText:'Banana'}}
   ];
   fruitSection.setItems(fruitDataSet);
   sections.push(fruitSection);
    
   var vegSection = Ti.UI.createListSection({ headerTitle: 'Vegetables'});
   var vegDataSet = [
       {properties: { title: 'Carrots',canEdit: true, canMove: true, searchableText:'Carrots'}},
       {properties: { title: 'Potatoes',canEdit: true, canMove: true, searchableText:'Potatoes'}}
   ];
   vegSection.setItems(vegDataSet);
   sections.push(vegSection);
    
   var fishSection = Ti.UI.createListSection({ headerTitle: 'Fish'});
   var fishDataSet = [
       {properties: { title: 'Cod',canEdit: true, canMove: true, searchableText:'Cod'}},
       {properties: { title: 'Haddock',canEdit: true, canMove: true, searchableText:'Haddock'}}
   ];
   fishSection.setItems(fishDataSet);
   sections.push(fishSection);
    
   listView.sections = sections;
   var searchBar = Ti.UI.createSearchBar({
       height:44,
       top:0,
       barColor:'#000',   
       showCancel:true,
   });
   searchBar.addEventListener('change', function(e){
       Ti.API.info("searched item is: "+e.value);
       listView.searchText = e.value;
   });
   
   searchBar.addEventListener('return', function(e){
   searchBar.blur();
   });
   
   searchBar.addEventListener('cancel', function(e){
   searchBar.blur();
   });
   
   win.add(searchBar); 
   win.add(listView);
   navWin.open();

   //4. Insert
   var win = Ti.UI.createWindow({backgroundColor: 'white', fullscreen: true, title: 'Shopping List'});
   var navWin = Ti.UI.iOS.createNavigationWindow({window: win});
    
   var listView = Ti.UI.createListView({
               pruneSectionsOnEdit: true,
               top:50,
               keepSectionsInSearch: true,
           }
   );
    
   // Listen when items are deleted or moved
   function report (e) {
       Ti.API.info('Item ' + e.itemIndex + ' was ' + e.type + 'd!');
   }
   listView.addEventListener('delete', report);
   listView.addEventListener('move', report);
   // Left navigation button to toggle between editing and selection mode
   var button = Ti.UI.createButton({title: 'Edit'});
   win.leftNavButton = button;
   var flag = false;
   button.addEventListener('click', function(){
       flag = !flag;
       listView.editing = flag;
       if (flag) {
           button.title = "Stop Editing";
       } else {
           button.title = 'Edit';
       }
   });
    
   var sections = [];
   var fruitSection = Ti.UI.createListSection({ headerTitle: 'Fruits'});
   var fruitDataSet = [
       {properties: { title: 'Apple', canInsert: true, canMove: true, searchableText:'Apple'}},
       {properties: { title: 'Banana', canInsert: true, canMove: true, searchableText:'Banana'}}
   ];
   fruitSection.setItems(fruitDataSet);
   sections.push(fruitSection);
    
   var vegSection = Ti.UI.createListSection({ headerTitle: 'Vegetables'});
   var vegDataSet = [
       {properties: { title: 'Carrots',canInsert: true, canMove: true, searchableText:'Carrots'}},
       {properties: { title: 'Potatoes',canInsert: true, canMove: true, searchableText:'Potatoes'}}
   ];
   vegSection.setItems(vegDataSet);
   sections.push(vegSection);
    
   var fishSection = Ti.UI.createListSection({ headerTitle: 'Fish'});
   var fishDataSet = [
       {properties: { title: 'Cod',canInsert: true, canMove: true, searchableText:'Cod'}},
       {properties: { title: 'Haddock',canInsert: true, canMove: true, searchableText:'Haddock'}}
   ];
   fishSection.setItems(fishDataSet);
   sections.push(fishSection);
    
   listView.sections = sections;
   var searchBar = Ti.UI.createSearchBar({
       height:44,
       top:0,
       barColor:'#000',   
       showCancel:true,
   });
   searchBar.addEventListener('change', function(e){
       Ti.API.info("searched item is: "+e.value);
       listView.searchText = e.value;
   });
   
   searchBar.addEventListener('return', function(e){
   searchBar.blur();
   });
   
   searchBar.addEventListener('cancel', function(e){
   searchBar.blur();
   });
   
   listView.addEventListener('insert', function(e) {
    var item = e.section.getItemAt(e.itemIndex);
    e.section.insertItemsAt(e.itemIndex, [item]);
   
   });
   win.add(searchBar); 
   win.add(listView);
   navWin.open();

Vijay Singh 2017-07-19

/// Search using searchbar inbuilt in listview 1.

   //1. Default edit action i.e delete
   var win = Ti.UI.createWindow({
       backgroundColor: '#fff'
   });
    
   var list = Ti.UI.createListView({
       searchView: Ti.UI.createSearchBar(),
       keepSectionsInSearch: true,
       pruneSectionsOnEdit: true,
       sections: [Ti.UI.createListSection({
                   headerTitle:"List Item 1",
           items: [{
               properties: {
                   title: "Item 1",
                   canEdit: true,
                   searchableText: "Item 1",
               }
           },{
               properties: {
                   title: "Item 2",
                   canEdit: true,
                   searchableText: "Item 2",
               }
           },{
               properties: {
                   title: "Item 3",
                   canEdit: true,
                   searchableText: "Item 3",
               }
           }
           ]
       }),
       Ti.UI.createListSection({
                    headerTitle:"List Item 2",
   
           items: [{
               properties: {
                   title: "Item 4",
                   canEdit: true,
                   searchableText: "Item 4",
               }
           },{
               properties: {
                   title: "Item 5",
                   canEdit: true,
                   searchableText: "Item 5",
               }
           },{
               properties: {
                   title: "Item 6",
                   canEdit: true,
                   searchableText: "Item 6",
               }
           }
           ]
       })]
   })
    
    list.addEventListener("delete", function(e){
       Ti.API.info("Deleted Row Index is is: " +e.itemIndex);
       Ti.API.info("Deleted Section Index is is: " +e.sectionIndex);
   
    });
   win.add(list);
   win.open();

   //2. Action
   var win = Ti.UI.createWindow({backgroundColor: 'white'}),
       favoriteAction = {
           identifier: 'setFavorite',
           title: 'Favorite',
           style: Ti.UI.iOS.ROW_ACTION_STYLE_DEFAULT,
       },
       unfavoriteAction = {
           identifier: 'unsetFavorite',
           title: 'Unfavorite',
           style: Ti.UI.iOS.ROW_ACTION_STYLE_NORMAL,
       },
       deleteAction = {
           identifier: 'delete',
           title: 'Delete',
           style: Ti.UI.iOS.ROW_ACTION_STYLE_NORMAL,
       },
       data1 = [
           {properties: {canEdit: true, editActions: [favoriteAction, deleteAction], title: 'Kitten Whiskers', searchableText:'Kitten Whiskers'}},
           {properties: {canEdit: true, editActions: [favoriteAction, deleteAction], title: 'Copper Kettle', searchableText:'Copper Kettle'}},
           {properties: {canEdit: true, editActions: [favoriteAction, deleteAction], title: 'Woolen Mittens', searchableText:'Woolen Mittens'}},
            ],
   
       listSection1 = Ti.UI.createListSection({
           items: data1
       }),
   
      data2 = [
           {properties: {canEdit: true, editActions: [favoriteAction, deleteAction], title: 'Apple Strudel', searchableText:'Apple Strudel'}},
           {properties: {canEdit: true, editActions: [favoriteAction, deleteAction], title: 'Brown Packages', searchableText:'Brown Packages'}},
           {properties: {canEdit: true, editActions: [favoriteAction, deleteAction], title: 'Dog Bites', searchableText:'Dog Bites'}},
           {properties: {canEdit: true, editActions: [favoriteAction, deleteAction], title: 'Bee Stings', searchableText:'Bee Stings'}}
       ],
       listSection2 = Ti.UI.createListSection({
           items: data2
       }),
       listView = Ti.UI.createListView({
           top: 15,
           searchView: Ti.UI.createSearchBar(),
           dimBackgroundForSearch: false,
           sections: [listSection1, listSection2]
       });
   
    listView.addEventListener('editaction', function(e) {
       var item = e.section.getItemAt(e.itemIndex)
       if (e.identifier === 'setFavorite') {
           item.properties.editActions = [unfavoriteAction, deleteAction];
            e.section.updateItemAt(e.itemIndex, item)
       } else if (e.identifier === 'unsetFavorite') {
           item.properties.editActions = [favoriteAction, deleteAction];
           e.section.updateItemAt(e.itemIndex, item, { animationStyle: Ti.UI.iOS.RowAnimationStyle.BOTTOM});
   
       } else if (e.identifier === 'delete') {
           e.section.deleteItemsAt(e.itemIndex, 1);
   
       }
   });
    
   win.add(listView);
   win.open();

   //3. Edit
   var win = Ti.UI.createWindow({backgroundColor: 'white', fullscreen: true, title: 'Shopping List'});
   var navWin = Ti.UI.iOS.createNavigationWindow({window: win});
    
   var listView = Ti.UI.createListView({
               searchView: Ti.UI.createSearchBar(),
               pruneSectionsOnEdit: true,
           }
   );
    
   // Listen when items are deleted or moved
   function report (e) {
       Ti.API.info('Item ' + e.itemIndex + ' was ' + e.type + 'd!');
   }
   listView.addEventListener('delete', report);
   listView.addEventListener('move', report);
   // Left navigation button to toggle between editing and selection mode
   var button = Ti.UI.createButton({title: 'Edit'});
   win.leftNavButton = button;
   var flag = false;
   button.addEventListener('click', function(){
   
       flag = !flag;
       listView.editing = flag;
       if (flag) {
           button.title = "Stop Editing";
       } else {
           button.title = 'Edit';
       }
   });
    
   var sections = [];
   var fruitSection = Ti.UI.createListSection({ headerTitle: 'Fruits'});
   var fruitDataSet = [
       {properties: { title: 'Apple', canEdit: true, canMove: true, searchableText:'Apple'}},
       {properties: { title: 'Banana', canEdit: true, canMove: true, searchableText:'Banana'}}
   ];
   fruitSection.setItems(fruitDataSet);
   sections.push(fruitSection);
    
   var vegSection = Ti.UI.createListSection({ headerTitle: 'Vegetables'});
   var vegDataSet = [
       {properties: { title: 'Carrots',canEdit: true, canMove: true, searchableText:'Carrots'}},
       {properties: { title: 'Potatoes',canEdit: true, canMove: true, searchableText:'Potatoes'}}
   ];
   vegSection.setItems(vegDataSet);
   sections.push(vegSection);
    
   var fishSection = Ti.UI.createListSection({ headerTitle: 'Fish'});
   var fishDataSet = [
       {properties: { title: 'Cod',canEdit: true, canMove: true, searchableText:'Cod'}},
       {properties: { title: 'Haddock',canEdit: true, canMove: true, searchableText:'Haddock'}}
   ];
   fishSection.setItems(fishDataSet);
   sections.push(fishSection);
    
   listView.sections = sections;
   win.add(listView);
   navWin.open();

   // 4. Insert
   var win = Ti.UI.createWindow({backgroundColor: 'white', fullscreen: true, title: 'Shopping List'});
   var navWin = Ti.UI.iOS.createNavigationWindow({window: win});
    
   var listView = Ti.UI.createListView({
               searchView: Ti.UI.createSearchBar(),
               pruneSectionsOnEdit: true,
           }
   );
    
   // Listen when items are deleted or moved
   function report (e) {
       Ti.API.info('Item ' + e.itemIndex + ' was ' + e.type + 'd!');
   }
   listView.addEventListener('delete', report);
   listView.addEventListener('move', report);
   // Left navigation button to toggle between editing and selection mode
   var button = Ti.UI.createButton({title: 'Edit'});
   win.leftNavButton = button;
   var flag = false;
   button.addEventListener('click', function(){
   
       flag = !flag;
       listView.editing = flag;
       if (flag) {
           button.title = "Stop Editing";
       } else {
           button.title = 'Edit';
       }
   });
    
   var sections = [];
   var fruitSection = Ti.UI.createListSection({ headerTitle: 'Fruits'});
   var fruitDataSet = [
       {properties: { title: 'Apple', canInsert: true, canMove: true, searchableText:'Apple'}},
       {properties: { title: 'Banana', canInsert: true, canMove: true, searchableText:'Banana'}}
   ];
   fruitSection.setItems(fruitDataSet);
   sections.push(fruitSection);
    
   var vegSection = Ti.UI.createListSection({ headerTitle: 'Vegetables'});
   var vegDataSet = [
       {properties: { title: 'Carrots',canInsert: true, canMove: true, searchableText:'Carrots'}},
       {properties: { title: 'Potatoes',canInsert: true, canMove: true, searchableText:'Potatoes'}}
   ];
   vegSection.setItems(vegDataSet);
   sections.push(vegSection);
    
   var fishSection = Ti.UI.createListSection({ headerTitle: 'Fish'});
   var fishDataSet = [
       {properties: { title: 'Cod',canInsert: true, canMove: true, searchableText:'Cod'}},
       {properties: { title: 'Haddock',canInsert: true, canMove: true, searchableText:'Haddock'}}
   ];
   fishSection.setItems(fishDataSet);
   sections.push(fishSection);
    
   listView.sections = sections;
   
   listView.addEventListener('insert', function(e) {
    var item = e.section.getItemAt(e.itemIndex);
    e.section.insertItemsAt(e.itemIndex, [item]);
   
   });
   win.add(listView);
   navWin.open();

Vijay Singh 2017-08-11

Backported PR (6_2_X) : https://github.com/appcelerator/titanium_mobile/pull/9303
Eric Wieber 2017-08-15

FR Passed. Able to perform edit/delete actions on search results for ListViews and TableViews using searchbars
Eric Wieber 2017-08-18

Verified in builds SDK 6.2.0.v20170816173122 & 7.0.0.v20170818091652

JSON Source