1

I am opening a model and trying to set the focus to the model when it opens but focus() isn't working. Here is my component

<a id="{!v.job.jobrequisitionId + '-declineLink'}" aria-label="{!$Label.c.UX_DECLINE_INTERVIEW_REQUEST}" class=" ux-m-r-45 slds-show_medium ux-fw-500 ux-fs-18" onclick="{!c.doOpenDeclineModal}">{!$Label.c.UX_DECLINE}</a>
<c:UX_BasicModal aura:id="declineModal" title="" isDirectional="false" hasCloseIcon="true" closeParentWindow="false" closeIconInBody="true" >   
    <div class="ux-lighting-page">
        <div class="ux-center ux-field-multi-title ux-ff-book ux-m-t-20 ux-large-m-t-35">
            <div tabindex="0" aura:id="{!v.job.jobrequisitionId + '-declineModal'}" id="{!v.job.jobrequisitionId + '-declineModal'}" class="ux-subtitle ux-m-b-20 ux-large-m-b-35">
            {!$Label.c.UX_SURE_TO_DECLINE_INTERVIEW}
            </div>
            <div class="ux-body-copy ux-m-b-10 ux-large-m-b-20 ux-ff-book">
                <div class="ux-yes ux-m-r-135">
                    <a aria-label="{!$Label.c.UX_YES_DECLINE_INTERVIEW}" onclick="{!c.doPassJobInterview}">{!$Label.c.UX_YES}</a>
                </div>
                <div class="ux-no">
                    <a aria-label="{!$Label.c.UX_NO_DO_NOT_DECLINE_INTERVIEW}" onclick="{!c.doCloseDeclineModal}" onblur="{!c.focusLoop}">{!$Label.c.UX_NO}</a>
                </div>
            </div>
        </div>
    </div>
</c:UX_BasicModal>

Here is my controller

openDeclineModal : function(cmp, event, helper) {
    var modal = cmp.find("declineModal");
    modal.openModal();
    setTimeout(
        function(){
            var jobid = cmp.get("v.job.jobrequisitionId");
            var declineJobid = jobid+"-declineModal";
            var elem = document.getElementById(declineJobid);
            elem.focus();
            // document.getElementById(jobid+"-declineLink").blur();
            // document.getElementById(jobid+"-jobTile").blur();
            // document.getElementById(jobid+"-declineModal").focus();
            // window.location.hash = "#"+jobid+"-declineModal";
            // cmp.find(jobid+"-declineModal").focus();
        }, 
        1
    );
},

You can see the different ways I have tried to do it. The modal.openModal() method just removes slds-hide from the parent div in UX_BasicModal. That component is just about styling to make it work like a popup and making the background grey. I get no errors in lightning or the console. I have verified that the ids match. I have tried hard coding the ids. I have increased the timeout to 1000 and added an alert before the focus() and the modal will show on the page before the alert so I know the div is rendered. I have no idea what else to try. Any help would be greatly appreciated. Thanks in advance.

1
  • You should be using aura:id and component.find. If you need to add dynamic data to determine which element to use, there are other approaches which are supported. Using document selectors, however, is not.
    – Adrian Larson
    Jun 3 '19 at 19:11
1

Your problem starts here:

<div aura:id="{!v.job.jobrequisitionId + '-declineModal'}" ... />

As the documentation says:

aura:id doesn't support expressions. You can only assign literal string values to aura:id.


var elem = document.getElementById(declineJobid);

You can't use document.getElementById like this; it's not an id, it's an aura:id. Instead:

var elem = component.find("declineModal").getElement();

The element you're trying to focus may not be focusable. Make sure you're focusing an element that has a focus (e.g. a, button, etc).

2
  • Thank you for the help. I did not realize you couldn't set an aura:id like that. I could swear I have done it before. It works if I use aura:id="testtesttest" and cmp.find("testtesttest").getElement().focus(); What I don't understand is why it doesn't work with an html id like the one I have and document.getElementById(declineJobid). Any idea why that doesn't work?
    – Travis
    Jun 3 '19 at 19:51
  • 1
    @Travis You can make it work, but it's non-trivial and can be blocked by Locker Service, a security layer that prevents access across namespaces. aura:id is the intended method, so you should use it.
    – sfdcfox
    Jun 3 '19 at 20:01

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.