TextItem value is changed after form redraw when value formatter/parser is used

[aliska]

Hi,
I have a problem with EditorValueFormatter and EditorValueParser used in TextItem. My text item has option "formatOnFocusChange" set to TRUE. Value formatter is enforced to format item value on each "focus" and "blur" event. In our application we are using TextItem to display number in simplified form when text item is not focused, e.g. number "2000.10" is presented as "2000 EUR" when field has not focus. It works nice when changing focus between editor items using <TAB> (in fact there is a bug when field is focused directly by mouse-click, but it is another story...).

Unfortunately, when editor is redrawn, currently displayed value (e.g. "2000 EUR") is passed to value parser as current item value. This is bug. I am not able to parse string "2000 EUR" to get again real value "2000.10".
From my point of view current display (element) value should not be used as item value, if a field is not focused/edited ... it could be "somehow" formatted, especially if "formatOnFocusChange" or "formatOnBlur" is switched on.

Example:

        VLayout tmpPanel = new VLayout();
        
        TextItem tmpT1 = new TextItem();
        tmpT1.setTitle("simple text item");
        
        TextItem tmpT2 = new TextItem();
        tmpT2.setTitle("text item with formatter");
        tmpT2.setFormatOnFocusChange(true);
        tmpT2.setEditorValueFormatter(new FormItemValueFormatter() {
            public String formatValue(Object value, Record record, DynamicForm form, FormItem item) {
                String tmpValue = value==null ? "" : String.valueOf(value);
                int tmpDP = tmpValue.indexOf('.') == -1 ? tmpValue.length() : tmpValue.indexOf('.');
                String tmpResult = item.getAttributeAsBoolean("hasFocus")
                    ? tmpValue
                    : "".equals(tmpValue) ? "" : tmpValue.substring(0, tmpDP) + " EUR";
                SC.logWarn("REQUEST TO FORMAT VALUE: focused==" +item.getAttributeAsBoolean("hasFocus")+ " valueToFomat==" +value+ " result==" +tmpResult);
                return tmpResult;
            }
        });
        tmpT2.setEditorValueParser(new FormItemValueParser() {
            public Object parseValue(String value, DynamicForm form, FormItem item) {
                if (value==null) return value;
                String tmpResult = value.replaceAll("[^0-9\\.]", "");
                SC.logWarn("REQUEST TO PARSE VALUE: valueToParse==" +value+ " result==" +tmpResult);
                return tmpResult;
            }
        });
        
        final DynamicForm tmpForm = new DynamicForm();
        tmpForm.setItems(tmpT1, tmpT2);
        
        IButton tmpBtn1 = new IButton();
        tmpBtn1.setTitle("Redraw form");
        tmpBtn1.addClickHandler(new ClickHandler() {
            public void onClick(ClickEvent event) {
                tmpForm.redraw();
            }
        });
        
        IButton tmpBtn2 = new IButton();
        tmpBtn2.setTitle("Show console");
        tmpBtn2.addClickHandler(new ClickHandler() {
            @Override
            public void onClick(ClickEvent event) {
                showConsole();
            }
        });
        
        tmpPanel.setWidth(500);
        tmpPanel.addMember(tmpForm);
        tmpPanel.addMember(tmpBtn1);
        tmpPanel.addMember(tmpBtn2);

Steps:
1. Type value 2000.10 to field "text item with formatter"
2. Use <TAB> keypress to move focus to another element and back to the number element (you can see, that value is smoothly changed from "2000.10" to "2000 EUR")
3. Start action "Redraw form"
4. Focus again field "text item with formatter" using <TAB> keypress ... note: do not use direct mouse-click to the field, because there is another formatting bug on-mouse-click event :-(
5. Value in field is change to "2000", decimal part is lost, because value for the field was reset to "2000 EUR" from original stored value "2000.10"
(check debug messages in console)

Is it bug or I am using text item value parser/formatter incorrectly?

Thank you,
Ales

SmartClient Version: v10.0p_2015-10-31/LGPL Development Only (built 2015-10-31)
Browser IE11 and FF41

[Isomorphic]

Hi,

We couldn't reproduce exact same behavior, if we change focus using <TAB> formatting is successfully applied no matter if form was redrawn or not. Are you sure steps to reproduce the issue are accurate?

And yes, there is a bug when you mouse-click the field configured the way you did. We'll take a deeper look into that.

In your case though you do not need that, please consider using TextItem.setFormatOnBlur(true) and TextItem.setValueFormatter(...) instead. Javadocs are not exactly accurate here, we'll fix that. SetValueFormatter in combination with formatOnBlur is called to format value when field does not have focus, i.e. exactly what you need. Note that you do not need to check if item has focus, cause formatter will be called only when item loses focus. And you may keep editorValueParser to control the input if you want.

See example below of TextField configured like described above:

TextItem tmpT3 = new TextItem();
tmpT3.setTitle("text item with static formatter");
tmpT3.setFormatOnBlur(true);
tmpT3.setValueFormatter(new FormItemValueFormatter() {
    public String formatValue(Object value, Record record, DynamicForm form, FormItem item) {
        String tmpValue = value==null ? "" : String.valueOf(value);
        int tmpDP = tmpValue.indexOf('.') == -1 ? tmpValue.length() : tmpValue.indexOf('.');
        String tmpResult = "".equals(tmpValue) ? "" : tmpValue.substring(0, tmpDP) + " EUR";
        SC.logWarn("REQUEST TO FORMAT VALUE: valueToFomat==" +value+ " result==" +tmpResult);
        return tmpResult;
    }
});
tmpT3.setEditorValueParser(new FormItemValueParser() {
    public Object parseValue(String value, DynamicForm form, FormItem item) {
        if (value==null) return value;
        String tmpResult = value.replaceAll("[^0-9\\.]", "");
        SC.logWarn("REQUEST TO PARSE VALUE: valueToParse==" +value+ " result==" +tmpResult);
        return tmpResult;
    }
});

Let us know if it worked for you.

[aliska]

Thanks. Anyway, it still does not work in IE11.
Each click on "Redraw form" button produces additional "EUR" suffix ... after 3 clicks there is visible value "2000 EUR EUR EUR EUR" and decimal part is lost.
Please, could you verify that IE11 behaves incorrectly? Thank you.
You are right that solution with "formatOnBlur" is better than "formatOnFocusChange", thanks for hint. It seems that also problem with wrong formatting on mouse-click is gone if "formatOnFocusChange" is not set.
Ales

[Isomorphic]

We've made a change to address the problem in IE11 where the formatting would be applied multiple times on redraw. Try the next nightly build (Nov 26 or above) to get the fix

Regards
Isomorphic Software

[aliska]

Thanks! Now it works also in IE11.

Unfortunately now I have a problem to open SmartClient Developer Console with the newest SmartGWT. Click button "Show console" => exception: "unable to resolve sendChannel", MessagingDMIClient.connect(....)
See attached image:

[Isomorphic]

Yeah, that's definitely a bug - we've reproduced this and are investigating. Will update when fixed.

[Isomorphic]

This has been fixed and is being tested for release. Fix should appear in the Dec 3 build.