diff --git a/web/client/components/TOC/fragments/settings/FeatureInfoEditor.jsx b/web/client/components/TOC/fragments/settings/FeatureInfoEditor.jsx
index dcc4991f1d..9b124312f6 100644
--- a/web/client/components/TOC/fragments/settings/FeatureInfoEditor.jsx
+++ b/web/client/components/TOC/fragments/settings/FeatureInfoEditor.jsx
@@ -7,6 +7,7 @@
  */
 
 const React = require('react');
+const PropTypes = require('prop-types');
 const ReactQuill = require('react-quill');
 const ResizableModal = require('../../../misc/ResizableModal');
 const Portal = require('../../../misc/Portal');
@@ -31,38 +32,76 @@ Quill.register({
  * @prop {bool} enableIFrameModule enable iframe in editor, default true
  */
 
-module.exports = ({onShowEditor = () => {}, showEditor, element = {}, onChange = () => {}, enableIFrameModule = true}) =>(
-    <Portal>
-        <ResizableModal
-            fade
-            show={showEditor}
-            title={<Message msgId="layerProperties.editCustomFormat"/>}
-            size="lg"
-            showFullscreen
-            clickOutEnabled={false}
-            onClose={() => onShowEditor(!showEditor)}
-            buttons={[
-                {
-                    bsStyle: 'primary',
-                    text: <Message msgId="close"/>,
-                    onClick: () => onShowEditor(!showEditor)
-                }
-            ]}>
-            <div id="ms-template-editor" className="ms-editor">
-                <ReactQuill
-                    bounds="#ms-template-editor"
-                    modules={enableIFrameModule ? {
-                        resizeModule: {},
-                        toolbar: toolbarConfig
-                    } : {}}
-                    defaultValue={element.featureInfo && element.featureInfo.template || ' '}
-                    onChange={template => {
-                        onChange('featureInfo', {
-                            ...(element && element.featureInfo || {}),
-                            template
-                        });
-                    }}/>
-            </div>
-        </ResizableModal>
-    </Portal>
-);
+class FeatureInfoEditor extends React.Component {
+
+    static propTypes = {
+        showEditor: PropTypes.bool,
+        element: PropTypes.object,
+        onChange: PropTypes.func,
+        onShowEditor: PropTypes.func,
+        enableIFrameModule: PropTypes.bool
+    };
+
+    static defaultProps = {
+        showEditor: false,
+        element: {},
+        enableIFrameModule: false,
+        onChange: () => {},
+        onShowEditor: () => {}
+    };
+
+    state = {
+        template: ' '
+    };
+
+    componentWillMount() {
+        this.setState({
+            template: this.props.element && this.props.element.featureInfo && this.props.element.featureInfo.template || ' '
+        });
+    }
+
+    render() {
+        const { showEditor, enableIFrameModule = true } = this.props;
+        return (
+            <Portal>
+                <ResizableModal
+                    fade
+                    show={showEditor}
+                    title={<Message msgId="layerProperties.editCustomFormat"/>}
+                    size="lg"
+                    showFullscreen
+                    clickOutEnabled={false}
+                    onClose={() => this.close()}
+                    buttons={[
+                        {
+                            bsStyle: 'primary',
+                            text: <Message msgId="close"/>,
+                            onClick: () => this.close()
+                        }
+                    ]}>
+                    <div id="ms-template-editor" className="ms-editor">
+                        <ReactQuill
+                            bounds="#ms-template-editor"
+                            ref={(quill) => { if (quill) { this.quill = quill; } } }
+                            modules={enableIFrameModule ? {
+                                resizeModule: {},
+                                toolbar: toolbarConfig
+                            } : {}}
+                            defaultValue={this.state.template}
+                            onChange={template => this.setState({ template })}/>
+                    </div>
+                </ResizableModal>
+            </Portal>
+        );
+    }
+
+    close = () => {
+        this.props.onShowEditor(!this.props.showEditor);
+        this.props.onChange('featureInfo', {
+            ...(this.props.element && this.props.element.featureInfo || {}),
+            template: this.state.template
+        });
+    };
+}
+
+module.exports = FeatureInfoEditor;
diff --git a/web/client/components/TOC/fragments/settings/__tests__/FeatureInfoEditor-test.jsx b/web/client/components/TOC/fragments/settings/__tests__/FeatureInfoEditor-test.jsx
index a8070dae35..ccb0d2c688 100644
--- a/web/client/components/TOC/fragments/settings/__tests__/FeatureInfoEditor-test.jsx
+++ b/web/client/components/TOC/fragments/settings/__tests__/FeatureInfoEditor-test.jsx
@@ -30,35 +30,67 @@ describe("test FeatureInfoEditor", () => {
     });
 
     it('test rendering close x', () => {
+        const template = '<p>html</p>';
 
         const testHandlers = {
-            onShowEditor: () => {}
+            onShowEditor: () => {},
+            onChange: () => {}
         };
         const spyOnShowEditor = expect.spyOn(testHandlers, 'onShowEditor');
+        const spyOnChange = expect.spyOn(testHandlers, 'onChange');
 
-        ReactDOM.render(<FeatureInfoEditor onShowEditor={testHandlers.onShowEditor} showEditor/>, document.getElementById("container"));
+        const cmp = ReactDOM.render(<FeatureInfoEditor
+            onChange={testHandlers.onChange}
+            onShowEditor={testHandlers.onShowEditor}
+            showEditor/>, document.getElementById("container"));
         const modalEditor = document.getElementsByClassName('ms-resizable-modal');
         expect(modalEditor.length).toBe(1);
+
+        // edit template
+        const editor = cmp.quill.getEditor();
+        editor.clipboard.dangerouslyPasteHTML(template);
+        expect(spyOnChange).toNotHaveBeenCalled();
+        spyOnChange.reset();
+
         const btns = document.getElementsByClassName('ms-header-btn');
         expect(btns.length).toBe(2);
         TestUtils.Simulate.click(btns[1]);
         expect(spyOnShowEditor).toHaveBeenCalled();
+
+        expect(spyOnShowEditor).toHaveBeenCalled();
+        expect(spyOnChange.calls[0].arguments).toEqual([ 'featureInfo', { template } ]);
     });
 
     it('test rendering close button', () => {
 
+        const template = '<p>html</p>';
+
         const testHandlers = {
-            onShowEditor: () => {}
+            onShowEditor: () => {},
+            onChange: () => {}
         };
+
         const spyOnShowEditor = expect.spyOn(testHandlers, 'onShowEditor');
+        const spyOnChange = expect.spyOn(testHandlers, 'onChange');
 
-        ReactDOM.render(<FeatureInfoEditor onShowEditor={testHandlers.onShowEditor} showEditor/>, document.getElementById("container"));
+        const cmp = ReactDOM.render(<FeatureInfoEditor
+            onChange={testHandlers.onChange}
+            onShowEditor={testHandlers.onShowEditor}
+            showEditor/>, document.getElementById("container"));
         const modalEditor = document.getElementsByClassName('ms-resizable-modal');
         expect(modalEditor.length).toBe(1);
+
+        // edit template
+        const editor = cmp.quill.getEditor();
+        editor.clipboard.dangerouslyPasteHTML(template);
+        expect(spyOnChange).toNotHaveBeenCalled();
+        spyOnChange.reset();
+
         const btns = document.getElementsByClassName('btn');
         expect(btns.length).toBe(1);
         TestUtils.Simulate.click(btns[0]);
         expect(spyOnShowEditor).toHaveBeenCalled();
+        expect(spyOnChange.calls[0].arguments).toEqual([ 'featureInfo', { template } ]);
     });
 
 });