Fix CodeMirror not refreshing on value change.

On changing a different device-profile template and thus changing the
this.state.value, CodeMirror would not rerender until focussing the
textarea field.
This commit is contained in:
Orne Brocaar 2022-07-05 15:18:43 +01:00
parent 6dbbaff7b6
commit 9ab2f77ee2
2 changed files with 4 additions and 3 deletions

View File

@ -17,6 +17,7 @@ interface IProps {
interface IState {
value: string;
reloadKey: number;
}
class CodeEditor extends Component<IProps, IState> {
@ -24,6 +25,7 @@ class CodeEditor extends Component<IProps, IState> {
super(props);
this.state = {
value: "",
reloadKey: 0,
};
}
@ -43,6 +45,7 @@ class CodeEditor extends Component<IProps, IState> {
if (this.props.value) {
this.setState({
value: this.props.value,
reloadKey: this.state.reloadKey + 1,
});
}
}
@ -75,7 +78,7 @@ class CodeEditor extends Component<IProps, IState> {
return (
<Form.Item label={this.props.label} name={this.props.name} tooltip={this.props.tooltip}>
<div style={{ border: "1px solid #cccccc" }}>
<CodeMirror value={this.state.value} options={codeMirrorOptions} onBeforeChange={this.handleChange} />
<CodeMirror key={`code-editor-refresh-${this.state.reloadKey}`} value={this.state.value} options={codeMirrorOptions} onBeforeChange={this.handleChange} />
</div>
</Form.Item>
);

View File

@ -331,8 +331,6 @@ class DeviceProfileForm extends Component<IProps, IState> {
templateModalVisible: false,
});
console.log(dp.toObject().tagsMap);
this.formRef.current.setFieldsValue({
name: dp.getName(),
description: dp.getDescription(),