Clearing the value of a DropDownList with inline clear "button"

Hi Pieter,

Thank you for providing the images to help clarify. At the moment, there is a difference between the DropDowns due to the popularity and usability of the current designs.

Of course, being consistent accross all of them is a reasonable request and there has already been submitted a feauture request for this particular case:
https://feedback.telerik.com/kendo-react-ui/1511750-add-an-option-to-customize-the-filter-input-of-the-dropdowns 

The feature will be planned based on community interest. As a heads up, I've already added a vote on your behalf for this feature and we will continue to monitor the popularity of this case.

Additionally, I believe that this feature request could also be of interest for you and you can vote for it as well:
https://feedback.telerik.com/kendo-react-ui/1510454-make-look-and-behavior-of-multiselect-similar-to-combobox 

Hope this information is helpful.

Regards,
Krissy
Progress Telerik

For anyone stumbling across this question, I solved it by adding a custom valueRender:

 const valueRender = (element: React.ReactElement<HTMLSpanElement>, value: T) => {
      if (!value) {
        return element;
      }

      const children = [
          <span key={1} style={{overflow: "hidden", textOverflow: "ellipsis", flexGrow: 1}}>{element.props.children}</span>,
          <span key={2} className="k-icon k-clear-value k-i-close" role="button" tabIndex={-1} title="Clear" onClick={clearValue}></span>,
      ];

      return React.cloneElement(element, { ...element.props }, children);
    };

    const clearValue = (e: React.MouseEvent<HTMLSpanElement>) => {
      e.stopPropagation();
      e.preventDefault();

     // Do whatever you need to do to clear the value
    };