next version of fix for selectList

problem: When searching, the result list was not updated properly and clicking on a result was not registered if the user did not scroll through the list before (and therefore update)
this fix now makes debouncing searchupdates cleaner
also fixes a problem with the cancel button in the searchfield, which can apparently only handle iconbuttons

src/listcontroller.js

@@ -90,10 +90,8 @@ export default class DatalistController {
     if (this.onlineSearch) {
       this.search = search;
       this.query.search = search;
-      //this.refresh();
     } else if (this.clientSearchKeys.length > 0) {
       this.search = search;
-      //this.refresh();
     }
   }
 

src/views/selectList.js

 import m from 'mithril';
 import Stream from 'mithril/stream';
 import {
-  List, ListTile, Search, IconButton, Button, Shadow, Toolbar,
+  List, ListTile, Search, IconButton, Button, Toolbar,
   ToolbarTitle,
 } from 'polythene-mithril';
 import infinite from 'mithril-infinite';
-import { debounce } from '../utils';
 import { icons, BackButton, ClearButton, SearchIcon } from './elements';
 
 
@@ -22,18 +21,6 @@ class SearchField {
   view({ state, attrs }) {
     // incoming value and focus added for result list example:
     const value = attrs.value !== undefined ? attrs.value : state.value();
-
-    const ExitButton = attrs.onCancel ? {
-      view() {
-        return m(Button, {
-          element: 'div',
-          label: 'Cancel',
-          className: 'blue-button',
-          events: { onclick: attrs.onCancel },
-        });
-      },
-    } : 'div';
-
     return m(Search, Object.assign(
       {},
       {
@@ -49,13 +36,8 @@ class SearchField {
           defaultValue: attrs.defaultValue,
         },
         buttons: {
-          none: {
-            before: m.trust(''),
-            after: m(ExitButton),
-          },
           focus: {
             before: m(BackButton, { leave: state.leave }),
-            after: m(ExitButton),
           },
           focus_dirty: {
             before: m(BackButton, { leave: state.leave }),
@@ -66,7 +48,6 @@ class SearchField {
             after: m(ClearButton, { clear: state.clear }),
           },
         },
-        before: m(Shadow),
       },
       attrs,
     ));
@@ -84,7 +65,8 @@ export default class SelectList {
   }
 
   onupdate({ attrs: { selection = null } }) {
-    //console.log(selection);
+    // make it possible to change the selection from outside, e.g. to set the field to an
+    // existing group moderator
     if (selection) this.selected = selection;
   }
 
@@ -117,7 +99,7 @@ export default class SelectList {
     },
   }) {
     return m('div', [
-      this.selected ? m(Toolbar, { compact: true, style: { background: 'rgb(78, 242, 167)' } }, [
+      m(Toolbar, { compact: true, style: { background: 'rgb(78, 242, 167)' } }, this.selected ? [
         m(IconButton, {
           icon: { svg: m.trust(icons.clear) },
           ink: false,
@@ -141,37 +123,42 @@ export default class SelectList {
             },
           },
         }) : '',
-      ]) : m(SearchField, Object.assign({}, {
-        style: { background: 'rgb(78, 242, 167)' },
-        onCancel,
-        onChange: ({ value, focus }) => {
-          // onChange is called either if the value or focus fo the SearchField
-          // changes.
-          // At value change we want to update the search
-          // at focus changt we hie the list of results. As focus change also
-          // happens while clicking on an item in the list of results, the list
-          // is hidden after a short Timeout that has to be sufficiently long
-          // to register the onclick of the listitem. Can be a problem for different
-          // OS and browsers.
-          if (focus) {
-            this.showList = true;
-          } else if (!focus) {
-            // don't close the list immidiately, as 'out of focus' could 
-            // also mean that the user is clicking on a list item
-            setTimeout(() => { this.showList = false; m.redraw(); }, 500);
-          }
-          if (value !== this.searchValue) {
-            // if we always update the search value, this would also happen
-            // immidiately in the moment where we click on the listitem.
-            // Then, the list get's updated before the click is registered.
-            // So, we make sure this state change is due to value change and
-            // not due to focus change.
-            this.searchValue = value;
-            //controller.setSearch(value);
-            controller.debouncedSearch(value);
-          }
-        },
-      })),
+      ] : [
+        m(SearchField, Object.assign({}, {
+          style: { background: 'rgb(78, 242, 167)' },
+          onChange: ({ value, focus }) => {
+            // onChange is called either if the value or focus fo the SearchField
+            // changes.
+            // At value change we want to update the search
+            // at focus changt we hie the list of results. As focus change also
+            // happens while clicking on an item in the list of results, the list
+            // is hidden after a short Timeout that has to be sufficiently long
+            // to register the onclick of the listitem. Can be a problem for different
+            // OS and browsers.
+            if (focus) {
+              this.showList = true;
+            } else if (!focus) {
+              // don't close the list immidiately, as 'out of focus' could
+              // also mean that the user is clicking on a list item
+              setTimeout(() => { this.showList = false; m.redraw(); }, 500);
+            }
+            if (value !== this.searchValue) {
+              // if we always update the search value, this would also happen
+              // immidiately in the moment where we click on the listitem.
+              // Then, the list get's updated before the click is registered.
+              // So, we make sure this state change is due to value change and
+              // not due to focus change.
+              this.searchValue = value;
+              controller.debouncedSearch(value);
+            }
+          },
+        })),
+        onCancel ? m(Button, {
+          label: 'cancel',
+          className: 'blue-button',
+          events: { onclick: onCancel },
+        }) : '',
+      ]),
       (this.showList && !this.selected) ? m(List, {
         style: { height: '400px', 'background-color': 'white' },
         tiles: m(infinite, controller.infiniteScrollParams(this.item())),

src/views/tableView.js

@@ -3,7 +3,6 @@ import infinite from 'mithril-infinite';
 import { List, ListTile, Toolbar, Search, Button } from 'polythene-mithril';
 import 'polythene-css';
 import { styler } from 'polythene-core-css';
-import { debounce } from '../utils';
 
 const tableStyles = [
   {