Lost Focus with Chrome / Linux

[andyx1975]

Hi,

I guess I found a bug which only appears with Chrome in combination with an Linux OS. Linux and Firefox is working great as well as Windows and Chrome. When you use Chrome + Linux you are constantly loosing the item focus on various spots. For example check the code on the bottom. When I click on the "MiniDateRangeItem" item in my form. The "DateRange Pop Up"... then I start entering "01.01.2" then it looses the focus. This happens exactly when on right side the info text "(01.01.2002)" appears (besides the calendar Icon). Some weeks ago this was working very well. But since a couple of weeks it constantly appears.

P.S.: This MiniDateRange field is just an example. This problem appears on various other spots and Dynamic Forms. Seems that the focus always went lost when another process is triggered after drawing (e.g. set form fields disabled).

Thanks
Andy

See the Screenshot:



Not Working combination:
Used SmartGWT: https://www.smartclient.com/builds/S...GPL/2017-11-08
Browser: Chrome 62
OS: LInux Mint 18.2

Code example:

import java.util.LinkedHashMap;

import com.smartgwt.client.types.Overflow;
import com.smartgwt.client.types.TitleOrientation;
import com.smartgwt.client.util.SC;
import com.smartgwt.client.widgets.Window;
import com.smartgwt.client.widgets.form.DynamicForm;
import com.smartgwt.client.widgets.form.fields.ButtonItem;
import com.smartgwt.client.widgets.form.fields.MiniDateRangeItem;
import com.smartgwt.client.widgets.form.fields.RowSpacerItem;
import com.smartgwt.client.widgets.form.fields.SelectItem;
import com.smartgwt.client.widgets.form.fields.TextItem;
import com.smartgwt.client.widgets.layout.VLayout;

public class GTestForm
{

    public GTestForm()
    {
        initGui();
    }

    private void initGui()
    {
        VLayout layout = new VLayout();
        layout.setSize( "100%", "100%" );
        layout.setMembers( getEditorForm() );
        layout.setOverflow( Overflow.HIDDEN );

        Window window = new Window();
        window.setOverflow( Overflow.HIDDEN );
        window.setSize( "50%", "50%" );
        window.setCanDragResize( true );
        window.setShowMaximizeButton( true );
        window.setShowMinimizeButton( true );
        window.setShowCloseButton( false );
        window.setAnimateMinimize( true );
        window.setShowCloseButton( true );
        window.setModalMaskOpacity( 25 );
        window.setIsModal( true );
        window.setShowModalMask( true );
        window.centerInPage();
        window.addItem( layout );

        window.draw();

    }

    private DynamicForm getEditorForm()
    {

        TextItem txtItem = new TextItem( "Text" );
        txtItem.setWidth( 200 );
        txtItem.setTitle( "Test" );

        MiniDateRangeItem miniDateRangeItem = new MiniDateRangeItem( "mdri" );
        miniDateRangeItem.setWidth( 200 );
        miniDateRangeItem.setTitle( "Date" );

        final SelectItem comboTest = new SelectItem( "Test" );
        comboTest.setEmptyDisplayValue( "All" );
        comboTest.setRequired( true );
        comboTest.setAllowEmptyValue( true );
        comboTest.setTitleOrientation( TitleOrientation.TOP );
        comboTest.setTitle( "Test" );
        comboTest.setWidth( 200 );
        comboTest.addClickHandler( new com.smartgwt.client.widgets.form.fields.events.ClickHandler()
        {

            @Override
            public void onClick( com.smartgwt.client.widgets.form.fields.events.ClickEvent event )
            {
                LinkedHashMap<String, String> items = new LinkedHashMap<String, String>();
                items.put( "1", "Value1" );
                items.put( "2", "Value2" );
                items.put( "3", "Value3" );

                comboTest.setValueMap( items );

                SC.say( "ValueMapSize: " + items.size() );
            }
        } );

        LinkedHashMap<String, String> initialItems = new LinkedHashMap<String, String>();
        initialItems.put( "1", "initialValue100" );
        initialItems.put( "2", "initialValue200" );
        initialItems.put( "3", "initialValue300" );

        final SelectItem comboTest2 = new SelectItem( "Test2" );
        comboTest2.setEmptyDisplayValue( "All" );
        comboTest2.setRequired( true );
        comboTest2.setAllowEmptyValue( true );
        comboTest2.setTitleOrientation( TitleOrientation.TOP );
        comboTest2.setTitle( "Test" );
        comboTest2.setWidth( 200 );
        comboTest2.setValueMap( initialItems );
        comboTest2.setDefaultToFirstOption( true );
        comboTest2.addClickHandler( new com.smartgwt.client.widgets.form.fields.events.ClickHandler()
        {

            @Override
            public void onClick( com.smartgwt.client.widgets.form.fields.events.ClickEvent event )
            {
                LinkedHashMap<String, String> items = new LinkedHashMap<String, String>();
                items.put( "1", "Value1" );
                items.put( "2", "Value2" );
                items.put( "3", "Value3" );

                comboTest2.setValueMap( items );
            }
        } );

        ButtonItem buttonConsole = new ButtonItem();
        buttonConsole.setTitle( "Dev. Console" );
        buttonConsole.setWidth( 125 );
        buttonConsole.setHeight( 25 );
        buttonConsole.addClickHandler( new com.smartgwt.client.widgets.form.fields.events.ClickHandler()
        {

            @Override
            public void onClick( com.smartgwt.client.widgets.form.fields.events.ClickEvent event )
            {
                SC.showConsole();
            }
        } );

        DynamicForm editorForm = new DynamicForm();
        editorForm.setAutoFocus( true );
        editorForm.setWidth100();
        editorForm.setMargin( 25 );
        editorForm.setFields( miniDateRangeItem, new RowSpacerItem(), txtItem, new RowSpacerItem(), comboTest,
                              new RowSpacerItem(), comboTest2, new RowSpacerItem(), new RowSpacerItem(),
                              buttonConsole );

        editorForm.editNewRecord();

        return editorForm;
    }

}

[Isomorphic]

We have no one else reporting this and there are lots of Chrome / Linux users out there.

First, try turning off any browser extensions that you may have installed. Then, let us know if you can reproduce this on at least one other machine, and we'll take a look.

[andyx1975]

Hey,

i already tried those things. As mentioned... on chrome and windows... it does not appear. This just happens with linux clients and Chrome or Opera.

Best wishes
Andy

[opty]

Hey Andy,

It may be related to chrome password manager interfering with your text fields (it is more and more aggressive on latest chrome version), if you have the key in your URL bar, then remove the password registered for your page, then reload your page (and don't save password again)
Please see https://www.smartclient.com/smartcli...m.autoComplete for more information

Greetings,
Stéphane.

[andyx1975]

Hey Opty,

thanks for submitting this one! You are right! It is related to the chrome passwort manager! Under Windows I did not used the password manager

Thanks! So I will need to find a workaround to get both things working together! Thanks that really helped a lot.

best wishes
Andy

[Isomorphic]

Thanks Opty!

Andy, next time, please do not tell us that you have already tried disabling extensions, when you have not actually tried disabling extensions.

[andyx1975]

Thanks for helping! But I really did disabled the extensions. You already mentioned this in other postings. So I often try to disbale then when I have problems. I did not reallize that you see the password manager as an extension. So I am sorry. Thanks!

[opty]

Dear Isomorphic, unless you believed that we were talking about a third party extension, the internal chrome password manager is not an extension, it's here and not in the extension list, but indeed you can disable it... as you can play with all chrome://flags until you to get SmartClient perfectly working, but that's not very user friendly! Furthermore this feature is activated by default on a fresh chrome/chromium install. So to me Andy didn't told you bulls..t , and that's even why I found the right answer to the problem

[Isomorphic]

Yes, we thought you were talking about a third-party extension, specifically a third-party password manager for Chrome.

Can someone confirm: this happens only if you have actually saved a password on the specific URL where you are later interacting with SmartGWT controls?

Does setting autoComplete to false help? It's possible to set it even on DateRangeItem via the AutoChild system.

[andyx1975]

I never used a third party password manager. I used the standard password manager of chrome which is not a classic extension.

So I can confirm the following:

1. When I have a password stored in chrome for my application... the DateRangeItem does always loose the focus
2. When I have a password stored in Chrome and I turn off autocomplete under chrome://settings/autofill... I also loose the focus in DateRangeItems
2. When I delete my stored passwort in the chrome settings under "Settings - advanced - manage passwords"... I never loose the focus on the DateRangeItem

By the way the dateRangeItem is just an example... this happens on other spots too like the DynamicFrom when I use "setAutoFocus(true)". Here I also loos the focus.

best wishes
Andy

[opty]

I confirm what Andy found, I also confirm that setting autoComplete to false didn't help (but what browser is really taking care of this attribute?), tried on DynamicForm and on each FormItem without success... This problem is also defeating record editing in ListGrid, specially in modalEdit mode, so that it's impossible to start to edit any record without making some dirty tricks (like filtering outside_click events)!
To my mind this problem happens only on latest releases of chrome/chromium 62, maybe 61, this still happen on canary (64.0), the password manager behavior was not so intrusive before

Greetings

[andyx1975]

I can also confirm, that this used to work. But I also can not really name a Chrome version!

[Blama]

Hi all,

I have the same issue (minor for me) in my user administration.
Generally speaking: Isomorphic suggests that Login pages are pure HTML. SmartGWT PasswordItems afterwards are usually then for User administration, not Login purposes, so the GC password manager is most of the time more a annoyance than a helper.
I noticed that SmartGWT writes the PasswordItems as <input type"password"....
Perhaps a possible improvement to PasswordItem is that setting PasswordItem.setAutoComplete(false) (which by the way already mentions the Password-Manager problem) on a PasswordItem uses <input type"text", so that it hopefully does not trigger the Google Chrome Password Manager mechanism. Char -> "*" conversion must then be done by some changeHandler added by default.

Another note: I show a SC.say() when entering the PW field the 1st time. Afterwards the PW manager is not shown.

                        alreadySaid = false;
                        password1PI.addEditorEnterHandler(new EditorEnterHandler() {
                            @Override
                            public void onEditorEnter(EditorEnterEvent event) {
                                if (!alreadySaid) {
                                    SC.say(i18n.addEditUserChangePwdWarning());
                                    alreadySaid = true;
                                }
                            }
                        });

For the 2nd entering of the field, it is shown. I don't know what the internal reason here for Chrome is to stay silent (some focus-lost issue?)), but perhaps this does help some user or Isomorphic to develop a way to circumvent it when not wanted.

Best regards
Blama

[Isomorphic]

We see this Chrome bug which likely has the same underlying cause, or at least, if resolved might give us a way to work around this. You could "star" this to try to get more attention for it. Or perhaps someone sees a more specific bug.

As Blama pointed out, our advice is to have a separate plain HTML login screen.

For existing applications that can't be quickly changed to follow best practices, a (somewhat painful) workaround would be to move the application to a new URL and use a redirect, and set autoComplete=false on PasswordItems to avoid users storing passwords associated with the new URL.

For completeness: we don't think it's a good idea to make a fake password field in order to work around a Chrome bug that will hopefully be resolved soon. This fake password field would also have accessibility issues.

[andyx1975]

So PasswordItem.setAutoComplete(false) seems not to work in my case. Anyway... I guess it will end to the face that I need to implement an HTML Page anyways! Thanks Guys!