Loading ...
Sorry, an error occurred while loading the content.

Drop-down (select) in dialog

Expand Messages
  • Alessandro Vernet
    The use case: I have a drop-down (HTML select form element) displayed in a YUI modal dialog. The issue: When I click on the drop-down, it opens and closes
    Message 1 of 4 , Dec 19, 2006
    • 0 Attachment
      The use case: I have a drop-down (HTML select form element) displayed in a
      YUI modal dialog.

      The issue: When I click on the drop-down, it opens and closes right away.
      The open/close is almost imperceptible on a modern machine, and it feels
      like the drop-down just doesn't open. This happens on Firefox but not on IE.
      It also happens when the dialog is modal but doesn't if the dialog is
      modeless.

      Has anyone ever seen anything like this. Any suggestion as how to address
      this?

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

      --
      View this message in context: http://www.nabble.com/Drop-down-%28select%29-in-dialog-tf2852511.html#a7968157
      Sent from the ydn-javascript mailing list archive at Nabble.com.
    • Steven Peterson
      Alex, I ve seen this come up several times. Here s the explanation for why it happens. In order to prevent the focusing of things under the mask, the Panel
      Message 2 of 4 , Dec 19, 2006
      • 0 Attachment

        Alex,

         

        I’ve seen this come up several times. Here’s the explanation for why it happens. In order to prevent the focusing of things under the mask, the Panel automatically looks for anything outside its own scope and sets it to automatically blur on focus while the modal Panel is being displayed. Because of the fact that your form is outside your Panel, it’s getting a blur call on focus, which is why this is happening. There are two ways to handle this:

         

        1.       Make your form a part of your Panel so that it’s protected from this event, or…

        2.       Find the el.tagName == "FORM" on line 3034 of container.js, and remove that block, realizing that there may be circumstances where someone could tab underneath the mask.

         

        If you come up with a better solution, please let me know so that I can pass it along.

         

        Thanks!!!

         

        Steven Peterson

        Web Developer, Platform Engineering

        Yahoo!

         

         

         

        From: ydn-javascript@yahoogroups.com [mailto:ydn-javascript@yahoogroups.com] On Behalf Of Alessandro Vernet
        Sent: Tuesday, December 19, 2006 4:00 PM
        To: ydn-javascript@yahoogroups.com
        Subject: [ydn-javascript] Drop-down (select) in dialog

         


        The use case: I have a drop-down (HTML select form element) displayed in a
        YUI modal dialog.

        The issue: When I click on the drop-down, it opens and closes right away.
        The open/close is almost imperceptible on a modern machine, and it feels
        like the drop-down just doesn't open. This happens on Firefox but not on IE.
        It also happens when the dialog is modal but doesn't if the dialog is
        modeless.

        Has anyone ever seen anything like this. Any suggestion as how to address
        this?

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

        --
        View this message in context: http://www.nabble.com/Drop-down-%28select%29-in-dialog-tf2852511.html#a7968157
        Sent from the ydn-javascript mailing list archive at Nabble.com.

      • Alessandro Vernet
        Hi Steven, First, thank you for answering so quickly! ... Unfortunately I can t do that, as I need to have just one form for the whole page. Some of the
        Message 3 of 4 , Dec 19, 2006
        • 0 Attachment
          Hi Steven,

          First, thank you for answering so quickly!


          Steven Peterson-4 wrote:
          >
          > 1. Make your form a part of your Panel so that it's protected from
          > this event, or.
          >

          Unfortunately I can't do that, as I need to have just one form for the whole
          page. Some of the controls in the form need to be in the panel, while others
          need to be outside of the panel.


          Steven Peterson-4 wrote:
          >
          > 2. Find the el.tagName == "FORM" on line 3034 of container.js, and
          > remove that block, realizing that there may be circumstances where someone
          > could tab underneath the mask.
          >

          You are pointing me here in the right direction!

          The code:

          if (! YAHOO.util.Dom.isAncestor(me.element, el)) {
          YAHOO.util.Event.addListener(el, "focus", el.blur);
          return true;
          }

          My understanding of what the code does:
          This code listen for a "focus" event on form controls and the forms that are
          outside of the panel. If one of those "focus" event arrives, it means that
          that the user tabbed out of a control inside the panel to a control outside
          the panel, and so this code sends blur() to the control, to avoid the
          situation where a control outside of the panel has the focus.

          Why this does not always work:
          On Firefox, when your click on the drop-down inside the dialog, the focus
          event bubbles to the form element outside the dialog, the listener is
          called, issues a blur(), which closes the drop-down.

          Suggested solution:
          When the event listener is called, we first check that the actual target of
          the event (not just the element on which we registered the listener) is
          inside the panel, and only do a blur() if this is the case.

          Suggested code:

          if (! YAHOO.util.Dom.isAncestor(me.element, el)) {
          YAHOO.util.Event.addListener(el, "focus", function(ev) {
          var target = YAHOO.util.Event.getTarget(ev);
          if (! YAHOO.util.Dom.isAncestor(me.element, target)) el.blur();
          });
          return true;
          }

          I have tested this on Firefox and IE. Now I don't have the problem of the
          drop-down that doesn't open, and you can't tab out to a control outside of
          the panel. Does this sound reasonable?

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

          --
          View this message in context: http://www.nabble.com/Drop-down-%28select%29-in-dialog-tf2852511.html#a7983779
          Sent from the ydn-javascript mailing list archive at Nabble.com.
        • Alessandro Vernet
          ... I have posted an update to this fix. See my changes to YUI on the page below, under the bullet point container.js and container-min.js :
          Message 4 of 4 , Feb 1, 2007
          • 0 Attachment
            Alessandro Vernet wrote:
            >
            > Suggested solution:
            > When the event listener is called, we first check that the actual target
            > of the event (not just the element on which we registered the listener) is
            > inside the panel, and only do a blur() if this is the case.
            >

            I have posted an update to this fix. See my changes to YUI on the page
            below, under the bullet point "container.js and container-min.js":

            https://wiki.objectweb.org/ops/Wiki.jsp?page=YUI

            Alex
            --
            Orbeon Forms - Web Forms for the Enterprise, Done the Right Way
            http://www.orbeon.com/

            --
            View this message in context: http://www.nabble.com/Drop-down-%28select%29-in-dialog-tf2852511.html#a8761508
            Sent from the ydn-javascript mailing list archive at Nabble.com.
          Your message has been successfully submitted and would be delivered to recipients shortly.