How to access the contents of a SecureNodeList in Lightning Components

Question

I am currently trying to access a SecureNodeList, but I keep running into errors. Before I go into depth more, I will explain what I am trying to do first, before I end up with an X-Y Problem.

My aim is to turn off autocomplete on a date input that I am using in my lightning component. Lightning has an annoying issue where the date input will remember previous entries, and the history box ends up blocking part of, if not all of, the date picker dropdown. I experienced this issue before in the past, and I wanted to do something about it now.

With Spring '19, Salesforce added an autocomplete attribute for lightning:input components, but it does not apply to certain types, and one of these types that it doesn't apply to is for date inputs.

However, looking at the rendered component structure in the console, I can see the input that is generated withing the lightning-input element. And I know that if I can just get to that, I can adjust autocomplete attribute and fix this issue. I have had trouble trying to get JQuery to work with my lightning component before (I'm not sure if it's because the component is being used both in a Community page and in a lightning out VF page that is hosted on a Site.com page). So I got an idea when I saw Kris Gray's answer to another question

I figured that with querySelectorAll, it would allow me to query for the input nested within the lightning-input element. So, I tested this, and was able to get the SecureNodeList object that contains the input. However, this is where I hit a dead end. I tried many different ways, but I could not access the data within the SecureNodeList. The length property shows 0, and in the console, it lists it as having an error.

For some demonstrations, here is the lightning-input:

<lightning:input id="birthdayInput"
    aura:id="birthdayInputCmp" label="Birthdate"
    type="date" value="{!v.lead.Date_of_Birth_1__c}"
    class="slds-col slds-x-small-size_1-of-1 slds-large-size_1-of-3" />

And this is what is happening in the code. First off, since I knew the DOM element wouldn't be available in the init method, I am calling afterRender to find the input. Here is the render class:

({
    afterRender: function( component, helper ) {
        this.superAfterRender( component, helper );
        helper.turnOffAutoComplete( component, helper );
    }
})

And the helper method:

({
    turnOffAutoComplete: function( component, helper ) {
        console.log( 'component.getElement(): ', component.getElement() );
        var birthdayInput = component.getElement().querySelectorAll( '#birthdayInput input' );
        console.log( 'birthdayInput: ', birthdayInput );
        console.log( 'birthdayInput toString: ' + birthdayInput.toString() );
        if ( birthdayInput && typeof birthdayInput.target !== undefined ) {
            console.log( 'birthdayInput[0]: ', birthdayInput[0] );
            // console.log( 'birthdayInput.get(0): ', birthdayInput.key[0] );
            if ( birthdayInput.length != undefined && birthdayInput.length > 0 ) {
                console.log( 'birthdayInput[0]: ', birthdayInput[0] );
                this.turnOffAutoCompleteForInput( birthdayInput[0] );
            }
        }
    }
})

Certain parts of the code have been commented out. But with testing in the browser, I am not able to access birthdayInput's elements. If I look at the logs for birthdayInput, this is what I get:

 Proxy {}
[[Handler]]: jn
key: {namespace: "c"}
nodeIsAccessible: (e,t)=>Dr(e)===t||j(e)||Ut(t,e)
target: NodeList [input#input-34.slds-input]
__proto__: Object
[[Target]]: NodeList
length: [Exception: TypeError: Illegal invocation at NodeList.invokeGetter (<anonymous>:2:14)]
__proto__: NodeList
[[IsRevoked]]: false

Within the handler's target, you will see the input element that I am looking for

input#input-34.slds-input

However, I cannot find any way to navigate the SecureNodeList to access that input. What am I doing wrong? And is there an easier way to get to the input to turn off autocomplete?

TLDR: I'm trying to turn off autocomplete on a lightning:input. What is the best way? If I access the SecureNodeList from using component.getElement().querySelectorAll(), how can I access the elements in the SecureNodeList?

Also, this is my first question on StackExchange, so I am trying my best to make the question clear and precise and follow the rules I've read. I've also searched for other questions that could already answer this, but I've not found any.

Answer 1

Firstly, welcome to SFSE, excellent way of explanation for FIRST question and good research!

What you are trying to do is not possible. You can check DOM Access Containment

Invalid DOM Access

You can’t use cmp.find("button1").getElement() to access the DOM element created by lightning:button. Lightning Locker doesn’t allow c:domLocker to access the DOM for lightning:button because the button is in the lightning namespace and c:domLocker is in the c namespace.

In your case its lightning:input which is different namespace and so you cannot traverse inside the component.