Switched to using html select.

js/models/blockedNumbers.js

@@ -86,7 +86,7 @@
       return m.get('number');
     },
     getNumber(number) {
-      return this.models.find(m => m.number === number);
+      return this.models.find(m => m.get('number') === number);
     },
   });
 

js/views/blocked_number_view.js

@@ -15,7 +15,7 @@
       templateName: 'blockedUserSettings',
       className: 'blockedUserSettings',
       events: {
-        'click .sync': 'sync',
+        'click .unblock-button': 'onUnblock',
       },
       initialize() {
         storage.onready(() => {
@@ -25,41 +25,51 @@
           });
 
           this.listView.render();
-          this.$('.blocked-user-settings').append(this.listView.el);
+          this.blockedUserSettings = this.$('.blocked-user-settings');
+          this.blockedUserSettings.prepend(this.listView.el);
         });
       },
       render_attributes() {
         return {
           blockedHeader: i18n('settingsUnblockHeader'),
-        };
-      },
-    });
-
-
-  Whisper.BlockedNumberListView = Whisper.ListView.extend({
-    itemView: Whisper.View.extend({
-      tagName: 'li',
-      templateName: 'blockedNumber',
-      events: {
-        'click .unblock-button': 'onUnblock',
-      },
-      render_attributes() {
-        const number = (this.model && this.model.get('number')) || '-';
-        return {
-          number,
           unblockMessage: i18n('unblockUser'),
-        }
+        };
       },
       onUnblock() {
-        const number = this.model && this.model.get('number');
+        const number = this.$('select option:selected').val();
         if (!number) return;
 
         if (BlockedNumberController.isBlocked(number)) {
           BlockedNumberController.unblock(number);
           window.onUnblockNumber(number);
-          this.remove();
+          this.listView.collection.remove(this.listView.collection.where({ number }));
         }
       },
-    }),
-  });
+    });
+
+
+  Whisper.BlockedNumberListView = Whisper.View.extend({
+      tagName: 'select',
+      initialize(options) {
+        this.options = options || {};
+        this.listenTo(this.collection, 'add', this.addOne);
+        this.listenTo(this.collection, 'reset', this.addAll);
+        this.listenTo(this.collection, 'remove', this.addAll);
+      },
+      addOne(model) {
+        const number = model.get('number');
+        if (number) {
+          this.$el.append(`<option value="${number}">${number}</option>`);
+        }
+      },
+      addAll() {
+        this.$el.html('');
+        this.collection.each(this.addOne, this);
+      },
+
+      render() {
+        this.addAll();
+        return this;
+      },
+    });
   })();

settings.html

@@ -34,15 +34,10 @@
       </p>
     </div>
 </script>
-<script type='text/x-tmpl-mustache' id='blockedNumber'>
-  <div class='blocked-number'>
-    <div class='wordwrap'>{{ number }}</div>
-    <button class='grey unblock-button'>{{ unblockMessage }}</button>
-  </div>
-</script>
 <script type='text/x-tmpl-mustache' id='blockedUserSettings'>
   <h3>{{ blockedHeader }}</h3>
   <div class='blocked-user-settings'>
+      <button class='grey unblock-button'>{{ unblockMessage }}</button>
   </div>
 </script>
 <script type='text/x-tmpl-mustache' id='settings'>

stylesheets/_settings.scss

@@ -39,23 +39,24 @@
     }
   }
 
-  .blocked-number {
+  .blocked-user-settings {
     display: flex;
     flex: 1;
     flex-direction: row;
-    justify-content: center;
+    align-items: center;
   }
 
-  .blocked-number {
-    div {
+  .blocked-user-settings {
+    select {
       flex: 1;
-      flex-wrap: wrap-reverse;
-      word-break: break-all;
+      cursor: pointer;
+      font-size: 14px;
     }
     button {
-      line-height: 36px;
+      line-height: 28px;
       padding: 0 20px;
-      margin: 0 0 20px 20px;
+      margin: auto;
+      margin-left: 20px;
     }
   }