Function Input

components/dash-core-components/src/components/Input.tsx:61–325

* A basic HTML input control for entering text, numbers, or passwords. * * Note that checkbox and radio types are supported through * the Checklist and RadioItems component. Dates, times, and file uploads * are also supported through separate components.

({
    type = HTMLInputTypes.text,
    inputMode = 'verbatim',
    n_blur = 0,
    // eslint-disable-next-line @typescript-eslint/no-unused-vars
    n_blur_timestamp = -1,
    n_submit = 0,
    // eslint-disable-next-line @typescript-eslint/no-unused-vars
    n_submit_timestamp = -1,
    debounce = false,
    step = 'any',
    autoComplete = 'off',
    // eslint-disable-next-line @typescript-eslint/no-unused-vars
    persisted_props = [PersistedProps.value],
    // eslint-disable-next-line @typescript-eslint/no-unused-vars
    persistence_type = PersistenceTypes.local,
    disabled,
    ...props
}: InputProps)

 * are also supported through separate components.
 */
function Input({
    type = HTMLInputTypes.text,
    inputMode = 'verbatim',
    n_blur = 0,
    // eslint-disable-next-line @typescript-eslint/no-unused-vars
    n_blur_timestamp = -1,
    n_submit = 0,
    // eslint-disable-next-line @typescript-eslint/no-unused-vars
    n_submit_timestamp = -1,
    debounce = false,
    step = 'any',
    autoComplete = 'off',
    // eslint-disable-next-line @typescript-eslint/no-unused-vars
    persisted_props = [PersistedProps.value],
    // eslint-disable-next-line @typescript-eslint/no-unused-vars
    persistence_type = PersistenceTypes.local,
    disabled,
    ...props
}: InputProps) {
    const input = useRef(document.createElement('input'));
    const [value, setValue] = useState<InputProps['value']>(props.value);
    const [pendingEvent, setPendingEvent] = useState<number>();
    const inputId = useState(() => uniqid('input-'))[0];

    const valprops = type === HTMLInputTypes.number ? {} : {value: value ?? ''};
    let {className} = props;
    className = 'dash-input' + (className ? ` ${className}` : '');

    const setPropValue = useCallback(
        (base: InputProps['value'], value: InputProps['value']) => {
            const {setProps} = props;
            base = convert(base);
            value = input.current.checkValidity() ? convert(value) : NaN;

            if (!isEquivalent(base, value)) {
                setProps({value});
            }
        },
        [props.setProps]
    );

    const onEvent = () => {
        const {value: inputValue} = input.current;
        const valueAsNumber = convert(inputValue);
        if (type === HTMLInputTypes.number) {
            setPropValue(props.value, valueAsNumber ?? value);
        } else {
            const propValue =
                inputValue === '' && props.value === undefined
                    ? undefined
                    : inputValue;
            props.setProps({value: propValue});
        }
        setPendingEvent(undefined);
    };

    const onBlur = useCallback(() => {
        props.setProps({