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

* Fix code based on review feedback.
  * Go outside DOM value change logic from React component renderer to outside named function.

resource/js/app.js

@@ -185,14 +185,18 @@ if (pageEditorOptionsSelectorElem) {
 // render GrantSelector
 const userRelatedGroups = JSON.parse(document.getElementById('user-related-group-data').textContent || '{}', (value) => {
   return new UserGroup(value);
-})
+});
 const pageEditorGrantSelectorElem = document.getElementById('page-grant-selector');
-const pageGrantElem = document.getElementById("page-grant");
-const pageGrantGroupElem = document.getElementById("grant-group");
+const pageGrantElem = document.getElementById('page-grant');
+const pageGrantGroupElem = document.getElementById('grant-group');
+function setGrant(newPageGrant) {
+  pageGrantElem.value = newPageGrant.grant;
+  pageGrantGroupElem.value = newPageGrant.grantGroup.userGroupId || '';
+}
 if (pageEditorGrantSelectorElem) {
   pageGrant = new PageGrant();
-  pageGrant.grant = document.getElementById("page-grant").value;
-  const grantGroupData = JSON.parse(document.getElementById("grant-group").textContent || '{}');
+  pageGrant.grant = document.getElementById('page-grant').value;
+  const grantGroupData = JSON.parse(document.getElementById('grant-group').textContent || '{}');
   if (grantGroupData != null) {
     const grantGroup = new UserGroup();
     grantGroup.userGroupId = grantGroupData.id;
@@ -202,11 +206,7 @@ if (pageEditorGrantSelectorElem) {
   ReactDOM.render(
     <GrantSelector crowi={crowi}
       userRelatedGroups={userRelatedGroups} pageGrant={pageGrant}
-      onChange={(newPageGrant) => { // set onChange event handler
-        // set options
-        pageGrantElem.value = newPageGrant.grant;
-        pageGrantGroupElem.value = newPageGrant.grantGroup.userGroupId || '';
-      }} />,
+      onChange={setGrant} />,
     pageEditorGrantSelectorElem
   );
 }

resource/js/components/PageEditor/GrantSelector.js

@@ -36,7 +36,6 @@ export default class GrantSelector extends React.Component {
     };
 
     this.onChangeGrant = this.onChangeGrant.bind(this);
-    // this.updateElementValue = this.updateElementValue.bind(this);
   }
 
   // Init component when the component did mount.
@@ -131,7 +130,7 @@ export default class GrantSelector extends React.Component {
         </li>;
     });
     return (
-      <Modal show={this.props.isGroupModalShown} onHide={this.props.cancel} className="select-grant-group">
+      <Modal show={this.props.isGroupModalShown} className="select-grant-group">
         <Modal.Header closeButton>
           <Modal.Title>
             Select a Group