useInputContainer
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().
Signature
useInputContainer({ containerRef, inputRef, disabled = false, }: UseInputContainerOptions)| Name | Type and behavior |
|---|---|
options | UseInputContainerOptions · requiredConfiguration object for the input container. |
options.containerRef | RefObject<HTMLElement | null> · requiredRef to the outer container/wrapper element. |
options.inputRef | RefObject<HTMLInputElement | HTMLTextAreaElement | HTMLElement | null> · requiredRef to the inner input or textarea element. |
options.disabled | boolean · optional · default falseWhether the input is disabled. |
| Name | Type and behavior |
|---|---|
onClick | (event: MouseEvent<HTMLElement>) => voidClick handler to attach to the container wrapper. |
onMouseUp | (event: MouseEvent<HTMLElement>) => voidMouse up handler to attach to the container wrapper. |
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().
- Use inside input wrapper components (TextInput, NumberInput, TimeInput, TextArea) to make the full container area clickable.
- Attach both onClick and onMouseUp to the wrapper div for full interaction handling.
- Use on bare inputs without a wrapper; there is no benefit if the input already fills the full clickable area.