You need to sign in to do that
Don't have an account?
Vivek 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
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
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 + "'");
}
})
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