Focus Trapping

RVS implements automatic focus trapping when it is active. The focus is trapped by default to the bound inputs with vs.bindInput() method and the search results component. This ensures that focus cannot disappear behind the modal and it easy to jump from the search input to the search results using the tab key.

Disabling the Trap

Sometimes the trap can get in your way when you want to manually manage the the focus. The trapping feature can be disabled by passing focusTrap: false to the ValuSearch constructor:

const vs = new ValuSearch({
    focusTrap: false,
});

Focusing Custom Elements

If you have elements on the page, for example a close button in the header, you want to be focusable when RVS is active you must add valu-search-focus-trap class to it to ensure it stays focusable. The class can be added directly to the focusable element or to any parent element.

<button class="valu-search-focus-trap" type="button">╳</button>

Custom elements added via the Slot Overrides are already inside the focus trap so there's no need to add this to those.

Multiple ValuSearch instances

The valu-search-focus-trap class cannot be used when you are using multiple RSV instances. Read the documentation here about using multiple RVS instances.

TODO: Add the link