focusNext

focusNext(list?) moves focus to the next tabbable element after the currently active one, skipping disabled elements and wrapping back to the start when it reaches the end. Called with no arguments it scans the whole document; pass an explicit array to scope the cycle to a subset. To step backward use focusPrevious. Part of pota/use/focus.

Arguments

Argument	Type	Description
list	HTMLElement[]	Optional ordered set of candidates. Defaults to every tabbable element in the document, in DOM order.

The default candidate set is input (non-hidden), button, select, textarea, a, [tabindex], and [contenteditable] elements.

Examples

Advance focus on a key

A document-wide "next field" action wired to a button, mirroring the browser's Tab with wrap-around.

import { render } from 'pota'
import { focusNext, focusPrevious } from 'pota/use/focus'

function App() {
	return (
		<form>
			<input placeholder="one" />
			<input placeholder="two" />
			<input placeholder="three" />
			<button
				type="button"
				on:click={() => focusPrevious()}
			>
				prev
			</button>
			<button
				type="button"
				on:click={() => focusNext()}
			>
				next
			</button>
		</form>
	)
}

render(App)