[login/request account] Weird ordering of projects in dropdown (#7795)

Solves the incorrect order of dropdowns of select when no label is being used for login design. Resolves #7790
aces · Nov 8, 2021 · 6356a1e · 6356a1e
1 parent 1f270b4
commit 6356a1e
Show file tree

Hide file tree

Showing 3 changed files with 10 additions and 2 deletions.
diff --git a/jsx/Form.js b/jsx/Form.js
@@ -591,6 +591,12 @@ class SelectElement extends Component {
       });
     }
 
+    if (this.props.placeholder !== '') {
+      optionList.unshift(<option value={''} selected={true}>
+        {this.props.placeholder}
+      </option>);
+    }
+
     // Default to empty string for regular select and to empty array for 'multiple' select
     const value = this.props.value || (multiple ? [] : '');
 
@@ -653,6 +659,7 @@ SelectElement.propTypes = {
   errorMessage: PropTypes.string,
   onUserInput: PropTypes.func,
   noMargins: PropTypes.bool,
+  placeholder: PropTypes.string,
 };
 
 SelectElement.defaultProps = {
@@ -673,6 +680,7 @@ SelectElement.defaultProps = {
     console.warn('onUserInput() callback is not set');
   },
   noMargins: false,
+  placeholder: '',
 };
 
 /**

diff --git a/modules/login/jsx/loginIndex.js b/modules/login/jsx/loginIndex.js
@@ -80,8 +80,6 @@ class Login extends Component {
         state.study.logo = window.location.origin
           + '/' + json.login.logo;
         // request account setup.
-        json.requestAccount.site[''] = 'Choose your site:';
-        json.requestAccount.project[''] = 'Choose your project:';
         state.component.requestAccount = json.requestAccount;
         state.isLoaded = true;
         this.setState(state);

diff --git a/modules/login/jsx/requestAccount.js b/modules/login/jsx/requestAccount.js
@@ -192,6 +192,7 @@ class RequestAccount extends Component {
             onUserInput={this.setForm}
             emptyOption={false}
             required={true}
+            placeholder={'Choose your site:'}
           />
           <SelectElement
             name={'project'}
@@ -200,6 +201,7 @@ class RequestAccount extends Component {
             onUserInput={this.setForm}
             emptyOption={false}
             required={true}
+            placeholder={'Choose your project:'}
           />
           <CheckboxElement
             name={'examiner'}