How to set input type search to a Vaadin text field

Is there a possibility to set the type of a search field e.g. like
searchField.getElement().setProperty(“type”, “search”);

or do I have to use a HTML element directly?

Thanks and Best Regards

If your intention is to just set the clear button visible use this instead


@yummy-rhino No the problem is that the text field behaves weirdly on the mobile version of the app (android). We only have a key listener (enter) to start the search with this normal text field but instead of performing the search request the focus changes to the next input element. The idea is now to mark the text field as search field that the search button within the display keyboard becomes accessible.

As far as I know, type is an attribute and not a property - so using setAttribute should work.

Yes that seems to work but the Attribute is applied to the vaadin-text-field and not to the input. I have to check out if this will work.

so using setAttribute should work.
Yes, for input element.


Just noting that it will add clear button in the native input element, which is different looking to ours. And noting if you also use textField.setClearButtonVisible(true);, you will have two clear crosses there

OK thanks.

I’m also curious why you’d need to set type="search". I’m not aware that that would do anything special, except maybe change the default styling in some browsers.