focus() not working

Question

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.

Answer 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).