DropDownList react wrapper and toggling enable

[Ryan]

I have a class as such:

export class DropDownList extends React.Component<DropDownListProps, object> {
  render() {
    var testing = (typeof this.props.enable !== 'undefined') ? this.props.enable.toString() : '';
    return (
      <div>
        <label>{this.props.title} {testing}</label>
        <Select {...this.props} enable={this.props.enable} />
      </div>
    );
  }
}

 

But when my component is re-rendered after the enable flag has changed from false to true, the dropdownlist stays disabled/gray. <Select> is a simple wrapper around kendo dropdownlist

import { DropDownList as KDropDownList } from '@progress/kendo-dropdowns-react-wrapper';

export default class DropDownList extends KDropDownList {}

 

And finally is used in

export const EditForm: React.StatelessComponent<EditFormProps> = ({ advice, change, editMode }) => {
  var opts: kendo.ui.DropDownListOptions = {
    dataTextField: "text",
    dataValueField: "value",
    enable: editMode,
    dataSource: [
      { text: "All", value: "all" },
      { text: "Inpatient", value: "ip" },
      { text: "Outpatient", value: "op" }
    ]
  };
  return (
    <div>
      <DropDownList name="encounterType" title="Encounter Type" {...opts} />
    </div>
  );
}

 

Is there something I'm doing wrong? My re-render clearly shows editMode going from false to true and is displayed within the label yet the DropDownList stays disabled. If I make the first state of the DropDownList enabled, it will flip to disabled, but then not again. It seems there's a probably only from the disabled->enabled direction.

[Stefan]

Hello, Ryan,

Thank you for the description.

The issue occurs as the Kendo UI for React wrappers are only wrapper of the jQuery widgets and some of the React specific functionalities like changing the properties by changing the value is not fully supported.

If the enable/disable status has to be changed, we can recommend using the API methods as demonstrated in our demo:

https://demos.telerik.com/kendo-react-ui/wrappers/dropdownlist/api

https://docs.telerik.com/kendo-ui/api/javascript/ui/dropdownlist#methods-enable

The described approach should be working as expected in our native React components expected in R1 January 2018.

Regards,
Stefan
Progress Telerik