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.
Related
In my React project, sometimes a dynamically generated UUID needs to be added to the a data-testid value to ensure uniqueness amongst duplicate components in the DOM.
I have a test situation where I can grab the element I want. Now I want to get the dynamically generated data-testid from it. I've tried this but it doesn't work:
const questionDropdown = queryAllByText('Free Text')[0];
console.log(questionDropdown.getAttribute('data-testid'));
Any suggestions how to get it?
I think it's a dataset so you can get it like this:
console.log(questionDropdown.dataset.testid);
If you have an expected result you can test it with testing-library/jest-dom:
expect(questionDropdown).toHaveAttribute("data-testid", "test-id");
Doc: https://github.com/testing-library/jest-dom#tohaveattribute
I finally figured out how to do it!
So, I have a Semantic-UI Dropdown with a dynamically generated data-testid. The trick to getting the element is simply to use Regex, like this:
const questionTypeDropdown = getByTestId(/conditional-task-question-type/);
I'm revisiting this. I believe that the answer from adesuriey works great if you're dealing with conventional text, say in an Input element. But in the Semantic UI Dropdown it does not appear to work.
I think the problem lies with finding the correct ancestor element. I've tried many things but with no success.
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!
I'm using react JS and I have a problem. I don't know how to get the value from my dropdown and put that value into a onclick button. I have read lots of topics but I haven't find anything really useful for a beginner like me.
I am using "scheduler" that helped me built my dropdown and some other stuffs.
So, my dropdown get data from a local file and looks like this:
{values.map(v => (
<option value={this.value}>{v.value}</option>
))}
console.log(ref)
And my button is like this:
<Button onClick={() => this.decrement()}>
Ajouetr la réservation
</Button>
The decrement method was only there to test if it was working, and it is.
Actually, what I want to do is quite simple: I have some values in my dropdown (from 1 to 7). And I have a state that says there is 30 places available. What I want is when I choose a specified item in my dropdown AND validate with my button and then my state to decrement with the specified number. Because right now it only decrement with 1.
I hope it's clear enough for someone to help me, because I spent 2 days on that problem and I don't know what to do.
Thank you :)
Next time, it's nice to provide an interactive example with your question. Here's a CodeSandbox I made that (I hope) illustrates your example (link). If you want to fiddle with the example, just click "Fork" in the top right corner.
Back to the solution:
I think what you're missing is storing the selected value in your state along with the 30 "places". What you want is to make your <select /> tag into a "controlled component". When someone interacts with the <select /> you want to change the internal state so that it matches the selected value. That way, when you call decrement() from your button, you can use the internal state's value rather than getting it from a ref (I think that's what you were trying to do).
Here's a link to the React doc that explains how to use forms, specifically the <select /> tag: (link).
Take care!
I would say that you can think about this in 2 different steps:
SET THE QUANTITY STATE
Set the state with the current dropdown value - For achieving this, you can just use the onChange method in your select:
<select name="quantity"
value={this.state.quantity}
onChange={this.onSelectQuantity}
>
In your constructor, you create a variable quantity inside your state
Create a function called onSelectQuantity where you will set the quantity state with setState.
Do not forget to bind the function onSelectQuantity on the constructor.
With this, every time that you change the value on select, your state would capture its value. You can log it from the function if you want to test if it works.
DECREMENT FROM THE BUTTON
After this, you can just decrease the value of the state again from decrement function
<Button onClick={this.decrement}>
Ajouetr la réservation
</Button>
You will have a function...
decrement() {
const newQuantity = this.state.quantity - 1;
this.setState({
quantity: newQuantity
})
}
Hope it helps!
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
Using AngularJS, I'm setting HTML form elements with some data inside $scope.
<select style='width:300px' size='10' ng-model='selected' ng-options='k as v for (k,v) in options' />
In this example, size is set to 10. But I would like to set it according to some value inside the $scope. Is there a way?
Use ng-size='10' instead of size
That look like
<select style='width:300px' ng-size={{size}} ng-model='selected' ng-options='k as v for (k,v) in options' />
js code
$scope.size=10;
Edit
As part of our effort to clean out old issues, this issue is being automatically closed since it has been inactivite for over two months.
Please try the newest versions of Angular (1.0.8 and 1.2.0-rc.1), and if the issue persists, comment below so we can discuss it.
New Edit
or You can do this way
data-ng-attr-size="{{some interpolated expression}}"
Demo : http://plnkr.co/edit/a1xLPGn2YeW0WavH2auD?p=preview
Thanks!
For me, ng-attr-size worked instead of size or ng-size.
The following will adjust the size of select to the length of the object named options.
ng-attr-size={{options.length}}