open-vault/ui/app/templates/components/select.hbs
Noelle Daley 828185db49
UI/add select dropdown (#7102)
* add SelectDropdown

* use SelectDropdown instead of HttpRequestsDropdown

* use html selector instead of class name

* ensure SelectDropdown still works when rendered inside a Toolbar

* add tests

* remove old HttpRequests component

* make SelectDropdown example easier to read in Storybook

* add isFullwidth prop

* add SelectDropbown inside a Toolbar story

* fix tests

* remove actions block and call this.onChange directly

* replace dropdownLabel with label

* rename SelectDropdown to SelecT

* add test for onChange

* remove selectedItem prop since we don't need it

* make Select accept options as an array of strings or objects

* Revert "remove selectedItem prop since we don't need it"

This reverts commit 7278516de87bb1df60482edb005137252819931e.

* use Select inside TtlPicker

* remove debugger

* use a test selector

* fix pki test selectors

* improve storybook docs

* fix selected value in ttl picker

* ensure httprequests dropdown updates the selected item

* ensure select dropdown correctly matches selectedItem

* rename selectedItem to selectedValue

* remove debugger lol

* update selectedItem test

* add valueAttribute and labelAttribute to Storybook knobs

* udpate jsdocs

* remove old httprequestsdropdown component

* add note that onChange will receive value of select

* use Select inside AuthForm

* use correct test selector
2019-08-01 14:35:18 -07:00

30 lines
744 B
Handlebars

{{#if label}}
<label
for="select-{{this.elementId}}"
class="is-label"
data-test-select-label
>
{{label}}
</label>
{{/if}}
<div class="control {{if isInline "select is-inline-block"}}">
<div class="select {{if isFullwidth "is-fullwidth"}}">
<select
class="select"
id="select-{{this.elementId}}"
onchange={{action this.onChange value="target.value"}}
data-test-select={{name}}
>
{{#each options as |op|}}
<option
value={{or (get op valueAttribute) op}}
selected={{eq selectedValue (or (get op valueAttribute) op)}}>
{{or (get op labelAttribute) op}}
</option>
{{/each}}
</select>
</div>
</div>