0

If the value from the combo box is chosen, on arrow down i would like to select the values from the dropdown. But the index value is not increasing to navigate the focus to next item. Unable to do select the next item on the dropdown through keyboard arrow button. Can someone say an idea.

I have 10 items in the dropdown, on keyboard down arrow, i should be able to select the li item. I am able to for the first item. after that it doesn't go down even though i increment it.

<parentComponent>

<input label="Product" type="text"  onkeyup="{!c.keyPressController}" 
                               onkeydown="{!c.onfocus}" updateOn="onkeyup" 
                               class="slds-input slds-combobox__input borderForBoxes fontConsistency" 
                               id="combobox-unique-id"
                               tabindex="0"
                               aria-autocomplete="list" aria-controls="listbox-unique-id"
                               autocomplete="off" role="textbox"
                               placeholder="Select a product" value="{!v.prepopulateProductValues.label}" />

<div id="listbox-unique-id" role="listbox" aria-label="list of contents">
<ul>
    <aura:iteration items="{!v.productNames}" var="item" indexVar="key">
        <c:childComponent indexkey="{!key}"/>
    </aura:iteration>
</ul>
</div>
</parentComponent>

<childComponent>
<li role="presentation" class="slds-listbox__item fontConsistency"  updateon ="keyup" onkeypress="{!c.toAssignFocus}" onkeyup="{!c.toAssignFocus}" onkeydown="{!c.toAssignFocus}" onclick="{!c.selectRecord}"  >
        <span  style="padding: 0px 1px 5px 11px;"
          class="fontConsistency slds-media slds-listbox__option slds-listbox__option_entity slds-listbox__option_has-meta" role="option">              
                <span class="slds-media__body fontConsistency">  
                    <span id="{!v.indexkey}" tabindex="{!v.indexkey}" onkeypress="{!c.toAssignFocus}" class="slds-listbox__option-text slds-listbox__option-text_entity fontConsistency">{!v.oRecord.Name}</span>
                    </span>
            </span>
    </li>
</childComponent>

child component controller

toAssignFocus: function(component,event,helper){
    console.log('setting focus here in child'+component.get("v.indexkey"));
    //if(event.keyCode < 48 )
    //document.getElementById(component.get("v.indexkey")).focus();
    console.log('setting focus here in parent'+component.get("v.indexkey"));

    var indexVar = component.get("v.indexkey");
                component.set("v.indexkey",indexVar+1);

    document.getElementById(component.get("v.indexkey")).className = "slds-listbox__option-text slds-listbox__option-text_entity fontConsistency focused";
}
3
  • The direct child for the<ul> tag has to be an <li>. May be this is why the problem is occuring? Also, please elaborate your question. Nov 22, 2017 at 5:16
  • I added more description to my question Nov 22, 2017 at 13:28
  • Try modifying your code like this <ul> <aura:iteration> <li> </li> </aura:iteration> </ul> and wrap all of this in the child component, also please share the controller code for keyPressController and onfocus so I can dig a bit deeper and see if I can find what might be wrong. Nov 23, 2017 at 5:23

0

You must log in to answer this question.

Browse other questions tagged .