Free text for dropdownlist

[Amos]

Hi

I didn't find any reference for it in the docs so is it possible to show a dropdownlist with several options but still let the user enter his own option that does not appear in the list?

Thanks

[Ponmani Murugaiyan]

Hi Amos, 

Thanks for contacting Syncfusion support. 

Query: But still let the user enter his own option that does not appear in the list? 

 

Yes, you can enter your own option which is not present in the list and add that item to the datasource using addItem public method. Here we demonstrated with an example, when the typed character(s) is not present in the list, a button will be shown in the popup list. By clicking on this button, the custom value character is added in the existing list as a new item. 

AddItem public method: https://ej2.syncfusion.com/react/documentation/api/drop-down-list/#additem 

<DropDownListComponent id="customvalue" ref={ComboBox => {this.listObj = ComboBox; }} dataSource={this.searchData} filtering={this.onFiltering.bind(this)} allowFiltering={true} fields={this.fields} noRecordsTemplate={this.template} placeholder="Select a country" popupHeight="270px"/> 

this.onFiltering = e => { 

    let query = new Query(); 

    query = e.text !== "" ? query.where("Name", "startswith", e.text, true) : query; 

    e.updateData(this.searchData, query); 

    let proxy = this; 

    if (document.getElementById("nodata")) { 

      document.getElementById("btn").onclick = function() { 

        // get the typed characters 

        let customValue = document.getElementsByClassName("e-input-filter")[0].value; 

        // make new object based on typed characters 

        let newItem = { Name: customValue, Code: customValue }; 

        // new object added to data source. 

        proxy.listObj.dataSource.push(newItem); 

        // close the popup element. 

        proxy.listObj.hidePopup(); 

        // pass new object to addItem method. 

        proxy.listObj.addItem(newItem); 

        // select the newly added item. 

        proxy.listObj.element.value = customValue; 

      }; 

    } 

  }; 

} 

Output: 

 

Sample: https://stackblitz.com/edit/react-7bggib-7xxnc5?file=index.js 

Kindly check with the above sample meets your requirement. Please get back us if you need further assistance. 

Regards, 

Ponmani M

[Amos]

Thanks, it's not that intuitive for the user to use the filter in order to add a new item to the list.

How about considering it as a new feature where the user can enter a new value in the same place where a selected value is shown?

At the moment, when clicking in that area, the drop down appears, if a cursor can be also shown there for the user to type something/a new value, it would be great.

I hope my explanation is clear, this kind of a dropdown is pretty standard.

[Berly Christopher]

Hi Amos, 

  

Thanks for sharing information to us. 

  

We would like to inform you that DropDownList component is a non-editable input. So, we have not provided the support for entering the custom value on input in the dropdownlist. This is the default behaviour of the component. So, we have modified the work around solution for adding the entered custom value on pressing enter key in the filter input.  

  

this.onFiltering = e => { 

  let IsCustom = true; 

  let query = new Query(); 

  // frame the query based on search string with filter type. 

  query = 

    e.text !== "" ? query.where("Name", "startswith", e.text, true) : query; 

  // pass the filter data source, filter query to updateData method. 

  e.updateData(this.searchData, query); 

  let proxy = this; 

  //   document.getElementById("btn").onclick = function() { 

  this.listObj.filterInput.addEventListener("keydown", function(e) { 

    if (e.key == "Enter" && IsCustom) { 

      // get the typed characters 

      let customValue = document.getElementsByClassName("e-input-filter")[0] 

        .value; 

      // make new object based on typed characters 

      let newItem = { Name: customValue, Code: customValue }; 

      // new object added to data source. 

      proxy.listObj.dataSource.push(newItem); 

      // close the popup element. 

      proxy.listObj.hidePopup(); 

      // pass new object to addItem method. 

      proxy.listObj.addItem(newItem); 

      // select the newly added item. 

      proxy.listObj.element.value = customValue; 

      IsCustom = false; 

    } 

  }); 

  IsCustom = true; 

}; 

} 

 

 

  

Sample: https://stackblitz.com/edit/react-7bggib-jdhaht?file=index.js  

  

Based on the shared details, we suspect that you want to type the custom value in the parent input and add the entered value into the control. We have implemented the ComboBox component based on the requested behaviour. Kindly refer the below documentation and demo sample for know more about ComboBox component. 

  

UG Link: http://ej2.syncfusion.com/react/documentation/combo-box/getting-started.html#custom-values  

  

Demo Link: https://ej2.syncfusion.com/react/demos/#/material/combo-box/custom-value  

  

For your convenience, we have prepared the sample by achieving the requested requirement with help of combo box component and attached it below. 

  

Sample: https://stackblitz.com/edit/react-xnoxy4-ywgpb6?file=index.js  

  

Regards, 

Berly B.C 

[Amos]

oh, so I used the wrong component, thanks! :)

[Berly Christopher]

Hi Amos, 

  

Please let us know if you need further assistance on this. 

  

Regards, 

Berly B.C