Stop selecting items in milestone dropdown

app/assets/javascripts/boards/components/boards_selector.js

@@ -42,6 +42,12 @@ require('./board_new_form');
           this.loadBoards(false);
         }
       },
+      board: {
+        handler() {
+          this.updateMilestoneFilterDropdown();
+        },
+        deep: true,
+      }
     },
     computed: {
       currentPage() {
@@ -88,17 +94,20 @@ require('./board_new_form');
           });
         }
       },
-    },
-    created() {
+      updateMilestoneFilterDropdown() {
         const $milestoneDropdown = $('.dropdown-menu-milestone');
-      console.log(this.currentBoard);
+        const hideElements = this.board.milestone_id === undefined;
 
+        $milestoneDropdown.find('.dropdown-input').toggle(hideElements);
+        $milestoneDropdown.find('.dropdown-footer').toggle(hideElements);
+        $milestoneDropdown.find('.dropdown-content li')
+          .filter((i, el) => $(el).find('.is-active').length === 0)
+          .toggle(hideElements);
+      },
+    },
+    created() {
       this.state.currentBoard = this.currentBoard;
-
-      if (this.currentBoard.milestone_id) {
-        $milestoneDropdown.find('.dropdown-input').hide();
-        $milestoneDropdown.find('.dropdown-footer').hide();
-      }
+      this.updateMilestoneFilterDropdown();
     },
   });
 })();

app/assets/javascripts/gl_dropdown.js

@@ -532,7 +532,16 @@
     };
 
     GitLabDropdown.prototype.renderItem = function(data, group, index) {
-      var field, fieldName, html, selected, text, url, value;
+      var field, fieldName, html, selected, text, url, value, rowHidden;
+
+      value = this.options.id ? this.options.id(data) : data.id;
+
+      if (value) { value = value.toString().replace(/'/g, '\\\''); }
+
+      // Hide element
+      if (this.options.hideRow && this.options.hideRow(value)) {
+        rowHidden = true;
+      }
       if (group == null) {
         group = false;
       }
@@ -541,7 +550,7 @@
         index = false;
       }
       html = document.createElement('li');
-      if (data === 'divider' || data === 'separator') {
+      if ((data === 'divider' || data === 'separator') && !rowHidden) {
         html.className = data;
         return html;
       }
@@ -556,11 +565,8 @@
         html = this.options.renderRow.call(this.options, data, this);
       } else {
         if (!selected) {
-          value = this.options.id ? this.options.id(data) : data.id;
           fieldName = this.options.fieldName;
 
-          if (value) { value = value.toString().replace(/'/g, '\\\''); }
-
           field = this.dropdown.parent().find("input[name='" + fieldName + "'][value='" + value + "']");
           if (field.length) {
             selected = true;
@@ -596,6 +602,10 @@
           link.dataset.index = index;
         }
 
+        if (rowHidden) {
+          link.style.display = 'none';
+        }
+
         html.appendChild(link);
       }
       return html;

app/assets/javascripts/milestone_select.js

@@ -87,6 +87,11 @@
           },
           selectable: true,
           toggleLabel: function(selected, el, e) {
+            if ($('html').hasClass('issue-boards-page') && !$dropdown.hasClass('js-issue-board-sidebar') &&
+              !$dropdown.closest('.add-issues-modal').length && !selected) {
+              return gl.issueBoards.BoardsStore.state.currentBoard.milestone.title;
+            }
+
             if (selected && 'id' in selected && $(el).hasClass('is-active')) {
               return selected.title;
             } else {
@@ -114,7 +119,24 @@
             return $value.css('display', '');
           },
           vue: $dropdown.hasClass('js-issue-board-sidebar'),
+          hideRow: function(milestone) {
+            if ($('html').hasClass('issue-boards-page') && !$dropdown.hasClass('js-issue-board-sidebar') &&
+              !$dropdown.closest('.add-issues-modal').length && gl.issueBoards.BoardsStore.state.currentBoard.milestone.title) {
+              return milestone !== gl.issueBoards.BoardsStore.state.currentBoard.milestone.title;
+            }
+
+            return false;
+          },
+          isSelectable: function() {
+            if ($('html').hasClass('issue-boards-page') && !$dropdown.hasClass('js-issue-board-sidebar') &&
+              !$dropdown.closest('.add-issues-modal').length && gl.issueBoards.BoardsStore.state.currentBoard.milestone.title) {
+              return false;
+            }
+
+            return true;
+          },
           clicked: function(selected, $el, e) {
+            if (!selected) return;
             var data, isIssueIndex, isMRIndex, page, boardsStore;
             page = $('body').data('page');
             isIssueIndex = page === 'projects:issues:index';