I have the following v-select:
<v-select
flat
dense
outlined
multiple
small-chips
deletable-chips
hide-details
v-model='chosenStrings'
label='Strings'
:items='strings'
:menu-props='{nudgeBottom: 40}'
>
<template v-slot:append>
<v-icon>
mdi-chevron-down
</v-icon>
</template>
</v-select>
And this is my data:
strings: ['a', 'b', 'c', 'd'],
chosenStrings: ['d']
I can't figure out a way to make it have at least one item always selected. Perhaps make an item disabled if it's the only one selected.
I don't see a required prop in the documentation. Tried to use item slot and provide my own v-list-item, but guess didn't do something right, as it also failed.
Any suggestions, please?
You can bind the deletable-chips with a condition and add hide-selected prop Here is this.
<v-select
flat
dense
outlined
multiple
small-chips
:deletable-chips="chosenStrings.length>1"
hide-selected
hide-details
v-model='chosenStrings'
label='Strings'
:items='strings'
:menu-props='{nudgeBottom: 40}'
>
<template v-slot:append>
<v-icon>
mdi-chevron-down
</v-icon>
</template>
</v-select>
Related
I need to click "Cancel" button. So I tried writing an x-path that looks something like this :
//button[text()='Cancel']
But two elements are identified since two elements match the conditions as below, though one of the element is hidden :
<button type="button" class="gwt-Button button_action_id_9135994370013188418_9135995360013188733_compositepopup_3 TableCtrl-button cancel-button">Cancel</button>
<button type="button" class="gwt-Button button_action_id_9149469526113774095_9149539697213772969 TableCtrl-button cancel-button" aria-hidden="true" style="display: none;">Cancel</button>
Is there a way I could identify the element that does not have a tag like 'aria-hidden' ?
Try to use below XPath to match required (not hidden button):
//button[text()='Cancel' and not(#aria-hidden='true')]
I have a material group dropdown designed just like the official documentation (here).
Question is : How can I display the selected item text along with group name.
ie; If I select Bulbasaur from 'Grass' group, as in the image, it should show 'Grass - Bulbasaur' instead of just 'Bulbasaur'. Any ideas?
Update: I have found a work around. Anyone fiddling around with the same issue can do this css hack in the mean time,
<mat-form-field>
<mat-select placeholder="Pokemon" [formControl]="pokemonControl">
<mat-option>-- None --</mat-option>
<mat-optgroup *ngFor="let group of pokemonGroups" [label]="group.name"
[disabled]="group.disabled">
<mat-option *ngFor="let pokemon of group.pokemon" [value]="pokemon.value">
<span style=display:none">{{group.name}} -</span>{{ pokemon.viewValue }}
</mat-option>
</mat-optgroup>
</mat-select>
</mat-form-field>
It looks like the proper way to do this is to set "custom trigger text":
See the examples for the MatSelect instead of the overview
So you would do something like this:
<mat-form-field>
<mat-select placeholder="Pokemon" [formControl]="pokemonControl">
<mat-select-trigger *ngIf="pokemonControl.value; let pokemon">
{{ pokemon.parentViewValue }} : {{ pokemon.viewValue }}
</mat-select-trigger>
<mat-option>-- None --</mat-option>
<mat-optgroup *ngFor="let group of pokemonGroups" [label]="group.name"
[disabled]="group.disabled">
<mat-option *ngFor="let pokemon of group.pokemon" [value]="pokemon">
{{pokemon.viewValue}}
</mat-option>
</mat-optgroup>
</mat-select>
</mat-form-field>
Take note of two things:
Obviously the mat-select-trigger tag... I am using the full pokemon model, you will need to add either a reference to the parent group or, like I have done, add the parent view value in each pokemon. You can do either when you actually construct the model
My [value] for the mat-option tag is pokemon instead of pokemon.value as I need the full model
I have written code for select list this way b.select_list(:id,'something').select 'something' but I don't how know how to write a code for given below select list, Can anyone help me to write the code to select from this select_list
<md-select tabindex="0" class="ng-pristine ng-untouched ng-empty ng-invalid ng-invalid-required" role="listbox" aria-disabled="false" aria-expanded="false" aria-invalid="true" aria-multiselectable="false" aria-required="true" aria-owns="select_container_5" aria-label="Gender" ng-model="user.gender" name="gender" required=""><md-select-value class="_md-select-value _md-select-placeholder" id="select_value_label_0"><span>Gender</span><span class="_md-select-icon" aria-hidden="true"></span></md-select-value><div class="_md-select-menu-container" id="select_container_5" aria-hidden="true"><md-select-menu class="ng-scope"><md-content>
<md-option tabindex="0" class="md-ink-ripple" id="select_option_3" role="option" aria-selected="false" value="Male"><div class="_md-text">Male</div></md-option>
<md-option tabindex="0" class="md-ink-ripple" id="select_option_4" role="option" aria-selected="false" value="Female"><div class="_md-text">Female</div></md-option>
</md-content></md-select-menu></div></md-select>
Based on the element tag, md-select, it looks like this select list is created by Angular Material. It is not a select element, which means you cannot use the usual select_list method. Instead, you need to manually interact with it. This involves:
Clicking the select list to open the list of options
Clicking one of the options
The following code will select an option by value. You could use a different locator as needed:
# Open the dropdown
browser.element(tag_name: 'md-select', name: 'gender').click
# Select an option (by value)
browser.element(tag_name: 'md-option', value: 'Female').when_present.click
A couple of notes:
As md-select is not a standard element, you need to locate it using the generic element method.
Make sure to use when_present (or another wait method) to ensure the options are displayed before selecting.
Polymer 1.0: How can I get the value of the selected item in a paper-dropdown-menu?
I am submitting some info with iron-ajax and I can't the value (I don't want the label) from the paper-dropdown-menu. The id of my paper-dropdown-menu is 'mymenu'. I have tried these:
this.$.mymenu.selectedItem.value
If you set the value in the value attribute, the following should work:
this.$.mymenu.selectedItem.getAttribute("value")
Update
For a declarative approach, you can set attr-for-selected="value" and then bind to the selected attribute.
<paper-dropdown-menu label="Your favourite pastry">
<paper-menu attr-for-selected="value" selected="{{selection}}" class="dropdown-content">
<paper-item value="croissant">Croissant</paper-item>
<paper-item value="donut">Donut</paper-item>
<paper-item value="madeleine">Madeleine</paper-item>
</paper-menu>
</paper-dropdown-menu>
<div>[[selection]]</div>
I tried to check whether date widget is empty. If it is empty, it shouldn't show up.
<div class="field"
tal:define="value widget/value;
valueexists python:value not in (None, '',);
label widget/label"
tal:condition="python:widget.__name__ not in ('IBasic.title', 'IBasic.description', 'title', 'description',) and valueexists">
Problem is the below expression doesn't seem able to check for date:
python:value not in (None, '',)
Why not something like:
<div class="field"
tal:define="value widget/value;
label widget/label"
tal:condition="python:widget.__name__ not in ('IBasic.title', 'IBasic.description',
'title', 'description',) and value">
...
</div>
Testing for specific values of widget/value seems destined to cause trouble.
I'm not sure I understood your question correctly, but I'd also like to suggest jQuery as a way to check and conditionally hide (remove) a widget, if it's for aesthetic reasons.