bug: hidden select has it's label displayed on startup

classic Classic list List threaded Threaded
4 messages Options
Reply | Threaded
Open this post in threaded view
|

bug: hidden select has it's label displayed on startup

Adrian Baker-2
I've got a select (a dropdown) which is non-relevant when my form starts
up. The select itself is hidden correctly, but it's label is mistakenly
shown. The problem is only evident on init: if I make the select show
and then hide by using the form, the label goes away.

The problem is caused by this ordering in xforms.js
    var interestingTagNames = new Array("span", "button", "textarea",
"input", "a", "label", "select", "td", "table", "div");

which inits the label *before* the parent select has it's properties
initialised.

Switching the order to
    var interestingTagNames = new Array("span", "button", "textarea",
"input", "a", "select","label", "td", "table", "div");

corrects the problem.

Attached is an example demonstrating the problem.

Adrian



--
You receive this message as a subscriber of the [hidden email] mailing list.
To unsubscribe: mailto:[hidden email]
For general help: mailto:[hidden email]?subject=help
ObjectWeb mailing lists service home page: http://www.objectweb.org/wws

testHiddenSelect.xhtml (25K) Download Attachment
Reply | Threaded
Open this post in threaded view
|

Re: bug: hidden select has it's label displayed on startup

Adrian Baker-2
There's also a similar problem with labels for <xforms:group> elements, because this block never gets executed for a group:

    if (xformsArrayContains(classes, "xforms-control") {
        control.isRelevant = !xformsArrayContains(classes, "xforms-disabled");
        control.isReadonly = xformsArrayContains(classes, "xforms-readonly");
        control.isRequired = xformsArrayContains(classes, "xforms-required");
        control.isValid = !xformsArrayContains(classes, "xforms-invalid");
    }
    
Which means when the label element is initialised it doesn't have the isRelvant etc attributes yet.

Extending the clause to
    if (xformsArrayContains(classes, "xforms-control") ||
        xformsArrayContains(classes, "xforms-group")) {
        ...
    }
fixes the problem.    

This isn't immeditately obvious running in the sandbox because the default OPS theme generates group labels *inside* the group span, which means when the group gets the xforms-disabled class, it will hide the label regardless.

However if you have a theme where your group labels are placed *outside* the span (like mine) then the problem becomes visible.

If you load the attached example in the sandbox and use a browser DOM inspector you'll see that vaccineHistory group's label does not have the correct xforms classes given to it.

Again, problem is only on init: if you show then hide the group again the label gets hidden correctly.

Adrian



Adrian Baker wrote:
I've got a select (a dropdown) which is non-relevant when my form starts up. The select itself is hidden correctly, but it's label is mistakenly shown. The problem is only evident on init: if I make the select show and then hide by using the form, the label goes away.

The problem is caused by this ordering in xforms.js
   var interestingTagNames = new Array("span", "button", "textarea", "input", "a", "label", "select", "td", "table", "div");

which inits the label *before* the parent select has it's properties initialised.

Switching the order to
   var interestingTagNames = new Array("span", "button", "textarea", "input", "a", "select","label", "td", "table", "div");

corrects the problem.

Attached is an example demonstrating the problem.

Adrian



______________________________________________________________________
This email has been scanned by the MessageLabs Email Security System.
For more information please visit http://www.messagelabs.com/email ______________________________________________________________________

-- You receive this message as a subscriber of the [hidden email] mailing list. To unsubscribe: [hidden email] For general help: [hidden email] ObjectWeb mailing lists service home page: http://www.objectweb.org/wws



--
You receive this message as a subscriber of the [hidden email] mailing list.
To unsubscribe: mailto:[hidden email]
For general help: mailto:[hidden email]?subject=help
ObjectWeb mailing lists service home page: http://www.objectweb.org/wws
Reply | Threaded
Open this post in threaded view
|

Re: bug: hidden select has it's label displayed on startup

Adrian Baker-2
My bad: here's the attachment.

Adrian Baker wrote:
There's also a similar problem with labels for <xforms:group> elements, because this block never gets executed for a group:

    if (xformsArrayContains(classes, "xforms-control") {
        control.isRelevant = !xformsArrayContains(classes, "xforms-disabled");
        control.isReadonly = xformsArrayContains(classes, "xforms-readonly");
        control.isRequired = xformsArrayContains(classes, "xforms-required");
        control.isValid = !xformsArrayContains(classes, "xforms-invalid");
    }
    
Which means when the label element is initialised it doesn't have the isRelvant etc attributes yet.

Extending the clause to
    if (xformsArrayContains(classes, "xforms-control") ||
        xformsArrayContains(classes, "xforms-group")) {
        ...
    }
fixes the problem.    

This isn't immeditately obvious running in the sandbox because the default OPS theme generates group labels *inside* the group span, which means when the group gets the xforms-disabled class, it will hide the label regardless.

However if you have a theme where your group labels are placed *outside* the span (like mine) then the problem becomes visible.

If you load the attached example in the sandbox and use a browser DOM inspector you'll see that vaccineHistory group's label does not have the correct xforms classes given to it.

Again, problem is only on init: if you show then hide the group again the label gets hidden correctly.

Adrian



Adrian Baker wrote:
I've got a select (a dropdown) which is non-relevant when my form starts up. The select itself is hidden correctly, but it's label is mistakenly shown. The problem is only evident on init: if I make the select show and then hide by using the form, the label goes away.

The problem is caused by this ordering in xforms.js
   var interestingTagNames = new Array("span", "button", "textarea", "input", "a", "label", "select", "td", "table", "div");

which inits the label *before* the parent select has it's properties initialised.

Switching the order to
   var interestingTagNames = new Array("span", "button", "textarea", "input", "a", "select","label", "td", "table", "div");

corrects the problem.

Attached is an example demonstrating the problem.

Adrian



______________________________________________________________________
This email has been scanned by the MessageLabs Email Security System.
For more information please visit http://www.messagelabs.com/email ______________________________________________________________________

-- You receive this message as a subscriber of the [hidden email] mailing list. To unsubscribe: [hidden email] For general help: [hidden email] ObjectWeb mailing lists service home page: http://www.objectweb.org/wws


______________________________________________________________________
This email has been scanned by the MessageLabs Email Security System.
For more information please visit http://www.messagelabs.com/email
______________________________________________________________________

-- You receive this message as a subscriber of the [hidden email] mailing list. To unsubscribe: [hidden email] For general help: [hidden email] ObjectWeb mailing lists service home page: http://www.objectweb.org/wws



--
You receive this message as a subscriber of the [hidden email] mailing list.
To unsubscribe: mailto:[hidden email]
For general help: mailto:[hidden email]?subject=help
ObjectWeb mailing lists service home page: http://www.objectweb.org/wws

testHiddenGroup.xhtml (38K) Download Attachment
Reply | Threaded
Open this post in threaded view
|

Re: bug: hidden select has it's label displayed on startup

Alessandro  Vernet
Administrator
In reply to this post by Adrian Baker-2
Hi Adrian,

Thank you, for the patch. It is checked in and will be included in the
next build.

Alex

On 3/23/06, Adrian Baker <[hidden email]> wrote:

> I've got a select (a dropdown) which is non-relevant when my form starts
> up. The select itself is hidden correctly, but it's label is mistakenly
> shown. The problem is only evident on init: if I make the select show
> and then hide by using the form, the label goes away.
>
> The problem is caused by this ordering in xforms.js
>     var interestingTagNames = new Array("span", "button", "textarea",
> "input", "a", "label", "select", "td", "table", "div");
>
> which inits the label *before* the parent select has it's properties
> initialised.
>
> Switching the order to
>     var interestingTagNames = new Array("span", "button", "textarea",
> "input", "a", "select","label", "td", "table", "div");
>
> corrects the problem.
>
> Attached is an example demonstrating the problem.
>
> Adrian
>
>
>
>
> --
> You receive this message as a subscriber of the [hidden email] mailing list.
> To unsubscribe: mailto:[hidden email]
> For general help: mailto:[hidden email]?subject=help
> ObjectWeb mailing lists service home page: http://www.objectweb.org/wws
>
>
>
>

--
Blog (XML, Web apps, Open Source):
http://www.orbeon.com/blog/



--
You receive this message as a subscriber of the [hidden email] mailing list.
To unsubscribe: mailto:[hidden email]
For general help: mailto:[hidden email]?subject=help
ObjectWeb mailing lists service home page: http://www.objectweb.org/wws
--
Follow Orbeon on Twitter: @orbeon
Follow me on Twitter: @avernet