If used with databinding the input flickers and looses focus

Question

If used with databinding the input flickers and looses focus

Opened this issue 9 years ago · 0 comments

GoogleCodeExporter commented 9 years ago

By referring to  
http://books.zkoss.org/wiki/ZK%20Developer's%20Reference/MVVM/Advanced/Binding%2
0Annotation%20for%20a%20Custom%20Component#Declare_Data_Binding_in_Language_Addo
n_XML I was able to enable ZK databinding for codemirror component. I was 
trying to bind a Viewmodel property with codemirror with @bind annotation. 

Test case
1. Load some default value
2. change the value of codemirror manually
3. click the "Add Text" button

Expected:
In step #2 the cursor should stay inside the codemirror editor at all times

Actual:
In step #2 after you enter few chars (dur to default delay config) an onChange 
event is fired causing the binder to reload the property in codemirror again. 
This work fine but at the end codemirror editor looses its focus

Notes:
In general databinding implementation the value from component is saved to 
ViewModel whenever there is a onChange event. However for codemirror I see 
onChange is fired for
1. everytime the value in codemirror changes i.e. for every keystroke
2. any cursor activity
because of the default config is 

//from js/codemirror/Codemirror.js _init function
var defaultConfig = {
                                path: zk.ajaxURI("/web/js/codemirror/codemirror/js/", {au : true, ignoreSession : true}),
                                stylesheet: css,
                    parserfile: syntax["js"],
                                readOnly: this._readonly,
                                content: this._value,
                                onChange: function() { wgt._processChange(); },
                                onCursorActivity: function() { wgt._processChange(); }
                };

Ideally if you follow ZK Textbox component behavior it firs onChange when user 
tabs out of the input element i.e. onBlur.
Currently this is not possible with Codemirror component as it doesn't have any 
config options to add onBlur handling.
However I saw in CodeMirror 3.x version there is a Codemirror.on() method that 
allows you to specify a callback function when ever Codemirror looses focus.

Any idea how to get around this in current Codemirror 2.x based implementation 
or any thoughts how easy it is to upgrade to CodeMirror 3.x version?

Original issue reported on code.google.com by ash...@potix.com on 26 Apr 2013 at 4:06

Attachments: