Allow to pass in boolean to preventEnterSubmit directive (#8639)

* Pass in value to preventEnterSubmit directive

* Set enabled similar to preventDefault and preventEnterSubmit directives

* Update prevent enter submit value

* Init value from controller

* Use a different default input id prefix for umb-search-filter

* Fix typo

* Check for truthly value

* Revert "Set enabled similar to preventDefault and preventEnterSubmit directives"

This reverts commit 536ce85.

* None pointer events when clicking icon

* Use color variable

Author: bjarnef

src/Umbraco.Web.UI.Client/src/common/directives/components/forms/prevententersubmit.directive.js

@@ -17,7 +17,7 @@ angular.module("umbraco.directives")
             }
 
             $(element).on("keypress", function (event) {
-                if (event.which === 13) {
+                if (event.which === 13 && enabled === true) {
                     event.preventDefault();
                 }
             });

src/Umbraco.Web.UI.Client/src/common/directives/components/forms/umbsearchfilter.directive.js

@@ -24,7 +24,7 @@
 @param {boolean} model Set to <code>true</code> or <code>false</code> to set the checkbox to checked or unchecked.
 @param {string} inputId Set the <code>id</code> of the checkbox.
 @param {string} text Set the text for the checkbox label.
-@param {string} labelKey Set a dictinary/localization string for the checkbox label
+@param {string} labelKey Set a dictionary/localization string for the checkbox label
 @param {callback} onChange Callback when the value of the checkbox change by interaction.
 @param {boolean} autoFocus Add autofocus to the input field
 @param {boolean} preventSubmitOnEnter Set the enter prevent directive or not
@@ -42,13 +42,15 @@
         vm.change = change;
 
         function onInit() {
-            vm.inputId = vm.inputId || "umb-check_" + String.CreateGuid();
+            vm.inputId = vm.inputId || "umb-search-filter_" + String.CreateGuid();
+            vm.autoFocus = Object.toBoolean(vm.autoFocus) === true;
+            vm.preventSubmitOnEnter = Object.toBoolean(vm.preventSubmitOnEnter) === true;
 
             // If a labelKey is passed let's update the returned text if it's does not contain an opening square bracket [
             if (vm.labelKey) {
                  localizationService.localize(vm.labelKey).then(function (data) {
-                      if(data.indexOf('[') === -1){
-                        vm.text = data;
+                      if (data.indexOf('[') === -1){
+                         vm.text = data;
                       }
                  });
             }

src/Umbraco.Web.UI.Client/src/less/components/umb-search-filter.less

@@ -21,11 +21,12 @@ html .umb-search-filter {
     // "icon-search" class it kept for backward compatibility
     .umb-icon, 
     .icon-search {
-        color: #d8d7d9;
+        color: @gray-8;
         position: absolute;
         top: 0;
         bottom: 0;
         left: 10px;
         margin: auto 0;
+        pointer-events: none;
     }
 }

src/Umbraco.Web.UI.Client/src/views/components/forms/umb-search-filter.html

@@ -2,27 +2,14 @@
     <div class="umb-search-filter" ng-class="vm.cssClass">
         <label for="{{vm.inputId}}" class="sr-only">{{vm.text}}</label>
         <umb-icon icon="icon-search" class="icon-search"></umb-icon>
-        <input
-                ng-if="vm.preventSubmitOnEnter"
-                id="{{vm.inputId}}"
-                type="text"
-                ng-change="vm.change()"
-                ng-model="vm.model"
-                class="umb-search-filter__input"
-                placeholder="{{vm.text}}"
-                umb-auto-focus="{{vm.autoFocus === true}}"
-                prevent-enter-submit
-                no-dirty-check />
-
-        <input
-                ng-if="!vm.preventSubmitOnEnter"
-                id="{{vm.inputId}}"
-                type="text"
-                ng-change="vm.change()"
-                ng-model="vm.model"
-                class="umb-search-filter__input {{vm.cssClass}}"
-                placeholder="{{vm.text}}"
-                umb-auto-focus="{{vm.autoFocus === true}}"
-                no-dirty-check />
+        <input type="text"
+               id="{{vm.inputId}}"
+               ng-change="vm.change()"
+               ng-model="vm.model"
+               class="umb-search-filter__input"
+               placeholder="{{vm.text}}"
+               umb-auto-focus="{{vm.autoFocus}}"
+               prevent-enter-submit="{{vm.preventSubmitOnEnter}}"
+               no-dirty-check />
     </div>
 </div>