I need to disable all animations that happen when opening/closing polymer's paper-dropdown-menu element.
Documentation: https://www.webcomponents.org/element/#polymer/paper-dropdown-menu/elements/paper-dropdown-menu#property-noAnimations
The documentation shows that the element has a noAnimations property that I should be able to set to true to disable all animations, but it's not working for me.
<paper-dropdown-menu
noAnimations="true"
selected="{{selected}}"
attr-for-selected="name"
vertical-offset="60"
>
<paper-listbox slot="dropdown-content" selected="1">
<template is="dom-repeat" items="{{sections}}">
<paper-item name$="{{item}}">{{item}}</paper-item>
</template>
</paper-listbox>
</paper-dropdown-menu>
I expected that setting noAnimations="true" would disable all animations, but it does not. Am I missing something?
Polymer attributes format is always lowercase and separated with dashes; so try:
<paper-dropdown-menu
no-animations="true"
selected="{{selected}}"
attr-for-selected="name"
vertical-offset="60"
>
...
instead:
<paper-dropdown-menu
noAnimations="true"
selected="{{selected}}"
attr-for-selected="name"
vertical-offset="60"
>
Related
I have a v-select, written like this :
<v-select
ref="v_select_folder"
dense
hide-details
v-model="selectedPlanFolder"
label="PlanFolder"
:items="PlannedFolder"
item-text="node.name"
return-object
#change="setFolderNameAndID"
>
The v-select gets the available options/values dropdown from :items, I would like to know how if there is a simple way I can add an extra aditional option , without touching the items prop. Something like :
<v-select
ref="v_select_folder"
dense
hide-details
v-model="selectedPlanFolder"
label="PlanFolder"
:items="PlannedFolder"
item-text="node.name"
return-object
#change="setFolderNameAndID"
>
<option>This is another select value</option>
</v-select>
You can create a new array in place with the spread operator and add an item to it. You may want to add additional properties to the added item depending on how you process your data.
<v-select
ref="v_select_folder"
dense
hide-details
v-model="selectedPlanFolder"
label="PlanFolder"
:items="[...PlannedFolder, { node: { name: 'name' } }]"
item-text="node.name"
return-object
#change="setFolderNameAndID"
>
</v-select>
I'm trying to test a component builded with vuetify. For that I'm using vue-test-utils. My goal is to perform a change in the v-select field, and assert hat a mutation is performed. here is my code:
<div id="app">
<v-app id="inspire">
<v-container fluid>
<v-layout row wrap>
<v-flex xs6>
<v-subheader>Standard</v-subheader>
</v-flex>
<v-flex xs6>
<v-select
:items="items"
v-model="e1"
label="Select"
single-line
></v-select>
</v-flex>
</v-layout>
</v-container>
</v-app>
</div>
The first test is ok when i set the data:
componentWrapper.setData({items: storesList})
expect(componentWrapper.vm.$data.items).toHaveLength(2)
I now want to change the selected value I try:
componentWrapper.findAll('#option').at(1).setSelected()
And also
componentWrapper.find('el-select')
Can someone help me to retrieve the select and then change the selected value?
Thanks for your support.
Use wrapper.vm.selectItem('foo'). It works for me.
I found this in vuetify v-select tests:
Old: ~~https://github.com/vuetifyjs/vuetify/blob/master/packages/vuetify/test/unit/components/VSelect/VSelect.spec.js#L533~~
New: https://github.com/vuetifyjs/vuetify/blob/b2abe9fa274feeb0c5033bf12cc48276d4ac5a78/packages/vuetify/test/unit/components/VSelect/VSelect.spec.js#L28
Edit: Updated link.
wrapper.findAll('.v-list__tile__title').at(0).trigger('click')
It works for me.
By this code, first option is selected.
Here is ref.
I used Vuetify v1.5.5.
My solution. It's very equivalent to YounSeon Ahn's response, just the options selector changed. I'm using Vuetify 2.2.11.
// Found the v-select
wrapper.find('[data-testid="mySelect"]').trigger('click');
// Wait for DOM updating after the click
await localVue.nextTick();
// Find all options and select the first. If you are multiple v-select in your form, the class ".menuable__content__active" represents the current opened menu
wrapper.find('.menuable__content__active').findAll('.v-list-item').at(0).trigger('click');
finally got this working for vuetify 1.5. If your v-select looks like this:
<v-select
:items="projectManagers"
:value="selectedProjectManager"
key="UserId"
label="Choose Name"
item-text="FirstName"
item-value="UserId"
id="nameSelect"
#input="(val)=>{this.handleNameChange(val)}"
/>
then do this:
wrapper.findAll('#nameSelect').at(0).trigger('input')
this works, but for some reason if i do at(1) it does not work. Thankfully for my test case the option at position 0 is fine
This is my final solution to test Vuetify VSelect component in cypressjs:
cy.get('#YourVSelectComponentId', { timeout: 20000 }).should('not.have.attr', 'disabled', 'disabled').click({ force: true }); //find v-select, verify it's visible and then click.
cy.get('.menuable__content__active').first().find('.v-list__tile').first().should('be.visible').click(); //find opened dropdown, then find first item in options, then click
I have been struggling with this as well and finally found a way to do it. I'm using Jest and vue-test-utils. Basically, you have to do it with two separate steps. Mark the option as selected and then trigger the change on the select.
The HTML part is:
<select id="groupid" v-model="groupID">
<option value="">-Select group-</option>
<option v-for="g in groupList"
v-bind:value="g.groupId">{{g.groupId}} - {{g.groupName}}
</option>
</select>
And the test is:
it('should populate the subgroup list when a group is selected', () => {
expect(cmp.vm.groupID).toBe('');
expect(cmp.findAll('select#groupid > option').length).toBe(3);
cmp.findAll('select#groupid > option').at(1).element.selected = true;
cmp.find('select#groupid').trigger('change');
expect(cmp.vm.groupID).not.toBe('');
});
I am trying to use < paper-datatable-column > . Inside it I have to use my own polymer element but for some reason its not showing up.
<paper-datatable id="datatable" data="{{users}}" selectable multi-selection selected-items="{{selectedItems}}" on-row-tap="rowTapped">
<paper-datatable-column header="risk" type="Number" property="risk" sortable>
<risk-codes riskcolor={{value}}></risk-codes>
</paper-datatable-column>
</paper-datatable>
Where < risk-codes > is my custom polymer element. Which is defined below :
<template is="dom-if" if={{riskcolor}}>
<div class="fab red">
<paper-ripple class="circle" recenters></paper-ripple>
</div>
</template>
And here is the script of < risk-codes > :
Polymer({
is: 'risk-codes',
properties: {
riskcolor:{
type:Number
}
}
}); //end-polymer
I added < template is="dom bind" > in my custom element and inside it I had put the rest of the code. This did the trick. Strange because i have many custom elements where i am not using "dom-bind" but it works. Maybe because < risk-codes > expects a property from its parent element so it needs to be bound to the DOM. Just a guess, not sure if i am right.
I try to make ajax with polymer iron-ajax.
My problem is that when Is their is some elements that can be render only after I received response, otherwise their is not data to render.
How can I "stop" the render of the element until their is response?
Thanks
Just:
<template is="dom-if" if="[[response]]">
Two options:
Add a conditional hiddenattribute to the div or elements you want hidden before the ajax call is completed:
<div hidden$="[[!response]]"></div>
or handle visibility using a computed binding
<div hidden$="[[_computeIsHidden(response)]]"
Wrap your content in a dom-if template:
<template is="dom-if" if="[[_computeIsHidden(response)]]">
How does one access the various options for the bootstrap formhelpers library?
I have tried every way of accessing them, but get an error every time.
Specifically, I'm trying to clear out the selected value in a bfh-selectbox
$("#Select").val('');
$("#Select").selectpicker("refresh");
see How to reset value of Bootstrap-select after button click
Its hard to clear the value of a select box since its a dropdown. Do you mean setting the dropdown to a specific option?
For your specic question: You can set and get the value of the bfh-selectbox with JQuery like this:
HTML:
<div id="selBox" class="bfh-selectbox" data-name="selectbox1">
<div data-value="1">Option 1</div>
<div data-value="2">Option 2</div>
<div data-value="3">Option 3</div>
</div>
Get value:
var output = $("#selBox").val();
Set value:
$("#selBox").val([Replace with valid option value]);
BFH are great components, but their documentation is really lacking.