Dynamically add chips on enter

Question

Hi there, im trying to find similar component like angular chip but i cant seems to find a example of similar here

Basically when user types in text and press enter, it gets added to the chip list. Could you provide an example or link to the demo page?

thanks

Berly Christopher · Accepted Answer

Hi ONG YU FENG, 
  
Thanks for sharing information to us.  
  
We can achieve the requested requirement with help of popupWidth and popupHeight as 0px and make the below styles in the popup content as mentioned below. 
  




  <MultiSelectComponent 
  id="customelement" 
  dataSource={this.gameList} 
  fields={this.fields} 
  mode="Box" 
  cssClass="e-custom" 
  popupWidth="0px" 
  popupHeight="0px" 
  placeholder="Favorite sports" 
  allowCustomValue={true} 
/> 


.e-custom .e-dropdownbase.e-content { 
  overflow: hidden  
} 
 
  
Sample Link: https://stackblitz.com/edit/react-vewcus-bdz3gh?file=index.js  
  
Regards, 
Berly B.C

Keerthana Rajendran · Answer

Hi ONG YU FENG, 
 
Thanks for contacting Syncfusion support. 
 
Query : I’m trying to find similar component like angular chip but i cant seems to find an example of similar here 
 
Please find the demo and UG links for React Chip component below  
 
Demo: https://ej2.syncfusion.com/react/demos/#/material/chips/default/ 
 
UG: https://ej2.syncfusion.com/react/documentation/chips/getting-started/ 
 
Query: Basically when user types in text and press enter, it gets added to the chip list. Could you provide an example or link to the demo page? 
 
We have EJ2 MultiSelect component with filtering similar to your requirement. Please refer to the below links to more details on MultiSelect component. 
 
Demo: https://ej2.syncfusion.com/react/demos/#/material/multi-select/filtering 
 
UG: https://ej2.syncfusion.com/react/documentation/multi-select/filtering/ 
 
Please let us know if you need further assistance.  
 
Regards, 
Keerthana.

ONG YU FENG · Answer

Thanks for the reply, the one suggested by you on  EJ2 MultiSelect component is pretty much close to what i need. But i do not need the drop down list function. is there anyway to remove the dropdown function?

ONG YU FENG · Answer

HiMaybe a better example:Is there any way to replicate like the one above?

ONG YU FENG · Answer

Thanks for your replyI have seen the example and this is what i want. however, i still able to see part of the dropdown list even tho the popup width and height is set to 0pxhow do i remove the dropdownlist entirely? thanks

Berly Christopher · Answer

Hi ONG YU FENG, 
  
We have modified the sample based on the requested requirement and attached it below. 
  




.e-custom .e-content.e-dropdownbase.e-nodata { 
  display: none; 
} 
 
  
Sample Link: https://stackblitz.com/edit/react-vewcus-qwljfc?file=index.css  
  
Regards, 
Berly B.C