We Keep Coding

How to use (browser)autocomplete with Vaadin 10 TextField

I try to build an reservation Form with vaadin 10 while building it i encounterd the problem, that the autocompletion we know from every form on te web doesn't work. I put in an name field the name press submit an the next time i want to re-enter the name i need to write it out again.
My code looks like that (shortend):
TextField name = new TextField();
Button save = new Button("submit");
save.addClickListener(event -> save());
name.setAutocomplete(Autocomplete.ON);
add(name);
add(save);
i had the hopes that Autocomplete.On does the magic for me but it seems not to work. Maybe the way the save methode works screw things up?
the methode is rather big i just simplify it
private void save() {
--save everything to db
--remove all fields
--replace the fields with text saying reservation done
}

found out that someone created issue https://github.com/vaadin/vaadin-text-field/issues/156
seems to be an Shadow DOM limitation
Related issues:
https://bugs.chromium.org/p/chromium/issues/detail?id=746593
https://bugs.webkit.org/show_bug.cgi?id=172567
Edit:
for auto completion for my loginForm i got it working with adding
class xyz extends Div implements PageConfigurator{
...
#Override
public void configurePage(InitialPageSettings settings) {
settings.addInlineWithContents(
InitialPageSettings.Position.PREPEND,
"window.customElements=window.customElements||{};
window.customElements.forcePolyfill=true;
window.ShadyDOM={force:true};",
InitialPageSettings.WrapMode.JAVASCRIPT);
}

I came across this issue recently with Vaadin 14 and a custom login form.
Chrome only offers auto-filling fields (and also save login details) if it can see the input tags with name attributes in the Light DOM, but Vaadin creates TextFields with all of its elements inside of a Shadow DOM hidden.
Solution is to create a reference with <input slot="input"> inside the parent <vaadin-text-field> as part of Light DOM. All the styles and everything will still be in the Shadow DOM but Chrome now can see the input fields for auto-completion.
Kotlin code:
val username = TextField().apply {
element.setAttribute("name", "username")
element.appendChild(Element("input").setAttribute("slot", "input"))
}
val password = PasswordField().apply {
element.setAttribute("name", "password")
element.appendChild(Element("input").setAttribute("slot", "input"))
}
add(username, password)

Selenium made a sendKeys for two fields instead of one for some reason

I made a pretty simple selenium test, where I want to open web page, clear field value, start entering text for this field, select first value from the hint drop down.
Web site is aviasales.com (I just found some site with a lot of controls, this is not an advertisement)
I did
DriverFactory.getDriver().findElement(By.id("flights-origin-prepop-whitelabel_en")).clear();
and it was working perfectly, I also checked via console that this is the only one object on a page like:
document.getElementById('flights-origin-prepop-whitelabel_en')
So, in next line I'm sending value:
DriverFactory.getDriver().findElement(By.id("flights-origin-prepop-whitelabel_en")).sendKeys("LAX");
but it send LAX value for both "flights-origin-prepop-whitelabel_en" and "flights-destination-prepop-whitelabel_en" for some reason, then i tried
DriverFactory.getDriver().findElement(By.id("//input[#id='flights-destination-prepop-whitelabel_en'][#placeholder='Destination']")).sendKeys(destinationAirport);
but I got the same result:
What could be a reason and how to fix this?
Thank you!

Yep... there's some weird behavior going on there. The site is copying whatever is entered into the first field into the second for reason I don't understand. I gave up trying to understand it and found a way around it.
Whenever I write code that I know I'm going to reuse, I put them into functions. Here's the script code
driver.navigate().to(url);
setOrigin("LAX");
setDestination("DFW");
...and since you are likely to use these repeatedly, the support functions.
public static void setOrigin(String origin)
{
WebElement e = driver.findElement(By.id("flights-origin-prepop-whitelabel_en"));
e.click();
e.clear();
e.sendKeys(origin);
e.sendKeys(Keys.TAB);
}
public static void setDestination(String dest)
{
WebElement e = driver.findElement(By.id("flights-destination-prepop-whitelabel_en"));
e.click();
e.clear();
e.sendKeys(dest);
e.sendKeys(Keys.TAB);
}
You can see the functions but basically I click in the field, clear the text (because usually there's something already in there), send the text, and then press to move out of the field and choose the default (first choice).

The reason of your issue is the ORIGIN and DESTINATION inputbox binded keyboard event which used to supply an autocomplete list according to your typed characters.
The binded keyborad event breaks the normal sendKeys() functionality. I met similar case in my projects and questions on StackOverFlow.
I tried input 'GSO' into DESTINATION by sendKeys('GSO'), but I get 'GGSSOO' on page after the sendKeys() complete.
To resolve your problem, we can't use sendKeys(), we have to use executeScript() to set the value by javascript in backgroud. But executeScript() won't fire keyborad event so you won't get the autocomplete list. So we need find out a way to fire keyborady event after set value by javascript.
Below code snippet worked on chrome when i tested on aviasales.com:
private void inputAirport(WebElement targetEle, String city) {
String script = "arguments[0].value = arguments[1]";
// set value by javascript in background
((JavascriptExecutor) driver).executeScript(script, targetEle, city + "6");
// wait 1s
Thread.sleep(1000);
// press backspace key to delete the last character to fire keyborad event
targetEle.sendKeys(Keys.BACK_SPACE);
// wait 2s to wait autocomplete list pop-up
Thread.sleep(2000);
// choose the first item of autocomplete list
driver.findElement(By.cssSelector("ul.mewtwo-autocomplete-list > li:nth-child(1)")).click();
}
public void inputOrigin(String city) {
WebElement target = driver.findElement(By.id("flights-origin-prepop-whitelabel_en"));
return inputAirport(target, city);
}
public void inputDestination(String city) {
WebElement target = driver.findElement(By.id("flights-origin-prepopflights-destination-prepop-whitelabel_en"));
return inputAirport(target, city);
}

Removal method works bindAutoCompletion () class TextFields library ControlsFX

I have in the text box that by choosing the combo box Binds respectively the text field with the specified data. The point is that after the first binding process, you can not remove the effect. I choose binding logins, this Binds me a text box with logins. Then I want Bind the e-mail, then I develop two lists, login and e-mail.
#FXML
public void setToSearch() {
if(comboSettingsSearch.getSelectionModel().getSelectedIndex() == 1)
TextFields.bindAutoCompletion(textSearchPerson, Database.loadLogins());
if(comboSettingsSearch.getSelectionModel().getSelectedIndex() == 5)
TextFields.bindAutoCompletion(textSearchPerson, Database.loadEmails());
}
enter image description here
Underneath logins, and on top of e-mail. Anyone know how to remove this effect?

If you do it like this,
#FXML
public void setToSearch() {
if(comboSettingsSearch.getSelectionModel().getSelectedIndex() == 1)
AutoCompletionBinding<String> acbLogin = TextFields.bindAutoCompletion(textSearchPerson, Database.loadLogins());
if(comboSettingsSearch.getSelectionModel().getSelectedIndex() == 5)
AutoCompletionBinding<String> acbEmail = TextFields.bindAutoCompletion(textSearchPerson, Database.loadEmails());
}
you can dispose the binding with
acbLogin.dispose();
acbEmail.dispose();
as far as I can tell from the HelloAutoComplete-example and the javadocs.

This is a late response to this post, however, I see that it apparently didn't work because it is not checked. It also didn't work for me but two weeks later I discovered why.
The proposed declaration and initialization above does not work if you include the type as part of the declaration. You need to remove the type from the declaration and then the .dispose() method will work.
This doesn't work:
AutoCompletionBinding<String> acbLogin = TextFields.bindAutoCompletion(textSearchPerson, Database.loadLogins());
This does:
AutoCompletionBinding acbLogin = TextFields.bindAutoCompletion(textSearchPerson, Database.loadLogins());

AutoCompletionBinding acb = TextFields.bindAutoCompletion(txtfield,arraylistobj);
acb=null;

Wicket DropDownChoice NOT working correctly with PropertyModels

I have been trying to debug why my DropDownChoice in a simple form with just the DropDown and a Submit Button hasn't been working correctly for hours now.
It has a very weird behaviour. Where the first value selected in the drop down choice is sent successfully to the server after which any other choice select is not updated by the model. ie if I have a List persons, and I select the 2nd person, it submits this successfully. However, on select of another person and trying to submit it again it keeps showing the first selected option.
Snippets of code here:
ChoiceRenderer<Empowerment> empowermentChoiceRenderer = new ChoiceRenderer<>("name", "id");
final DropDownChoice<Empowerment> empowermentDropDownChoice =
new DropDownChoice<>("empowerment", new PropertyModel<Empowerment>(this, "empowerment"), empowermentList, empowermentChoiceRenderer);
empowermentDropDownChoice.setRequired(true);
add(empowermentDropDownChoice);
Only way I am able to get a decent behaviour is if I set the empowerment variable above to null. In this case, on submit the empowerment is reinitialised to null and then a new submit works correctly.
empowerment is just a JPA entity.
I'll be glad to know if this is a known issue. I experienced it in wicket 6.9.1 and wicket 6.12

Finally, found the solution to the problem. Above code is correct, but problem lied in the entity class itself - Empowerment needs to implement Equals and Hashcode correctly.
The DropDownChoice works just fine after this.

Add an OnChangeAjaxBehavior to your DropDownChoice. This will update the model value on every selection change you make on the drop down:
empowermentDropDownChoice .add(new OnChangeAjaxBehavior() {
#Override
protected void onUpdate(AjaxRequestTarget art) {
//just model update
}
});

Vaadin Checkbox -- Add a newline on caption

I am trying to set the caption of a checkbox and i want to break at a certain point in the string to create a new line without waiting for the word wrap:
When i added the simple \n character to caption string it did not work.
private CheckBox completeCheckbox;
completeCheckbox.setCaption("why wont this\n break");

I just had the same problem and the simple solution for this was to call "setCaptionAsHtml(true)" on the CheckBox instance and to set the caption using HTML code.
private CheckBox completeCheckbox = createMyCheckboxSomehowFunction();
completeCheckbox.setCaptionAsHtml(true);
completeCheckbox.setCaption("why wont this<br/>break");
The above code snippet should do what you want. At least it worked fine for me.

i think the solution is to use an Option Group
I just read that here