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

* Change group select UI to React Component.(inprogress...)
  * 復帰中

resource/js/app.js

@@ -187,20 +187,19 @@ if (pageEditorOptionsSelectorElem) {
 const userRelatedGroups = JSON.parse(document.getElementById('user-related-group-data').textContent || '{}', (value) => {
   return new UserGroup(value);
 })
-const pageGrant = new PageGrant();
 const pageEditorGrantSelectorElem = document.getElementById('page-grant-selector');
 if (pageEditorGrantSelectorElem) {
+  pageGrant = new PageGrant();
   pageGrant.grant = document.getElementById("page-grant").value;
   const grantGroupData = document.getElementById("grant-group").value;
   if (grantGroupData != null) {
-    grantGroup = new UserGroup();
+    const grantGroup = new UserGroup();
     grantGroup.userGroup =
     pageGrant.grantGroup = new UserGroup();
-
   }
   ReactDOM.render(
     <GrantSelector crowi={crowi}
-      userRelatedGroups={userRelatedGroups} pageGrant={new PageGrant(pageGrant)}
+      userRelatedGroups={userRelatedGroups} pageGrant={pageGrant}
       onChange={(newPageGrant) => { // set onChange event handler
         // set options
         pageEditor.setGrant(newPageGrant);

resource/js/components/PageEditor/GrantSelector.js

@@ -21,7 +21,7 @@ export default class GrantSelector extends React.Component {
     const config = this.props.crowi.getConfig();
 
     this.state = {
-      pageGrant: this.props.pageGrant || new PageGrant(),
+      pageGrant: this.props.pageGrant,
       isGroupModalShown: false,
     }
 
@@ -46,8 +46,8 @@ export default class GrantSelector extends React.Component {
     this.grantSelectorInputEl.value = this.state.pageGrant.grant;
   }
 
-  onChangeGrant(userGroup) {
-    const newValue = userGroup;
+  onChangeGrant(grant) {
+    const newValue = this.grantSelectorInputEl.value;
     const newGrant = Object.assign(this.state.pageGrant, {grant: newValue});
     this.setState({ pageGrant: newGrant });
 
@@ -87,7 +87,7 @@ export default class GrantSelector extends React.Component {
     return (
       <FormGroup controlId="formControlsSelect">
         <ControlLabel>Grant:</ControlLabel>
-        <FormControl componentClass="select" placeholder="select" bsClass={bsClassName} className="btn-group-sm selectpicker"
+        <FormControl componentClass="select" placeholder="select" defaultValue={this.state.pageGrant.grant} bsClass={bsClassName} className="btn-group-sm selectpicker"
             onChange={this.onChangeGrant}
             inputRef={ el => this.grantSelectorInputEl=el }>