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.