Disabled form with validation error does not look disabled

[pavo123]

Hi Isomorphic,

please have a look at this test case.

Behaviour: If form shows validation error and then gets disabled afterwards, it doesn't look disabled but it is disabled. I would expect that if the form is disabled it should always look disabled.

Before disabling I could "clean errors" and that would solve my actual problem but INHO this still doesn't behave right.

SmartClient Version: v12.0p_2020-03-11/PowerEdition Deployment (built 2020-03-11)

package com.smartgwt.sample.client;

import com.google.gwt.core.client.EntryPoint;
import com.smartgwt.client.Version;
import com.smartgwt.client.core.KeyIdentifier;
import com.smartgwt.client.data.AdvancedCriteria;
import com.smartgwt.client.data.Criterion;
import com.smartgwt.client.data.DataSource;
import com.smartgwt.client.types.OperatorId;
import com.smartgwt.client.util.Page;
import com.smartgwt.client.util.PageKeyHandler;
import com.smartgwt.client.util.SC;
import com.smartgwt.client.widgets.Button;
import com.smartgwt.client.widgets.IButton;
import com.smartgwt.client.widgets.Window;
import com.smartgwt.client.widgets.events.ClickEvent;
import com.smartgwt.client.widgets.events.ClickHandler;
import com.smartgwt.client.widgets.form.DynamicForm;
import com.smartgwt.client.widgets.form.ValuesManager;
import com.smartgwt.client.widgets.form.fields.TextItem;
import com.smartgwt.client.widgets.layout.VLayout;

public class BuiltInDS extends VLayout implements EntryPoint {
    private IButton recreateBtn1;

    public void onModuleLoad() {
        KeyIdentifier debugKey = new KeyIdentifier();
        debugKey.setCtrlKey(true);
        debugKey.setKeyName("D");

        Page.registerKey(debugKey, new PageKeyHandler() {
            public void execute(String keyName) {
                SC.showConsole();
            }
        });

        setWidth100();
        setHeight100();

        recreateBtn1 = new IButton("Warnings 1");
        recreateBtn1.addClickHandler(new ClickHandler() {
            @Override
            public void onClick(ClickEvent event) {
                new CustomWindow().show();
            }
        });
        addMember(recreateBtn1);
        new CustomWindow().show();
        draw();
    }

    private class CustomWindow extends Window {
        public CustomWindow() {
            setWidth(400);
            setHeight(300);
            setMembersMargin(0);
            setModalMaskOpacity(70);
            setTitle(" (" + Version.getVersion() + "/" + Version.getSCVersionNumber() + ")");
            setShowMinimizeButton(false);
            setIsModal(true);
            setShowModalMask(true);
            centerInPage();

            ValuesManager valuesManager = new ValuesManager();
            valuesManager.setDataSource(DataSource.get("animals"));
            VLayout vL = new VLayout();
            DynamicForm dF = new DynamicForm();
            TextItem scientificName = new TextItem("scientificName");
            dF.setFields(scientificName);
            valuesManager.addMember(dF);
            vL.setMembers(dF);
            addItem(vL);
            valuesManager.fetchData(new AdvancedCriteria(new Criterion("scientificName", OperatorId.EQUALS, "Myrmecophaga tridactyla")));

            Button save = new Button("Save data");
            save.addClickHandler(new ClickHandler() {
                @Override
                public void onClick(ClickEvent event) {
                    valuesManager.saveData();
                }
            });

            Button disable = new Button("Disable scientificName");
            disable.addClickHandler(new ClickHandler() {
                @Override
                public void onClick(ClickEvent event) {
                    scientificName.disable();
                }
            });

            addItem(save);
            addItem(disable);
        }
    }
}

Best,
Pavo

[Isomorphic]

The outline changes to light grey and it no longer responds to rollover and does not focus on click. This is a standard disabled appearance..

Can you be specific on what appearance you want?

Note that if you want something additional, styling can be achieved via CSS.

We also need to comment, however, it's really weird to disable a field right after a validation error has occurred. We're not sure what you're trying to show here, but indicating an error to the end user but not letting them correct it seems almost cruel :)

[pavo123]

I want exactly that light grey standard disabled appearance. In this case, this appearance is never applied.

In my real case, I have more DynamicForms that are different DataSources. But only one of them can be enabled in the same time.
If you activate one DynamicForm, the fields of all other DynamicForm should be deactivated except the "Enable" field of each of them.

If you edit DynamicForm 1) and get a validation error and decide you want to activate DynamicForm 2) anyway, the DynamicForm 1) fields should be deactivated regardless of the validation error. "Apply changes" button is only one for all DynamicForms.

[pavo123]

So my problem is that disabled form does not look like disabled form because it's not light gray if there is validation error.

[Isomorphic]

Full CSS styling for disabled FormItems with validation errors is already available in 13.0 and mostly in 12.1 - you can try it out in the 13.0 Showcase - we'll port the updates back to 12.0 and let you know when they're in.

[Isomorphic]

Note that disabled styling for FormItems in the error state has been added to 12.0 for builds dated May 9 and later.

[pavo123]

Hi Isomorphic,

thank you very much!

Best,
Pavo