🐛 [Frontend] Disable Autocompletion (#7549)

Author: odeimaiz

services/static-webserver/client/source/class/osparc/dashboard/SearchBarFilter.js

@@ -110,6 +110,7 @@ qx.Class.define("osparc.dashboard.SearchBarFilter", {
           this._add(control, {
             flex: 1
           });
+          osparc.utils.Utils.disableAutocomplete(control);
           break;
         case "reset-button":
           control = new qx.ui.toolbar.Button(null, "@MaterialIcons/close/20").set({

services/static-webserver/client/source/class/osparc/filter/TextFilter.js

@@ -72,9 +72,7 @@ qx.Class.define("osparc.filter.TextFilter", {
             paddingRight: 15,
             placeholder: this.tr("Filter")
           });
-          control.getContentElement().setAttribute("autocomplete", "off");
-          // FIXME: autocomplete "off" doesn't work on Chrome
-          // https://www.codementor.io/leonardofaria/disabling-autofill-in-chrome-zec47xcui
+          osparc.utils.Utils.disableAutocomplete(control);
           this._add(control, {
             width: "100%"
           });

services/static-webserver/client/source/class/osparc/form/tag/TagItem.js

@@ -122,8 +122,8 @@ qx.Class.define("osparc.form.tag.TagItem", {
           control = new qx.ui.form.TextField().set({
             required: true
           });
+          osparc.utils.Utils.disableAutocomplete(control);
           this.__validationManager.add(control);
-          control.getContentElement().setAttribute("autocomplete", "off");
           break;
         case "description-input":
           control = new qx.ui.form.TextArea().set({

services/static-webserver/client/source/class/osparc/utils/Utils.js

@@ -91,6 +91,13 @@ qx.Class.define("osparc.utils.Utils", {
 
     FLOATING_Z_INDEX: 1000001 + 1,
 
+    disableAutocomplete: function(control) {
+      if (control && control.getContentElement()) {
+        control.getContentElement().setAttribute("autocomplete", "off");
+        control.getContentElement().setAttribute("type", "search");
+      }
+    },
+
     checkImageExists: function(url) {
       return new Promise(resolve => {
         const img = new Image();