TextField fails with German Umlauts in Firefox

Hello,

I have a simple textfield.
When I enter German umlauts in Firefox (ö, ü, ä) the TextField does not process the characters.
Hence it remains empty.
BUT when I enter those characters in capital case (Ö,Ü,Ä) they will be processed and displayed normally.
When I copy a text with umlauts they will be displayed correctly.
Thats really strange.
In Chrome everything works perfectly.

I updated to the latest VAADIN version (7.3.5)

Hi,

I’m not quite sure what is happening there. What do you mean by “processing”? Do the letters show when you type them or does the problem occur when the TextField value is written to some data source?

Vaadin normally encodes characters with UTF-8, but something could perhaps interfere with that. Something could also set wrong encoding for the page in which the UI is running. If the problem is with a back-end, such as if you write the input to a database, the database should have UTF-8 enabled.

Hey,

by processing I mean that the letters are displayed in the textfield.

I dont write to any data source. After the user clicks on a submit button I grab the text and work with it.
There is a simple textfield where I enter some text. But when I enter an Umlaut the character is not displayed in the textfield.
Lets say I type in the word “Glühbirne”. The textfield only shows “Glhbirne”. Hence the “ü” is not recognized/processed?

This happens only with Firefox and with the lower case umlauts (ö, ü, ä).
Everything works fine in Chrome.

This might be a problem with your browser or with the way you create the Textfield. Could you test if it works for you in this Textfield:
http://demo.vaadin.com/sampler/#ui/data-input/text-input/text-field

I didn’t have the problem anywhere. The textfield is a real HTML textfield so it works very native. At least the direct input must be correct.

Tested it with Firefox 33.1

Ok its working with the sample text field. So this cant be a problem with my browser.
Im using as well FF 33.1

This is the way I create the text field:

HorizontalLayout layout = new HorizontalLayout();
        layout.setSizeFull();
        layout.addComponent(getQueryTextField());
...

private TextField getQueryTextField() { if (queryTextField == null) { queryTextField = new TextField(); queryTextField.setInputPrompt(i18n.getString("search_query_text_caption") + ":"); queryTextField.setSizeFull(); queryTextField.setHeight("60px"); queryTextField.setImmediate(true); queryTextField.addTextChangeListener(e -> { System.out.println("> " + e.getText()); }); } return queryTextField; } I set the encoding of all my files to UTF-8.
VAADIN uses UTF-8 as default for transferring data. What else can I do?

The system output works correctly when I type in a text. But as I told you… when I enter lower case umlauts
no event is fired. The text just remains the same. Neither the native input element in the browser displays the umlauts nor java fires any event… The system behaves like I didnt enter anything…

Ok, if the letters don’t show up when you type them, I’d guess that it’s either a font problem or more likely a strange encoding problem in the page in which the UI is running.

Can you check the encoding in the page, in View → Character Encoding in Firefox? If it’s other than Unicode, it could mean trouble. To see if it’s a font problem, you could use Firebug, inspect the TextField’s element, and select “Computed” to see the styles. If the font-family or something else is strange, it could be the problem.

I checked everything. Unicode is set and I use the normal font… as you can see on the picture…

I guess … every time I enter a character in a certain time interval in the text field,
a “notification” is sent to the server. The server updates its internal state then, and forwards it to the client and the input field is updated.
The problem is that the server never fires the “TextChangeEvent”. If it would be a Font or Encoding problem only,
the server should at least update its internal state. So there might be an error while the server processes the input?
The event is not fired (or I dont know whats really happening in the background) hence neither the internal nor the external (browser) state is updated.

17315.png

Nobody? :frowning:

Sorry for the delay.

I tried your code and it works just fine for me with Firefox (33.0), although my Vaadin version is different (7.3-SNAPSHOT). But, I don’t believe that the problem is with Vaadin as such, as this would be a rather obvious problem. You must have some layer which has trouble handling UTF-8 – browser, page, server, servlet, or something else. Well, you mentioned that it works with Chrome, so the problem could be in the browser, such like it announces its capabilities wrong or something. Another place where browsers differ is that the widget set is compiled separately for Chrome and Firefox, so I hope there’s not any problem with that. Or, there’s something in your application that is causing the problem.

Can you reproduce the problem in a minimal application?

Okay I made some tests and found the cause…

I have a HorizontalLayout with a TextField and a Button.
There should be a handler. When the textfield is focused and the user clicks “enter/return”
should be excuted/clicked.

This was my old code: (I changed getQueryTextField() to textField to make the code better readable).

private static Action[] actions;
private static Action searchKeyAction;

static {
   searchKeyAction = new Action("Enter start search");
   actions = new Action[] {
        searchKeyAction
   };
}

....
HorizontalLayout layout = new HorizontalLayout();
layout.setSizeFull();
layout.addComponent(textField);
layout.addComponent(button);


Panel rootSearch = new Panel();
rootSearch.setContent(layout);
rootSearch.addActionHandler(new Handler() {

            private static final long serialVersionUID = 6098850282220269082L;


            @Override
            public Action[] getActions(Object target, Object sender) {
                return actions;
            }


            @Override
            public void handleAction(Action action, Object sender, Object target) {
                if (action == searchKeyAction && target == textField) {
                }
            }
        });
.....

I think its a good idea to make the actions static…

When I
remove
the actionHandler from the panel everything works fine. I can enter all characters.
I dont need to remove the whole handler at all, it would be enough if getActions returns null (instead of action).

At first I thought theres a problem with the static fields. Hence I removed the static keyword from
actions and searchKeyAction… but it does not work either.

My temporary solution was to use a clickShortcut ( button.setClickShortcut(KeyCode.ENTER); )
but I dont want to have a global shortcut for the window.

Now… I found a solution… finally :o)

My code looks like this now:

private Action searchKeyAction = new ShortcutAction("Default key", ShortcutAction.KeyCode.ENTER, null);
....

rootSearch.addActionHandler(new Handler() {

            private static final long serialVersionUID = 6098850282220269082L;


            @Override
            public Action[] getActions(Object target, Object sender) {
                return new Action[] {
                    searchKeyAction
                };
            }


            @Override
            public void handleAction(Action action, Object sender, Object target) {
                if (action == searchKeyAction && target == textField) {
                    //
                }
            }
        });

I should have read the vaadin book carefully… Now everything works fine and I removed the global shortcut.

I wonder why the other solution blocks lowercase umlauts… is it an internal VAADIN bug?
The code was wrong I know, but all characters showed up in the textfield except the lowercase umlauts.
Thats really strange.

Thanks for your help!

Thank you for this solution. Really weird, haha!