# Improve/346 Disable group select-box when the user does not Choose the grant "Only inside the group"

* Fix up group selectbox behavior(collapse).

lib/views/_form.html

@@ -49,18 +49,20 @@
       {% if forceGrant %}
       <input type="hidden" name="pageForm[grant]" value="{{ forceGrant }}">
       {% else %}
-      <select name="pageForm[grant]" class="m-r-5 selectpicker btn-group-sm">
+      <select id="select-grant" name="pageForm[grant]" class="m-r-5 selectpicker btn-group-sm">
         {% for grantId, grantLabel in consts.pageGrants %}
         <option value="{{ grantId }}" {% if pageForm.grant|default(page.grant) == grantId %}selected{% endif %} {% if grantId == 5 && userRelatedGroups.length == 0 %}disabled{% endif %}>{{ t(grantLabel) }}</option>
         {% endfor %}
       </select>
       {% endif %}
       {% if userRelatedGroups.length != 0 %}
-      <select name="pageForm[grantUserGroupId]" class="selectpicker btn-group-sm">
-        {% for userGroup in userRelatedGroups %}
-        <option value="{{ userGroup.id }}">{{ userGroup.name }}</option>
-        {% endfor %}
-      </select>
+      <div id="select-grant-group" class="collapse width">
+        <select name="pageForm[grantUserGroupId]" class="selectpicker btn-group-sm">
+          {% for userGroup in userRelatedGroups %}
+          <option value="{{ userGroup.id }}">{{ userGroup.name }}</option>
+          {% endfor %}
+        </select>
+      </div>
       {% endif %}
       <input type="hidden" id="edit-form-csrf" name="_csrf" value="{{ csrf() }}">
       <button type="submit" class="btn btn-primary btn-submit" id="edit-form-submit">{{ t('Update') }}</button>

resource/js/legacy/crowi-form.js

@@ -45,6 +45,20 @@
     $('body').removeClass('on-edit');
   });
 
+  $('#select-grant').on('change', function() {
+    var $selectGrant = $('#select-grant');
+    var selectGrant = $selectGrant.val();
+    console.log(selectGrant);
+    if (selectGrant === '5') {
+      console.log('show collapse');
+      $('#select-grant-group').collapse('show');
+    }
+    else {
+      console.log('hide collapse');
+      $('#select-grant-group').collapse('hide');
+    }
+  });
+
 /**
  * DOM ready
  */

resource/styles/scss/_override-bootstrap-collapse-width.scss

@@ -0,0 +1,8 @@
+// override bootstrap-collapse behavior (holizontal collapse)
+// see: https://getbootstrap.com/docs/3.3/javascript/#collapse, https://stackoverflow.com/a/18602739/1596547
+.collapsing.width {
+  -webkit-transition-property: width, visibility;
+  transition-property: width, visibility;
+  width: 0;
+  height: auto;
+}

resource/styles/scss/style.scss

@@ -7,6 +7,8 @@
 
 @import 'override-bootstrap-variables';
 
+@import 'override-bootstrap-collapse-width';
+
 // override react-bootstrap-typeahead styles
 @import 'override-rbt';