+ Start a Discussion
Vivek NayakVivek Nayak 

Down Arrow key not working in combo box

Hi All,
I am struggling  to make Down Arrow key to move through list options in autocomplete combobox. Please see what is missing. Below is my code

<aura:component >
<div class="slds-form-element">
<label class="slds-form-element__label" for="combobox-id-22">Relate to</label>
<div class="slds-form-element__control">
<div class="slds-combobox_container">
<div class="slds-combobox slds-dropdown-trigger slds-dropdown-trigger_click slds-is-open" aria-expanded="true" aria-haspopup="listbox" role="combobox">
<div class="slds-combobox__form-element slds-input-has-icon slds-input-has-icon_right" role="none">
<input type="text" class="slds-input slds-combobox__input slds-has-focus" id="combobox-id-22" aria-activedescendant="option1" aria-autocomplete="list" aria-controls="listbox-id-12" autoComplete="off" role="textbox" placeholder="Search..." />
</div>
<div id="listbox-id-12" class="slds-dropdown slds-dropdown_length-5 slds-dropdown_fluid" role="listbox">
<ul class="slds-listbox slds-listbox_vertical" role="presentation">
<li role="presentation" class="slds-listbox__item">
<div aria-selected="true" id="option1" class="slds-media slds-listbox__option slds-listbox__option_plain slds-media_small slds-has-focus" role="option">
<span class="slds-media__figure slds-listbox__option-icon"></span>
<span class="slds-media__body">
<span class="slds-truncate" title="Burlington Textiles Corp of America"> Burlington Textiles Corp of America</span>
</span>
</div>
</li>
<li role="presentation" class="slds-listbox__item">
<div id="option2" class="slds-media slds-listbox__option slds-listbox__option_plain slds-media_small" role="option">
<span class="slds-media__figure slds-listbox__option-icon"></span>
<span class="slds-media__body">
<span class="slds-truncate" title="Dickenson plc"> Dickenson plc</span>
</span>
</div>
</li>
<li role="presentation" class="slds-listbox__item">
<div id="option3" class="slds-media slds-listbox__option slds-listbox__option_plain slds-media_small" role="option">
<span class="slds-media__figure slds-listbox__option-icon"></span>
<span class="slds-media__body">
<span class="slds-truncate" title="Edge Communications"> Edge Communications</span>
</span>
</div>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
    
</aura:component>

Above code is copy of example given on link
https://www.lightningdesignsystem.com/components/combobox/#Keyboard-interaction

on pressing down key i can go throgh list options but when i copy-paste this code in new component its not working. I am not able to understand.
Thanks,
Vivek




 
Ankit RathorAnkit Rathor
Hi Vivek ,

Please try this code:

Combobox.cmp
<aura:component implements="force:appHostable,flexipage:availableForAllPageTypes">
    <aura:attribute name="options" type="List" default="[
    {'label': 'Burlington Textiles Corp of America', 'value': 'Burlington Textiles Corp of America'},
    {'label': 'Dickenson plc', 'value': 'Dickenson plc'},
    {'label': ' Edge Communications', 'value': ' Edge Communications'},
    ]"/>

    <lightning:combobox name="relateTo" label="Relate to" value="Relate to" placeholder="Select Progress" options="{! v.options }" onchange="{! c.handleChange }"/>
</aura:component>

Combobox.js
({
    handleChange: function (c, e) {
        // This will contain the string of the "value" attribute of the selected option
        var selectedOptionValue = e.getParam("value");
        alert("Option selected with value: '" + selectedOptionValue + "'");
    }
})

User-added image

Please let me know if you have any other query and if this solution is helpful then please mark it as Best Answer.

Thanks,
Ankit Rathor