I am creating a cascading kind of layout where I have two Select components for Roles and Users, the functionality I want is working fantastic except a use case where upon clearing/removing a role or clearing all roles, the Users Select component is not clearing the MultiValue items however the dataset is being cleared properly.
Please guide me as to how to achieve the said functionality, may be I am missing something or probably some kind of issue.
Here's a code snippet - https://codesandbox.io/s/l98n1o6lq7
You can control it via value attribute on Select in react-select. Following is the code you can try and manipulate accordingly -
<Select
closeMenuOnSelect={false}
isMulti
options={showUsers}
value={showUsers}
hideSelectedOptions={true}
backspaceRemovesValue={true}
/>
Working Demo - https://codesandbox.io/s/9z02ql079p
Related
I am using Material UI Select native in my project this way:
<Select
value={values.teamId}
native
onChange={handleSelectChange}>
<option aria-label="None" value=""/>
{(teamsList || []).map(ele => (
<option key={ele.teamId} value={ele.teamId}>{ele.teamDesc}</option>
))}
</Select>
and this is the result (it has form control component as parent, which doesn't affect the issue in hand):
The issue here is that I expect the component to be empty, and not showing me the first option as default
This way, the component has a value, wrong one, and when I submit my form I cannot make validation on it to see if the user forgot to pick a value here.
In my other select native components this works, but here its not because I've found out that the values.teamId = 10 but teamsList doesn't have team object with teamId = 10.
I've tried removing the first option - <option aria-label="None" value=""/> but this way it just shows me the other first team from my teamsList object..
P.S this doesn't happen with regular select (not native), but the issue there is that it handles many (20-30+) records poorly in performance and usability (searching with keyboard for instance) so I cannot use it.
Is there any trick to solve this?
https://material-ui.com/components/selects/#advanced-features
For some reason, some of the teamId values (given by the db) were strings, in those cases the select native couldn't compare them as the teamList has id as number.
So basically all I had to do it cast the values.teamId to number type and it worked.
conclusion: always check the type, guys..
I am using Select component from Antd 3.x library with mode="multiple" and other options as shown in codesandbox link below. The Search is not disabled even when setting showSearch={false}
Now, I can't upgrade to Antd 4.x. The issue is when I use Axe Accessibility tool on my web app, it complains about an extra "Input" in my Select, which doesn't have aria-label set. If I manually set it in chrome console, all is fine
Is there a way to work around this situation either by removing search field(not sure how?) or someway to set the aria-lable of the input to something like aria-lable="search"?
codesandbox link
TIA
You can use filterOption to control your option list.
In my case, my options's value is a list of accounts, which will change every times I input keyword. Option's value is account.id and label is account.name.
filterOption, set it () => true (that means, all of options are OK).
onSearch, I call API to request new list of accounts, which meet with my keyword.
But in your case, I think, set filterOption to () => true will solve your problem.
Hope you solve with my solution!
How we can reset selected values, like if I want to change selected values.
<Multiselect
options={this.state.robotTrackers}
onSelect={this.onSessionSelectRemove.bind(this)}
onRemove={this.onSessionSelectRemove.bind(this)}
displayValue="name"
closeOnSelect={true}
id="selectTracker"
ref={this.multiselectRefTracker}
placeholder="Select advertiser's tracker"
selectionLimit={5}
style={multiselectCustomStyle}
/>
I am trying this but it only clear all selected values not update.
this.multiselectRefTracker.current.resetSelectedValues(['1'])
I'm so sorry I found Multiselect before discovering MultiSelect, not only is its update mechanism non-standard for React (using createRef instead of setting the element's value) but I found it impossible to get resetSelectedValues to work, period.
I know it's not technically an answer to your question, but for anyone else stuck with this I would recommend migrating to MultiSelect instead.
You are on the right path.
Use this.this.multiselectRefTracker.current.resetSelectedValues() instead of this.multiselectRefTracker.current.resetSelectedValues(['1'])
I hope this would help you.
The application I am working on has multiple tabs, each tab contains a form with ng-submit. And they share some common fields for example: selectedService.
It's been set to required in both forms. However updating it in one form then switch to another form, Chrome wouldn't complaint it's required since it already has value, however IE 11 complaints that it's required although it already has data entered and angular indicates that it's valid as well.
Is there anyway that I can update IE to let it know that this model has been updated and it has value? Or it's the form needs re-validation?
---------------------Update--------------
I am finally able to replicate it: http://plnkr.co/edit/Gjphya?p=preview
So if you select a value in the first dropdown and click submit in the second row, it says it's required. This only happens in IE, not in Chrome or other browsers.
And I think the problem is around this line:
$scope.selectedService = null;
Thanks!
All I need to fix is to add this line in the select tag:
<option value="">Please Select...</option>
If I init the ng-model in controller, it also fix the issue, however sometimes it causes unexpected issue if the dropdown is binded to an array instead of object collection.
My current scenario is i query a service and bring an array of values and display it in dropdown in AngularJS using ng-options. The problem is i need a default value at the top of the dropdown somthing like "Select from the list".
I have done that using
<option value="">Select from the options</option>
the problem is i also need to persist the data when i select suppose first value in the dropdown and go to some other page for sometime and come back to the same page which has that dropdown. That time i again need to see the first item selected and not the "Select from the options" thing.
How can i add this text "Select from the options" to the array which comes after querying a service and populates the dropdown also maintaining the persistence using ngModel.
Thanks,
MK
Assuming that the "other page" is still in the same (single-page) Angular application, you can store the selection in a factory and when you come back to the page, initialize the ngModel object (in the controller) by reading it from the factory. There are many ways, but this is one of the usual basic patterns in Angular.
If the visit to the "other page" causes Angular to be reloaded, one typical approach is to store the settings in local storage.