How to select option from datalist in Cypress - ruby-on-rails

I have a datalist with some options and I want to select the first one using Cypress. How do I do that?
I need to click on the option, simply typing in the value is not what I want, because when an option is selected, a Javascrip function is called. So it's more like How do I click on a datalist option using Cypress?
cy.get('#foods').first().click({force:true})
Does not work.

Presuming the Ruby datalist is like this
<datalist id="foods">
<% Foods.all.each do |food| %>
<option value="<%= food.name %>"></option>
<% end %>
</datalist>
gives this in the DOM
<datalist id="foods">
<option value="Lamb">
<option value="Beef">
<option value="Fruit">
</datalist>
You can get the first option with
cy.get('#foods') // gets the outer datalist
.find('option') // returns all options inside
.first() // take the first
.click({force:true})
for other option, e.g 3rd
cy.get('#foods') // gets the outer datalist
.find('option') // returns all options inside
.eq(2) // take the third
.click({force:true})
The {force:true} is only required because the list is not opened.
It may be better to open it first and click without force, as a page error can be masked by using {force:true}.
cy.get('#foods') // gets the outer datalist
.invoke('show') // open list
.should('be.visible')
.find('option') // returns all options inside
.first() // take the first
.click()

Related

Removing selected option in multiple select2 clears all options

Using Laravel livewire, bootstrap 5 modal and select 2.
Select2 (s2) without multiple works fine. It's populated, selections save to the component, clearing is also fine.
When an s2 has multiple attribute, removing a selected option clears all the options and nothing is displayed in the results drop down. When adding a selection, this doesn't happen.
If I do a dispatchBrowserEvent and re-init the s2 it does work again.
My question is why does removing an s2 option require a re-init but an add doesn't.
Seems to be something to do with the rendering in render().
Some code...
Blade:
<div wire:ignore>
<select id="selectedTrades" wire:model.defer="selectedTrades" class="select-2" multiple="multiple" data-field="selectedTrades" data-allow-clear="false">
#foreach ($contractor_trades as $trade)
<option value="{{ $trade['id'] }}">{{ $trade['name'] }}</option>
#endforeach
</div>
Standard stuff. wire.ignore around the s2. The modal has wire:ignore.self.
JS:
$('.select-2').on('change', function (e)
{
var $this = $(this);
livewire.emit('setSelect2Property', $this.attr('data-field'), $this.val());
});
Component:
public function setSelect2Property($property, $value)
{
$this->$property = $value;
}
Just sets $this->selectedTrades to the array sent.
Adding:
The drop down has the options as expected.
Removing:
The thin light line under it is the container for the results that's now empty. The original select element does still have its options.
If I remove the livewire.emit from the js to test, the s2 behaves correctly.
I think it has to do with the components render method. I can't figure out what is happening different when I add versus remove.
I got this to work. The problem was the dropdownParent element I was using. I had it set to the modal. Setting it to the immediate parent element and it worked as expected.

How to select and add a new item in select2

I am pulling my hair off trying to do a very simple thing with select 2. When I edit a record of table1, I have a simple select dropdown with a list of items built from a field of table1 (with distinct). Sometimes I need to add a new item. So I thought that the example to create and add a new item would work but it does not. When I type the new item in the open box on top of the dropdown, I got "No result found"... ok but how do I force this new item to be selected and recorded in the database (and obviously available for later use)?
I am not really good in JS, so I presume I am doing something wrong or something is missing... please help.
<select class="selectAdd-who" name="who">
<option value="item1">item1</option>
<option value="item2" selected>item2</option>
<option value="item3">item3</option>
</select>
<script>
$(document).ready(function() {
$('.selectAdd-who').select2();
// Set the value, creating a new option if necessary
if ($('.selectAdd-who').find("option[value='" + data.id + "']").length) {
$('.selectAdd-who').val(data.id).trigger('change');
} else {
// Create a DOM Option and pre-select by default
var newOption = new Option(data.text, data.id, true, true);
// Append it to the select
$('.selectAdd-who').append(newOption).trigger('change');
}
});
</script>

How to get selected option in change callback of AngularDart component

I want to use a select HTML element to filter items in a table. For that I have a model value selectedCategoryId and event callback onFilterCategory for the change event. But when callback gets called the value selectedCategoryId is null.
I have the following HTML snippet:
<select id="category"
class="form-control"
[(ngModel)]="selectedCategoryId"
(change)="onFilterCategory()">
<option *ngFor="let category of categories"
value="{{category.id}}">
{{category.name}}
</option>
</select>
And the following dart snippet:
void onFilterCategory() {
print('onFilterCategory');
print('this.selectedCategoryId: ' + this.selectedCategoryId);
}
Do I need to use another callback?
ngModelChange is the event and $event the value
(ngModelChange)="onFilterCategory($event)"
with
void onFilterCategory(String value) {
Because you have 2-way binding
[(ngModel)]="selectedCategoryId"
you can also use
(ngModelChange)="onFilterCategory()"
with the onFilterCategory() as it is in your question.
The change event doesn't work because it fires too early - before [(ngModel)]="selectedCategoryId" was able to update selectedCategoryId.

jQuery mobile change select value by script fail (nothing happens)

I'm desperately trying to change the option value in of a select at pageshow and it does nothing.
I don't know how to change it
<select name="sliderAutoConnect" id="sliderAutoConnect" data-role="slider">
<option value="1">Off</option>
<option value="2">On</option>
</select>
and the script :
$("#sliderAutoConnect option[value=2]").attr('selected', 'selected');
$('#sliderAutoConnect').selectmenu('refresh');
You need to refresh the slider widget instead of selectmenu. Try this instead:
$('#sliderAutoConnect').slider('refresh');
Everything else worked for me when i tested it. I just changed that one line.

show text field on select other from drop down :ROR

How I should do this using javascript? I looked other places but every example uses Jquery.
Only on select other textbox should visible.
Assuming that you are on an older version of rails which has prototype as the js library.
in the onchange event of the select list add the javascript function to show the div containing the text box (let's say you show the text box for value 5 of the select list):
<select id="select_item" name="select_item" onchange="display_date_range(this);">
... where 5 is the value of the option that needs to show text box
</select>
function display_date_range(list) {
if(list.options[list.selectedIndex].value == 5) {
$("text_div").show();
}
else {
$("text_div").hide();
}
}
<div id="text_div"><input type="text" value="Hooraaahhh..." /></div>

Resources