dropdown --> datalist

Author: mensinda

webapp/src/main/resources/public/js/actions/users/UserModalActions.js

@@ -18,8 +18,7 @@ class UserModalActions {
             "pushCurrentLocale",
             "removeLocaleFromList",
             "updateCanTranslateAllLocales",
-            "updateLocaleFilter",
-            "updateSelectedLocale",
+            "updateLocaleInput",
         );
     }
 }

webapp/src/main/resources/public/js/components/header/LocaleSelectorModal.js

@@ -10,14 +10,14 @@ class LocaleSelectorModal extends React.Component {
     };
 
     state = {
-        "selectedLocale": Locales.getCurrentLocale()
+        "localeInput": Locales.getCurrentLocale()
     };
 
     /**
      * Changes the locale of the app by setting the locale cookie and reloading the page.
      */
     onSaveClicked = () => {
-        document.cookie = 'locale=' + this.state.selectedLocale;
+        document.cookie = 'locale=' + this.state.localeInput;
         document.location.reload(true);
     };
 
@@ -34,7 +34,7 @@ class LocaleSelectorModal extends React.Component {
      * @returns {boolean}
      */
     isNewLocaleSelected = () => {
-        return Locales.getCurrentLocale() !== this.state.selectedLocale;
+        return Locales.getCurrentLocale() !== this.state.localeInput;
     };
 
     /**
@@ -44,7 +44,7 @@ class LocaleSelectorModal extends React.Component {
      */
     onLocaleClicked = (locale) => {
         this.setState({
-            "selectedLocale": locale
+            "localeInput": locale
         });
     };
 
@@ -56,7 +56,7 @@ class LocaleSelectorModal extends React.Component {
     getLocaleListGroupItem = (locale) => {
 
         let localeDisplayName = Locales.getNativeDispalyName(locale);
-        let active = locale === this.state.selectedLocale;
+        let active = locale === this.state.localeInput;
 
         return (
             <ListGroupItem active={active}

webapp/src/main/resources/public/js/components/users/UserModal.js

@@ -31,15 +31,13 @@ class UserModal extends React.Component{
 
     renderLocales() {
         const options = [];
+        let freeTagList = []
         for (let tag of this.props.locales.allLocales.map((x) => x.bcp47Tag).toSorted()) {
             if (this.props.modal.localeTags.includes(tag) || (this.props.modal.localeFilter && !tag.toLowerCase().includes(this.props.modal.localeFilter.toLowerCase()))) {
                 continue;
             }
-            options.push(
-                <MenuItem key={tag} eventKey={tag} active={tag === this.props.modal.selectedLocale}>
-                    {tag}
-                </MenuItem>
-            );
+            options.push(<option key={tag} value={tag} />);
+            freeTagList.push(tag);
         }
 
         let localeElements = [];
@@ -57,36 +55,20 @@ class UserModal extends React.Component{
                 <div className="locales-list panel panel-default">
                     {localeElements}
                 </div>
-                <Dropdown
-                    id="all-locales"
+                <FormControl
+                    onChange={(e) => UserModalActions.updateLocaleInput(e.target.value)}
+                    type="text"
+                    value={this.props.modal.localeInput}
                     style={{gridArea: 'new-select'}}
-                >
-                    <Dropdown.Toggle
-                        id="all-locales-btn"
-                        style={{width: '100%'}}
-                        onClick={() => UserModalActions.updateLocaleFilter('')}
-                    >
-                        {this.props.modal.selectedLocale}
-                    </Dropdown.Toggle>
-                    <Dropdown.Menu
-                        style={{overflow: 'scroll', maxHeight: '256px', width: '100%', top: '35px'}}
-                        onSelect={(k) => k !== '__filter__' && UserModalActions.updateSelectedLocale(k)}
-                    >
-                        <MenuItem eventKey='__filter__'>
-                            {/* Extra div to cactch the click events into the input field */}
-                            <div onClick={(e) => {e.stopPropagation(); e.preventDefault();}}>
-                                <FormControl
-                                    type="text"
-                                    value={this.props.modal.localeFilter}
-                                    onChange={(e) => UserModalActions.updateLocaleFilter(e.target.value)}
-                                />
-                            </div>
-                        </MenuItem>
-                        {options}
-                    </Dropdown.Menu>
-                </Dropdown>
+                    placeholder="de-DE"
+                    id="new-locale-input"
+                    list="new-locale-options"
+                />
+                <datalist id="new-locale-options">
+                    {options}
+                </datalist>
                 <div style={{gridArea: "new-btn", justifySelf: "start"}}>
-                    <Button bsStyle="primary" onClick={UserModalActions.pushCurrentLocale}>
+                    <Button bsStyle="primary" onClick={UserModalActions.pushCurrentLocale} disabled={!freeTagList.includes(this.props.modal.localeInput)}>
                         <span className="glyphicon glyphicon-plus foreWhite" aria-label="add locale for user"/>
                     </Button>
                 </div>

webapp/src/main/resources/public/js/stores/users/UserModalStore.js

@@ -46,10 +46,7 @@ class UserModalStore {
         this.localeTags = [];
 
         /** @type {String} */
-        this.selectedLocale = '';
-
-        /** @type {String} */
-        this.localeFilter = '';
+        this.localeInput = '';
 
         this.bindActions(UserModalActions);
         this.registerAsync(UserDataSource);
@@ -71,8 +68,7 @@ class UserModalStore {
         this.currentUsernameChecked = false;
         this.canTranslateAllLocales = store.currentUser.canTranslateAllLocales;
         this.localeTags = store.currentUser.getLocaleTags();
-        this.selectedLocale = this.getAnyLocale();
-        this.localeFilter = '';
+        this.localeInput = this.getAnyLocale();
     }
 
     updateUsername(username) {
@@ -136,8 +132,8 @@ class UserModalStore {
     }
 
     pushCurrentLocale() {
-        this.localeTags = this.localeTags.concat([this.selectedLocale]);
-        this.selectedLocale = this.getAnyLocale();
+        this.localeTags = this.localeTags.concat([this.localeInput]);
+        this.localeInput = this.getAnyLocale();
     }
 
     removeLocaleFromList(tag) {
@@ -149,12 +145,8 @@ class UserModalStore {
         this.canTranslateAllLocales = state;
     }
 
-    updateLocaleFilter(localeFilter) {
-        this.localeFilter = localeFilter;
-    }
-
-    updateSelectedLocale(selectedLocale) {
-        this.selectedLocale = selectedLocale;
+    updateLocaleInput(localeInput) {
+        this.localeInput = localeInput;
     }
 }