cboulanger / qx-contrib-Dialog

A set of often used dialog widgets for the qooxdoo framework (deprecated, use qooxdoo/qxl.dialog instead)
6 stars 10 forks source link

Chrome complains about password field not in <form> #19

Closed derrell closed 6 years ago

derrell commented 6 years ago

Recent Chrome complains about password fields not in a <form> element: [DOM] Password field is not contained in a form: (More info: https://goo.gl/9p2vKq)

Currently seeing this on Linux Chrome Version 66.0.3359.117 (Official Build) (64-bit)

derrell commented 6 years ago

I have fixed this problem (and one other) in my version of the Dialog widget by doing the following:

Add new class dialog.FormTag, as follows:

/* ************************************************************************

   qooxdoo dialog library

   http://qooxdoo.org/contrib/catalog/#Dialog

   Copyright:
     2018 Derrell Lipman

   License:
     MIT: https://opensource.org/licenses/MIT

   Authors:
   *  Derrell Lipman

************************************************************************ */

qx.Class.define("dialog.FormTag",
{
  extend : qx.ui.container.Composite,

  construct : function(layout)
  {
    this.base(arguments, layout || new qx.ui.layout.VBox() );
  },

  members :
  {
    // overridden
    // Instead of creating a <div> for the content element, use <form>
    _createContentElement : function()
    {
      return new qx.html.Element("form");
    }
  }
});

In Form.js, make the following change to surround the form container in <form> tags:

       /* 
        * Form container  
        */
-      this._formContainer = new qx.ui.container.Composite;      
+      var formTag = new dialog.FormTag();
+      groupboxContainer.add( formTag );
+      this._formContainer = new qx.ui.container.Composite();
       this._formContainer.set({
         font : "bold"
       });
       this._formContainer.setLayout( new qx.ui.layout.Grow() );
-      groupboxContainer.add( this._formContainer, {flex: 1} );
+      formTag.add( this._formContainer, {flex: 1} );

Finally, once that problem was resolved, a new warning appeared (missing "autocomplete:" attribute), which I fixed with this change:

           case "passwordfield":
             formElement = new qx.ui.form.PasswordField();
+            formElement.getContentElement().setAttribute(
+              "autocomplete", "password");
             break;            
cboulanger commented 6 years ago

Thank you @derrell for reporting and contributing the fix.