1

I'm using a vaadin TextField on mobile and want to change the input elements 'type' attribute to 'search' so that on mobile the search button shows up on the on screen keyboard.

The input field is in the shadow dom of the vaadin-text-field element:

<vaadin-text-field class="search" type="search" autocapitalize="none" placeholder="Search packages" style="width: 70%;">
   <vaadin-button class="search-field-button" theme="icon primary" slot="prefix" tabindex="0" role="button">
     <vaadin-icon class="search-field-icon" icon="vaadin:search" slot="prefix">
     </vaadin-icon>
   </vaadin-button>
   <input slot="input" type="text" id="vaadin-text-field-0" placeholder="Search packages">
   <label slot="label" id="label-vaadin-text-field-0" for="vaadin-text-field-0">
   </label>
   <div slot="error-message" id="error-message-vaadin-text-field-0" hidden="">
   </div>
</vaadin-text-field>

Ideally, I want to set this from the java side.

There is a method on the TextField getElement().getShadowRoot() but this comes up empty.

I'm guessing I need some way to access the slot for the input field.

How do I do this?

Brett Sutton
  • 3,900
  • 2
  • 28
  • 53

1 Answers1

1

There is no Java API for this, but you can do it with JavaScript call from Java side.

textField.getElement().executeJs("this.inputElement.setAttribute('type','search');");
Tatu Lund
  • 9,949
  • 1
  • 12
  • 26