I'm trying to test a multiselect having all of its options unselected. I've found how to select multiple options by passing through an array of options, but passing an empty array generates an error.
$I->selectOption('Helper', []);
[PHPUnit\Framework\Error\Notice] Array to string conversion
Passing null doesn't work either:
$I->selectOption('Helper', null);
[InvalidArgumentException] Input "task[helpers]" cannot take "" as a value (possible values: "1", "2", "3", "4").
Is there a way to deselect all options for a multiselect on a form that loads with some of its options already selected?
OK, so I found a workaround by reading the source code of Codeception/lib-innerbrowser.
$I->selectOption('Helper', ['value' => []]);
However, this looks like a bug to me (that an empty array does not work as is).
Related
I have an edit form, where I have an input that I'm sending an array of data through.
However, in the edit form, even though the input is returning me an array of data to edit, they are as a single value.
That is, if I remove a data returned in this input, all are removed. Also, the names in the input are all pasted together.]
What I'd like to try if it's possible is to return the data this way in the edit form:
And from that, I could remove the name "Melissa" and submit the form again. Through autocomplete, the user should be able to search for another name to replace "Melissa", without changing the values that are already present.
But I'm getting the data this way:
I created a Codesandbox of how I'm doing it in my code: https://codesandbox.io/s/intelligent-ace-9wbz44?file=/src/App.tsx
Can you help me with this?
I'm assuming you want to use testValue as the default options for your Autocomplete component.
Remove value={field.value}
Match testValue's type to studentOptions's type
const testValue = [
{
value: "João Lima",
label: "João Lima"
},
{
value: "Ana Clara",
label: "Ana Clara"
}
];
Change result to result={field.value ?? testValue}.
Working sandbox: https://codesandbox.io/s/condescending-euler-0gt9c9?file=/src/App.tsx
I am using react-select to allow the user to choose their birth year. If the user has already filled it in, it will be preset to some value, e.g. 1950. The input shows the correct value, however when the menu is opened it is scrolled to the top and shows the most recent years (2018, 2017, 2016, etc).
How do I get it to scroll down to 1950 and highlight that item by default?
My code:
class YearPicker extends React.PureComponent {
options = [
{label: 2018, value: 2018},
{label: 2017, value: 2017},
// ...
{label: 1950, value: 1950},
{label: 1949, value: 1949},
// ...
]
render () {
return (
<Select
options={this.options}
value={this.props.value}
/>
)
}
}
CodeSandbox—this should default to 2002. Once you select a value (2002 or otherwise) it works fine, but when the page first loads you have to scroll down within the menu to find the value.
Per the docs I have tried value and defaultValue as well as selectedOption but nothing seems to work. I created a very hacky workaround by leveraging onMenuOpen to find the correct DOM element after it's rendered and then scroll to it, however this breaks the functionality of the arrow keys.
I looked at their source code and actually, you are doing everything right. The issue is in the following line of their code in Select.js:
const selectedIndex = menuOptions.focusable.indexOf(selectValue[0]);
Here they are determining the index of the default option using indexOf and comparing objects. Object equality is performed by reference and not by value. So when you initialize the component for the first time and you explicitly provide an object, the equality fails. Wrong option is highlighted only for the first time. Rest of the times, object equality works since they extract the selected object out of the options and indexOf works
Check the working fork https://codesandbox.io/s/0xzmy6wvln
What I have done is created a function that extracts the selected option from the options array and passes that and so the equality works even for the first time.
I would encourage you to raise this issue on their repo and try to get it fixed.
Set the default value to the object from the options menu.
<Select
options={this.options}
defaultValue={this.options.find(option => option.value === this.props.value)}
/>
This is a workaround for the bug that #cdoshi described.
I think I have some sort of special code here as all I could google was "too simple" for my problem and it also didn't helped to come to a solution by myself, sadly.
I got a radio button group of 2 radios. I am iterating over "type" data from the backend to create the radio buttons.
My problem is the data binding: When I want to edit an object its "type" is set correctly, but not registered by the view so it doesn't select the desired option.
Follwing my situation:
Backend providing me this as "typeList":
[
{"text":"cool option","enumm":"COOL"},
{"text":"option maximus","enumm":"MAX"}
]
HTML Code:
<span ng-repeat="type in typeList track by type.enumm">
<input
type="radio"
name="type" required
ng-model="myCtrl.object.type"
ng-value="type">
{{type.text}}
</span>
Some Explanation
I don't want to use "naked" texts, I want to use some sort of identifier - in this case it is an enum. The chosen value shall be the entire "type", not only "type.text" as the backend expects type, and not a simple String.
So all I do with this is always a package thingy, the type.text is for like formatted/internationlized text etc.
A Pre-Selection works by setting this in the controller: this.object.type = typeList[0];
The first radio button is already selected, wonderful.
But why isn't it selected when editing the object. I made a "log" within the HTML with {{myCtrl.object.type}} and the result is {"text":"cool option","enumm":"COOL"}. The very same like when pre selecting. I already work with the same "technique" using select inputs, and it works fine. I also found some google results saying "use $parent because of parent/child scope". But 1) I didn't get that straight and 2) think it is not the problem here, as I use a controllers scope and not the $scope, or is this thinking wrong?
It might be explained badly, sorry if so, but I hope someone 1) get's what I want and 2) knows a solution for it.
Thank you!
If you're trying to bind to elements from an array, I believe you need to assign the actual elements from the array to your model property.
So this creates a new obj and sets it to $scope.selectedType (not what you want):
$scope.selectedType = {"text":"cool option","enumm":"COOL"};
whereas this assigns the first element of the array (which is what you want)
$scope.selectedType = $scope.typeList[0];
So to change the model, you can lookup the entry from the array and assign it to your model with something like this
$scope.selectedType = $scope.typeList.filter(...)
Here's a quick example of this approach http://plnkr.co/edit/wvq8yH7WIj7rH2SBI8qF
This jsFiddle hopefully demonstrates the problem I am facing with IE 9. I am roughly doing the same things I am doing in my real app. I have a list of stuff that I loop through using ngRepeat. Each item has a property that can be selected from a dropdown list which is rendered using ngOptions.
The problem in IE seems to be that selecting an item from the list jumps back to the previous item in the list. Chrome does not have this problem, the item selection is perfect. In the example, try selecting the value 'Imported' in the Fiddle - I could simply not do it in IE whereas it works perfectly in Chrome.
The only thing I can think of that could be a problem is the IDs for the dropdown which are currently just plain old string values like '20', '30' and '40'.
The code for ngOptions is
<select class="form-control" id="selProc" data-ng-model="currentPlant.ProcType" data-my-dropdown='Plants' data-ng-options="plant.SpecialProcurement as plant.Description for plant in Plants"></select>
currentPlant here is the looped variable.
The dropdown values are the following array:
var dropDownValues = [{
Plant: '2150',
SpecialProcurement: '20',
Description: 'External'
}, {
Plant: '2150',
SpecialProcurement: '30',
Description: '3rd Party'
}, {
Plant: '2150',
SpecialProcurement: '40',
Description: 'Imported'
}];
These dropdown values get populated in a custom directive's link function. In my real app the list gets fetched using $http.post() and the result is assigned to the dropdown variable using JSON.stringify. Regardless of whether this is good practice or not, the problem still persists. If the problem is because of the JSON.stringify, I would be keen to know. I have tried replacing that with a regular array assignment but the result is the same.
I'm stumped. Please help.
I am maintaining a site that allows users to create a profile of sorts that will allow them to broadcast activities to a feed. I implement ng-grid to keep track of all the profiles that are created, and have created two buttons that allow users to create/edit these profiles. My only problem right now is, when users select a row on the grid and attempt to edit that specific row, the drop-down menu is not auto-populated with the data from ngModel.
This is the part of the form I am having trouble with:
<select ng-model="source.canSendTo" ng-options="value.name for value in sourceCanSendTo" data-style="btn" bs-select></select>
And within the controller, I have sourceCanSendTo defined as:
$scope.sourceCanSendTo = [ {"id":"abc", "name": "ABC"}, {"id":bcd", "name": "BCD"} ... ];
On row selection, I simply set source = the selected item, and console.logs show that all the data is there. The other parts of the form are being populated properly (mainly s), and console.log($scope.source.canSendTo) shows that the original data is there, it's just that select is defaulted to being blank...how would I go about trying to pre-select certain elements on the drop-down select I currently have?
For example, if the profile has 'abc', 'bcd' selected, how can I make it so that when I edit that profile, the drop down box shows 'abc,bcd' instead of just "Nothing Selected"?
Edit: I previously responded to a comment inquiring about bs-select, saying that it simply controlled some CSS elements of the drop down box - seems like this is completely incorrect after a quick google search when everything else led to dead ends. Does anyone have any idea how to properly initialize the model with data so that when I preload my form, the 'can send to' drop down select actually has the selected options selected, as opposed to saying "Nothing Selected"? Thanks in advance for all help!
As you are binding source.canSendTo to the name (value.name) of sourceCanSendTo then you just need to initially have an structure binding the names which had been saved, something like this:
source.canSendTo = ['abc', 'bcd']; //And all the selected values
So you need to construct your source.canSendTo property to this structure.
PS: If you show how you bring your data from the server, I can help you to construct the source.canSendTo property.
$scope.canSendTo must be initialized with a reference to the selected option.
var initialSelection = 0;
$scope.source = { canSendTo : [ {"id":"abc", "name": "ABC"}, {"id":bcd", "name": "BCD"} ... ] };
$scope.canSendTo = $scope.source.canSendTo[initialSelection];
Finally found out what was wrong with my code - seems like the data being stored in the model wasn't the same as what was in ngOptions, played around a bit with ngOptions and managed to get something that works. Working snippet of code:
<select ng-model="sendTo.name" ng-option="value.name as value.name for value in sourceCanSendTo" data-style="btn" multiple bs-select>
(Realized that the variable being used for ngModel was a fairly ambiguous in terms of naming convention, changed it)