I have implemented react-select to allow entering tags based on auto-complete suggestions and/or inserting new ones.
My implementation is as follows:
import Select from 'react-select';
...
<Select.AsyncCreatable
className='add-tags'
clearable={!!selectionTags}
placeholder={'add more'}
name="form-field-name"
value={selectionTags}
onChange={setSelectionTags}
loadOptions={loadOptions}
promptTextCreator={(label)=>`add new tag: ${label}`}
inputProps={inputProps}
multi
/>
When selectionTags is the list of tags that have already been selected, setSelectionTags is a function that adds a new selected item to that list, and loadOptions holds the list of autocomplete suggestions.
Problem is that if I type "ta" and I have "tag1" as one of the available completions, then choosing it will empty the list of suggestions but leave the "add new tag: ta" entry displayed.
Any idea why it's not being removed as well?
Thanks!
Following this thread on React-Select github:
https://github.com/JedWatson/react-select/issues/1663
I ended up working round it by adding the following options:
ref={s => (selectRef = s)} // store a reference to the select instance
onChange={tags => {
selectRef.select.closeMenu(); // close the entire menu
selectRef.select.setState({
isFocused: false, // remove focus from new tag option
});
setSelectionTags(tags); // call the add tags method with the new set of tags
}}
Related
How can I remove filter options from React Data Grids filters? For example when I do FilterEditior: SelectFilter it shows "Contains", "Does not contain", "Equal" etc but I only want the filtering options to be "Contains" and "Equal". I can only find a way to add filtering options with renderColumContextMenu but none to remove.
Their renderColumnContextMenu property allows customization of the Context Menu (the menu at the top of each column with a "3 line" icon).
It sounds like you want renderColumnFilterContextMenu, which allows customization of the Filter Context Menu (the menu with "Not in list" etc). They provide an example here: https://reactdatagrid.io/docs/api-reference#props-renderColumnFilterContextMenu.
For example to remove their "Not in list" menu item, modify the renderColumnFilterContextMenu function from that example as follows:
const renderColumnFilterContextMenu = useCallback((menuProps, {
cellProps }) => {
// Limit this change to the specific column,
// by referring to its id or name from your columns array.
if (cellProps.id === 'country') {
menuProps.items = menuProps.items.filter((item) => item.itemId !== 'operator-notinlist');
}
}, []);
Note: I know you specifically asked about the "Does not contain" menu item, but in their 4.21.0 community/enterprise versions I see it as "Not in list".
I'm currently working on a springboot/reactjs project. I'm using the react select library to set a multi select input in one of my forms but I could not get the selected values here's some code to make it a bit clearer.
these are my options generated dynamically from the database each option has the webService Id as a value
this is my select input, I need to get the selected values "Ids" and then call the method that retrieves the webservices from the database and then assign the list of webServices to my newApplicationData.webservices
this is the get web service function
Update : I kind off found a solution to my problem : on the onChange prop I used this
onChange={(selectedOptions) => {
const state = this.state;
state.selectedWebServices = [];
selectedOptions.forEach((option) => {
this.getWS(option.value);
state.selectedWebServices.push(this.state.getWSData);
});
state.newApplicationData.webServices =
state.selectedWebServices;
this.setState(state);
}}
and then I found out another problem: even if I select two deffrent options the list of selected options only gets one duplicated option????!!!!
I have a ng-multiselect dropdown. When I select all the values Instead of displaying all the values from the dropdown It should just display "All" in the dropdown.
<ng-multiselect-dropdown
[placeholder]="dropdowns.label"
[data]="dropdowns.optionsList"
[(ngModel)]="dropdowns.value"
[settings]="dropdownSettings"
(onSelect)="onItemSelect($event)"
(onSelectAll)="onSelectAll($event)"
>
this.dropdownSettings = {
singleSelection: false,
idField: 'item_id',
textField: 'item_text',
selectAllText: 'All',
unSelectAllText: 'UnSelect All',
itemsShowLimit: 3,
allowSearchFilter: false
};
When selected all the dropdowns it should display 'All' in the dropdown
you can try by changing the value of dropdowns.value with "ALL" when you select all options.
and you can do this in this event (onSelectAll).
In .ts file:
onSelectAll(event){dropdowns.value="ALL"}
It seems you have done some changes in node_module and you are not able to get changes in build. It's common in angular. Angular will not get your custom changes in the production build.
If you your custom changes works fine then use this command to make a build. With the help of this command you will get your changes in build.
ng build --aot=false
I have tried a lot for implementing the same but couldn't find any solution as it is already built library.
I've found an alternative for it. Set the itemShowLimit to 0, this means there won't be any item to display. In that case, add a span right next to the multiselect dropdown and adjust the position accordingly. Worked for me :)
Sample code:
In .ts file:
this.dropdownSettings = {
singleSelection: false,
idField: 'item_id',
textField: 'item_text',
selectAllText: 'All',
unSelectAllText: 'UnSelect All',
itemsShowLimit: 0,
allowSearchFilter: false
};
In HTML File:
<ng-multiselect-dropdown
[placeholder]="dropdowns.label"
[data]="dropdowns.optionsList"
[(ngModel)]="dropdowns.value"
[settings]="dropdownSettings"
(onSelect)="onItemSelect($event)"
(onSelectAll)="onSelectAll($event)"
><span>All</span>
I have customized display as I wanted to show the number of items selected: https://i.stack.imgur.com/BsmRN.png
I want to select element from drop down list but in html they have used <img> tag. How can I achieve my goal?
This is stuff from my code:
public void country() {
driver.manage().timeouts().implicitlyWait(30, TimeUnit.SECONDS);
Select country1 = new Select(country);
country1.selectByVisibleText("Canada");
}
I am getting this error while running testNg test
org.openqa.selenium.support.ui.UnexpectedTagNameException: Element should have been "select" but was "img"
As you mentioned:
... but in html they have used <img> tag.
Which your error confirms. So, as per the error, you obviously cannot use Select().
You did not provide enough information to give a complete answer! But think about what the user would do. First they would click on the outer element:
driver.findElement(By.id(country)).click(); // replace country with appropriate ID, or other locator!
After this the user will have to wait for the menu to completely appear. Same for your code!
Next, the user can click on the desired option:
driver.findElement(By.id("Canada")).click(); // again, replace "Canada" with appropriate locator!
It is quite possible that the resulting menu will be long. Instead of the above .click() you may need to grab all the menu items based on some locator, and then iterate over all of them:
List<WebElement> items = driver.findElements(By....);
for(WebElement item : items) {
if(item.getText().equals("Canada"))
item.click();
}
Use the following code:
List<WebElement> lstOptions=Country1.getoptions();
for(WebElement lstOption:lstOptions){
if(lstOption.gettext().tolowercase().equals("canada"))
lstOption.click();
}
How to find dropdown list value.....
Use this code sure its help you!!!
driver.findElement(By.xpath("ur xpath")).click();
new Select(driver.findElement(By.name("EventType"))).selectByVisibleText("Birthday");
or
new Select(driver.findElement(By.id("city"))).selectByValue("Op3");
I want to add new fields or propierties to an calendar event. How can I do it?
Thanks!
You need to
add new section to lightbox form
http://docs.dhtmlx.com/doku.php?id=dhtmlxscheduler:details_form
for new section of lightbox, set map_to value as name of new field
on server side add extra field to the list of fields in render command
This is how you would create a simple href link inside an event:
1) Go to the Event Configuration Console and create a custom field, under the section that says 'CUSTOM FIELD'. Give the field a name. In this example, call it 'url'. Select its type as 'TextArea'.
2) Create another custom field, call it 'link_title'.Also a 'TextArea'. Description is optional.
SAVE
3) Go to the 'Templates' section of the event console. Under the first section (... scheduler.templates.event_text=function(start,end,event){... ) where you can input text, put ->
return "<b> "+event.text+"</b><br><br>" + event.link_title + "";
SAVE
When you go to create your event from the main calendar, you will see extra fields. Type in them, save your event, and voila. Toot Sweet.
What do you mean by calendar event?
Is it adding a new event?, then it must be done using lightbox(built-in option)
scheduler.config.lightbox.sections=[
{ name:"description", height:50, map_to:"text", type:"textarea", focus:true },
{ name:"location", height:43, map_to:"event_location", type:"textarea",
default_value:"Blackheath Avenue London,Greenwich,Greater London SE10 8XJ,UK"},
{name:"recurring", height:115, type:"recurring", map_to:"rec_type",
button:"recurring"},
{ name:"time", height:72, type:"time", map_to:"auto"}
];
each tag used in here is suppoted by the plugin,,,,in you want to have a seperate customize lightbox go to
http://docs.dhtmlx.com/scheduler/custom_details_form.html
This is the preview