Hide 'Press enter' dropdown if rejex test fails

assets/scripts/src/choices.js

@@ -871,22 +871,33 @@ export class Choices {
             if(this.input.value) {
                 const activeItems = this.store.getItemsFilteredByActive();
                 const isUnique = !activeItems.some((item) => item.value === this.input.value);
+                let canAddItem = true;
 
-                if (this.config.maxItemCount && this.config.maxItemCount > 0 && this.config.maxItemCount <= this.itemList.children.length) {
+                // If a user has supplied a regular expression filter
+                if(this.config.regexFilter) {
+                    // Determine whether we can update based on whether 
+                    // our regular expression passes 
+                    canAddItem = this._regexFilter(this.input.value);
+                }
+                
+                if(this.config.maxItemCount && this.config.maxItemCount > 0 && this.config.maxItemCount <= this.itemList.children.length) {
                     dropdownItem = this._getTemplate('notice', `Only ${ this.config.maxItemCount } values can be added.`);
                 } else if(!this.config.duplicateItems && !isUnique) {
                     dropdownItem = this._getTemplate('notice', `Only unique values can be added.`);
-                } else {
+                } else if(canAddItem) {
                     dropdownItem = this._getTemplate('notice', `Press Enter to add "${ this.input.value }"`);
                 }
                 
-                if((this.config.regexFilter && this._regexFilter(this.input.value)) || !this.config.regexFilter) {
+                if(canAddItem !== false) {
                     this.dropdown.innerHTML = dropdownItem.outerHTML;
                     if(!this.dropdown.classList.contains(this.config.classNames.activeState)) {
                         this.showDropdown();    
                     }
+                } else {
+                    if(hasActiveDropdown) {
+                        this.hideDropdown();  
+                    }
                 }
-
             } else {
                 if(hasActiveDropdown) {
                     this.hideDropdown();  

assets/styles/css/base.css

@@ -81,15 +81,13 @@ h6, .h6 {
     color: #00bcd4; }
 
 .logo {
-  width: auto;
+  width: 100%;
+  height: auto;
   display: inline-block;
   max-width: 100%;
   vertical-align: top;
   padding: 6px 0; }
 
-.hidden-ie {
-  display: block; }
-
 .visible-ie {
   display: none; }
 

assets/styles/css/base.min.css

@@ -1 +1 @@
-*{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}*,:after,:before{box-sizing:border-box}body,html{position:relative;margin:0;width:100%;height:100%}body{font-family:"Helvetica Neue",Helvetica,Arial,"Lucida Grande",sans-serif;font-size:16px;line-height:1.4;color:#fff;background-color:#333;overflow-x:hidden}hr,label{display:block}label{margin-bottom:8px;font-size:14px;font-weight:500}hr{margin:36px 0;border:0;border-bottom:1px solid #eaeaea;height:1px}h1,h2,h3,h4,h5,h6{margin-top:0;margin-bottom:12px;font-weight:400;line-height:1.2}a,a:focus,a:visited{color:#fff;text-decoration:none;font-weight:600}.h1,h1{font-size:32px}.h2,h2{font-size:24px}.h3,h3{font-size:20px}.h4,h4{font-size:18px}.h5,h5{font-size:16px}.h6,h6{font-size:14px}.container{display:block;margin:auto;max-width:40em;padding:48px}@media (max-width:620px){.container{padding:0}}.section{background-color:#fff;padding:24px;color:#333}.section a,.section a:focus,.section a:visited{color:#00bcd4}.logo{width:auto;display:inline-block;max-width:100%;vertical-align:top;padding:6px 0}.hidden-ie{display:block}.visible-ie{display:none}
+*{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}*,:after,:before{box-sizing:border-box}body,html{position:relative;margin:0;width:100%;height:100%}body{font-family:"Helvetica Neue",Helvetica,Arial,"Lucida Grande",sans-serif;font-size:16px;line-height:1.4;color:#fff;background-color:#333;overflow-x:hidden}hr,label{display:block}label{margin-bottom:8px;font-size:14px;font-weight:500}hr{margin:36px 0;border:0;border-bottom:1px solid #eaeaea;height:1px}h1,h2,h3,h4,h5,h6{margin-top:0;margin-bottom:12px;font-weight:400;line-height:1.2}a,a:focus,a:visited{color:#fff;text-decoration:none;font-weight:600}.h1,h1{font-size:32px}.h2,h2{font-size:24px}.h3,h3{font-size:20px}.h4,h4{font-size:18px}.h5,h5{font-size:16px}.h6,h6{font-size:14px}.container{display:block;margin:auto;max-width:40em;padding:48px}@media (max-width:620px){.container{padding:0}}.section{background-color:#fff;padding:24px;color:#333}.section a,.section a:focus,.section a:visited{color:#00bcd4}.logo{width:100%;height:auto;display:inline-block;max-width:100%;vertical-align:top;padding:6px 0}.visible-ie{display:none}

assets/styles/scss/base.scss

@@ -88,14 +88,14 @@ h6, .h6 { font-size: $global-font-size-h6; }
 }
 
 .logo {
-    width: auto;
+    width: 100%;
+    height: auto;
     display: inline-block;
     max-width: 100%;
     vertical-align: top;
     padding: $global-guttering/4 0;
 }
 
-.hidden-ie { display: block; }
 .visible-ie { display: none; }
 
 /*=====  End of Section comment block  ======*/

index.html

@@ -15,8 +15,10 @@
     <script src="assets/scripts/dist/choices.min.js"></script>
 
     <!--[if lt IE 9]>
-        .hidden-ie { display: none; }
-        .visible-ie { display: none; }
+        <style>
+            .hidden-ie { display: none; }
+            .visible-ie { display: block; }
+        </style>
     <![endif]-->
 </head>
 <body>
@@ -218,7 +220,7 @@
 
             var example5 = new Choices('#choices-5', {
                 prependValue: 'item-',
-                appendValue: `-${Date.now()}`,
+                appendValue: '-' + Date.now(),
             }).removeActiveItems();
 
             var example7 = new Choices('#choices-6', {