useInputContainer · astryx-svelte

useInputContainer @astryx-svelte/core v0.3.0 · hooks

Usage

Makes an input container wrapper clickable, delegating focus to the inner input/textarea when the user clicks non-interactive areas (icons, padding, status indicators). Built on top of useClickableContainer, so nested interactive elements (clear buttons, calendar toggles, links) are handled safely; clicking them does NOT steal focus from the input. Automatically detects input type: text-like inputs receive .focus(), while other types (checkbox, radio, file) receive .click().

ts
 
import { hooks } from '@astryx-svelte/core/hooks';

Best practices

Guidance	Practices
Do	Use inside input wrapper components (TextInput, NumberInput, TimeInput, TextArea) to make the full container area clickable.
Do	Attach both onClick and onMouseUp to the wrapper div for full interaction handling.
Don't	Use on bare inputs without a wrapper; there is no benefit if the input already fills the full clickable area.

Parameters

Parameter	Type	Default	Description
`options` Required	`() => UseInputContainerOptions`	—	Configuration object for the input container.
`options.container` Required upstream: `options.containerRef`	`HTMLElement \| null`	—	Ref to the outer container/wrapper element.
`options.input` Required upstream: `options.inputRef`	`HTMLInputElement \| HTMLTextAreaElement \| HTMLElement \| null`	—	Ref to the inner input or textarea element.
`options.disabled`	`boolean`	`false`	Whether the input is disabled.

Returns

Field	Type	Default	Description
`onclick` upstream: `onClick`	`(event: MouseEvent) => void`	—	Click handler to attach to the container wrapper.
`onmouseup` upstream: `onMouseUp`	`(event: MouseEvent) => void`	—	Mouse up handler to attach to the container wrapper.