6 Replies Latest reply on Nov 18, 2015 5:44 AM by michpetrov

    rich:focus inside rich:popupPanel not applying focus

    arnieaustin

      I have two modal rich:popup panels (dialogs) for data entry. I have a rich:focus inside the form of each, linked to the related action bean's property that indicates which field to focus:

       

      rich:focus id="focus" value="#{infoPersonCommentEdit.focusField}" delayed="true"

       

      and I added onshow="#{rich:component('focus')}.applyFocus();" to the rich:popup as recommended on the RF showcase.

       

      Doesn't work.

       

      Above the modal panel I have: f:event type="preRenderView" listener="#{infoPersonCommentEdit.preRenderView}" and the method is being called as expected during pre-render. Inside this method is the:

       

      FocusManager focusManager = ServiceTracker.getService(FocusManager.class);

      focusManager.focus(getFocusField());

       

      This set up works for all my non-modal edit pages, just not the popup.

        • 1. Re: rich:focus inside rich:popupPanel not applying focus
          michpetrov

          @value on focus doesn't specify which field to focus; are there docs that say it does? In fact the attribute does nothing (it's inherited from a parent class, we're hiding it in the next version as there is no use for it). rich:focus chooses which field to focus, if you need to focus a specific element then simply call #{rich:element('id')}.focus() or #{rich:component('id')}.focus() if you're targeting a RichFaces component.

          • 2. Re: rich:focus inside rich:popupPanel not applying focus
            arnieaustin

            Ok, so the docs say "The current value of this component." which I mistakenly took as the name of the field to focus on. I'll remove it, especially since what I was doing in the action bean:

             

            FocusManager focusManager = ServiceTracker.getService(FocusManager.class);

            focusManager.focus(getFocusField());

             

            But even so, I prefer to do my validation on the server and set the focus to the field in question, which I normally do with the FocusManager.

             

            Only when the panel renders, there is no current focus.

            • 3. Re: rich:focus inside rich:popupPanel not applying focus
              arnieaustin

              Oh, and

               

              <rich:jQuery selector="#{rich:element('modalCommentEditSubject')}" query="focus();" />

              or

              <rich:jQuery selector="#{rich:component('modalCommentEditSubject')}" query="focus();" />

               

              fail as well. I've attached the modal form.

              • 4. Re: rich:focus inside rich:popupPanel not applying focus
                michpetrov

                I've told you what to do and then you did something different, I'm not sure what you expect. However providing that you're rerendering the rich:jQuery there should be no issue with the focus. (It will not work when the page is first rendered because you cannot focus hidden elements).

                • 5. Re: rich:focus inside rich:popupPanel not applying focus
                  arnieaustin

                  Yes, you suggested doing two different jQueries to focus separately from using rich:focus, which I tried. Neither worked (I had removed the rich:focus from the panel during that test).

                   

                  I'm aware you cannot focus on something that's hidden, which makes sense considering the popup is initially hidden.

                   

                  But when the panel is to be shown and after the PreRenderView of its bean fires - I expect the focus to be in the field in question when the popup appears.

                   

                  If being table to select which field gets the focus isn't part of the functionality of rich:focus, then what would be the point of the focusManager.focus() method?

                   

                  It would seem that the <rich:jQuery selector="#{rich:element('modalCommentEditSubject')}" query="focus();" /> technique is more old school (however valid) now that the FocusManager is available.

                   

                  Am I off-base here?

                  • 6. Re: rich:focus inside rich:popupPanel not applying focus
                    michpetrov

                    But when the panel is to be shown and after the PreRenderView of its bean fires - I expect the focus to be in the field in question when the popup appears.

                    Which is why you use the "applyFocus()" method, since any operation occurring during render cannot do this.

                     

                    If being table to select which field gets the focus isn't part of the functionality of rich:focus, then what would be the point of the focusManager.focus() method?

                    rich:focus and FocusManager are two different things; the general use case for rich:focus is to be used with validation where it looks at nearby focusable elements and focuses the first one that failed the validation. Otherwise if you need to focus a specific element you can use the FocusManager (if you need to decide what element to focus on the server side) or simply JavaScript.