useInputContainer@xds/core · 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().Best practices
| Guidance | Practices |
|---|---|
| Do | Use inside input wrapper components (XDSTextInput, XDSNumberInput, XDSTimeInput, XDSTextArea) 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
| Param | Type | Description |
|---|---|---|
optionsrequired | UseInputContainerOptions | Configuration object for the input container. |
options.containerRefrequired | RefObject<HTMLElement | null> | Ref to the outer container/wrapper element. |
options.inputRefrequired | RefObject<HTMLInputElement | HTMLTextAreaElement | HTMLElement | null> | Ref to the inner input or textarea element. |
options.disabled | boolean (default: false) | Whether the input is disabled. |
Returns
| Field | Type | Description |
|---|---|---|
| onClick | (event: MouseEvent<HTMLElement>) => void | Click handler to attach to the container wrapper. |
| onMouseUp | (event: MouseEvent<HTMLElement>) => void | Mouse up handler to attach to the container wrapper. |
Import
ts