Documentation Index
Fetch the complete documentation index at: https://mintlify.com/parttio/dramafinder/llms.txt
Use this file to discover all available pages before exploring further.
Overview
FocusableElement provides methods for managing keyboard focus on Vaadin components. It allows you to programmatically focus and blur elements, retrieve tab index values, and assert focus state in tests.
Interface Location: org.vaadin.addons.dramafinder.element.shared.FocusableElement
Methods
getFocusLocator()
default Locator getFocusLocator()
Locator - The locator to receive focus operations
focus()
Programmatically sets keyboard focus to the component.
blur()
Programmatically removes keyboard focus from the component.
getTabIndex()
default String getTabIndex()
tabIndex attribute.
Returns: String - The tab index value, or null if not set
assertIsFocused()
default void assertIsFocused()
AssertionError if the component is not focused
assertIsNotFocused()
default void assertIsNotFocused()
AssertionError if the component is focused
Implementing Classes
The following element classes implement FocusableElement:
ButtonElementCheckboxElementRadioButtonElementTextFieldElement (and all subclasses)ComboBoxElementMultiSelectComboBoxElementSelectElementMessageInputElementGridElementVirtualListElementAvatarElement
Usage Example
import org.vaadin.addons.dramafinder.element.TextFieldElement;
import org.vaadin.addons.dramafinder.element.ButtonElement;
import com.microsoft.playwright.Page;
public class FocusTest {
void testFocusBehavior(Page page) {
TextFieldElement username = TextFieldElement.getByLabel(page, "Username");
TextFieldElement password = TextFieldElement.getByLabel(page, "Password");
// Focus first field
username.focus();
username.assertIsFocused();
password.assertIsNotFocused();
// Type and move to next field
username.setValue("admin");
password.focus();
// Verify focus moved
username.assertIsNotFocused();
password.assertIsFocused();
// Blur to trigger validation
password.setValue("wrong");
password.blur();
password.assertIsNotFocused();
}
}
Implementation Details
Locator Delegation Pattern
Many components override getFocusLocator() to delegate focus operations to an internal element. For example, text fields delegate to their input element:
@Override
public Locator getFocusLocator() {
return getInputLocator(); // Focus the input, not the wrapper
}
Tab Index Management
The getTabIndex() method retrieves the tabIndex attribute, which controls the tab order of focusable elements:
0 - Natural tab order (default for interactive elements)- Positive number - Custom tab order (lower numbers are focused first)
-1 - Programmatically focusable but not in tab order
Testing Patterns
// Test keyboard navigation through form fields
TextFieldElement field1 = TextFieldElement.getByLabel(page, "First Name");
TextFieldElement field2 = TextFieldElement.getByLabel(page, "Last Name");
field1.focus();
field1.assertIsFocused();
// Simulate Tab key press
page.keyboard().press("Tab");
field2.assertIsFocused();
Validation on Blur
// Many Vaadin components validate when focus is lost
TextFieldElement email = TextFieldElement.getByLabel(page, "Email");
email.focus();
email.setValue("invalid-email");
email.blur();
// Validation triggers on blur
email.assertInvalid();
email.assertErrorMessage("Please enter a valid email address");
Focus After Dialog Open
// Open dialog and verify focus moves to it
ButtonElement openDialog = ButtonElement.getByText(page, "Open Dialog");
openDialog.click();
TextFieldElement dialogField = TextFieldElement.getByLabel(page, "Name");
dialogField.assertIsFocused();
Testing Autofocus
// Verify autofocus attribute behavior
page.navigate("http://localhost:8080/form");
TextFieldElement firstField = TextFieldElement.getByLabel(page, "Search");
firstField.assertIsFocused();
Best Practices
Use blur() to Trigger Validation
Many Vaadin components perform validation when focus is lost. Always call blur() after setting a value if you want to test validation:
field.setValue("test");
field.blur(); // Triggers validation
field.assertInvalid();
Check Focus State Before Interaction
Before performing keyboard input, ensure the element has focus:
field.focus();
field.assertIsFocused();
page.keyboard().type("text");
Test Tab Order
Verify that users can navigate through your form using the Tab key in the expected order:
field1.focus();
page.keyboard().press("Tab");
field2.assertIsFocused();
page.keyboard().press("Tab");
field3.assertIsFocused();