ui/src/fields/number/input.js - master - githubmirror/pocketbase

ui/src/fields/number/input.js

53 строки2 KB

Gani Georgiev

prevent resetting number inputs with leading 0 while still typing

17 июл 2026, 22:00

17 июл 2026, 22:0009af56b

// {
//     collection: undefined,
//     originalRecord: undefined,
//     record: undefined,
//     field: undefined,
// }
export function input(props) {
    const uniqueId = "number_" + app.utils.randomString();

    return t.div(
        { className: "record-field-input field-type-number" },
        t.div(
            { className: "field" },
            t.label(
                { htmlFor: uniqueId },
                t.i({ className: app.fieldTypes.number.icon, ariaHidden: true }),
                t.span({ className: "txt" }, () => props.field.name),
            ),
            t.input({
                type: "number",
                id: uniqueId,
                step: "any",
                name: () => props.field.name,
                required: () => props.field.required,
                min: () => props.field.min,
                max: () => props.field.max,
                value: () => props.record[props.field.name] || 0,
                oninput: (e) => {
                    // temp skip invalid numbers with leading 0 while typing to avoid reseting the entire input
                    // (always normalized in onchange)
                    if (
                        e.target.value?.length > 1
                        && e.target.value[0] == "0"
                        && e.target.value[1] != "."
                    ) {
                        return;
                    }

                    props.record[props.field.name] = Number(e.target.value);
                },
                onchange: (e) => {
                    props.record[props.field.name] = null; // reset reactivity
                    props.record[props.field.name] = Number(e.target.value);
                },
            }),
        ),
        () => {
            if (props.field.help) {
                return t.div({ className: "field-help" }, props.field.help);
            }
        },
    );
}