bug: Input Number with Step 0.1

[areski]

What version of FlyonUI are you using?

V2.4.1

Which browsers are you seeing the problem on?

All browsers

Describe your issue

It's actually not working well if the increment is 0.1, that cause some rounding issues:

code:

<div class="input max-w-sm" data-input-number='{ "step": 0.1 }'>
      <input type="text" value="0" aria-label="Step control" data-input-number-input />
      <span class="my-auto flex gap-3">
        <button type="button" class="btn btn-primary btn-soft size-5.5 min-h-0 rounded-sm p-0" aria-label="Decrement button" data-input-number-decrement >
          <span class="icon-[tabler--minus] size-3.5 shrink-0"></span>
        </button>
        <button type="button" class="btn btn-primary btn-soft size-5.5 min-h-0 rounded-sm p-0" aria-label="Increment button" data-input-number-increment >
          <span class="icon-[tabler--plus] size-3.5 shrink-0"></span>
        </button>
      </span>
  </div>

Current result:

Clicking plus:

Related: #85

[github-actions]

Hi @areski

Thank you for your support in helping us improve FlyonUI!

We’ve received your submission and will respond within few business days. Our team handles issues one at a time, and we’ll be reviewing yours as soon as possible.

In the meantime, any additional details or a reproducible example would be greatly appreciated and will help us resolve the issue more efficiently.

Thank you for your patience and understanding!

[areski]

Patch for those facing the same issue.

/**
 * Extended HSInputNumber to fix floating-point precision issues
 *
 * This fixes the issue where incrementing by 0.1 causes values like 8.299999999
 * by properly rounding the result based on the number of decimal places in the step.
 */

console.log('Loading HSInputNumber extension...');

// Wait for HSInputNumber to be available
function patchHSInputNumber() {
    if (!window.HSInputNumber) {
        console.log('HSInputNumber not yet available, waiting...');
        setTimeout(patchHSInputNumber, 50);
        return;
    }

    console.log('HSInputNumber found, patching...');

    const OriginalHSInputNumber = window.HSInputNumber;

    // Store the original changeValue method
    const originalChangeValue = OriginalHSInputNumber.prototype.changeValue;

    /**
     * Get number of decimal places from a number
     */
    function getDecimalPlaces(num) {
        const match = ('' + num).match(/(?:\.(\d+))?(?:[eE]([+-]?\d+))?$/);
        if (!match) return 0;
        return Math.max(
            0,
            (match[1] ? match[1].length : 0) - (match[2] ? +match[2] : 0)
        );
    }

    /**
     * Round to specified decimal places
     */
    function roundToDecimals(value, decimals) {
        return Number(Math.round(value + 'e' + decimals) + 'e-' + decimals);
    }

    /**
     * Patched changeValue method with floating-point fix
     */
    OriginalHSInputNumber.prototype.changeValue = function(mode) {
        const minInputValue = this.minInputValue ?? 0;
        const maxInputValue = this.maxInputValue ?? Infinity;
        const decimals = getDecimalPlaces(this.step);

        // Ensure inputValue is initialized - parse from input if null
        if (this.inputValue === null || this.inputValue === undefined || isNaN(this.inputValue)) {
            const inputVal = parseFloat(this.input?.value);
            this.inputValue = !isNaN(inputVal) ? inputVal : 0;
        }

        let payload = {
            inputValue: this.inputValue
        };

        switch (mode) {
            case 'increment':
                const incrementedResult = (this.inputValue ?? 0) + this.step;
                // Round to avoid floating-point precision errors
                const roundedIncrement = roundToDecimals(incrementedResult, decimals);
                this.inputValue =
                    roundedIncrement >= minInputValue && (maxInputValue === null || roundedIncrement <= maxInputValue)
                        ? roundedIncrement
                        : maxInputValue;
                if (this.input) this.input.value = (this.inputValue ?? 0).toString();
                break;

            case 'decrement':
                const decrementedResult = (this.inputValue ?? 0) - this.step;
                // Round to avoid floating-point precision errors
                const roundedDecrement = roundToDecimals(decrementedResult, decimals);
                this.inputValue =
                    roundedDecrement >= minInputValue && (maxInputValue === null || roundedDecrement <= maxInputValue)
                        ? roundedDecrement
                        : minInputValue;
                if (this.input) this.input.value = (this.inputValue ?? 0).toString();
                break;

            default:
                // For manual input, use parseFloat instead of parseInt to preserve decimals
                const defaultResult = isNaN(parseFloat(this.input?.value))
                    ? 0
                    : parseFloat(this.input.value);
                const roundedDefault = roundToDecimals(defaultResult, decimals);
                this.inputValue =
                    roundedDefault >= maxInputValue
                        ? maxInputValue
                        : roundedDefault <= minInputValue
                            ? minInputValue
                            : roundedDefault;
                if (this.inputValue <= minInputValue && this.input)
                    this.input.value = (this.inputValue ?? 0).toString();
                break;
        }

        payload.inputValue = this.inputValue;

        if (this.inputValue === minInputValue) {
            this.el.classList.add('disabled');
            if (this.decrement) this.disableButtons('decrement');
        } else {
            this.el.classList.remove('disabled');
            if (this.decrement) this.enableButtons('decrement');
        }

        if (this.inputValue === maxInputValue) {
            this.el.classList.add('disabled');
            if (this.increment) this.disableButtons('increment');
        } else {
            this.el.classList.remove('disabled');
            if (this.increment) this.enableButtons('increment');
        }

        this.fireEvent('change', payload);

        // Use dispatch from HSStaticMethods if available, otherwise use the old method
        if (window.HSStaticMethods && window.HSStaticMethods.dispatch) {
            window.HSStaticMethods.dispatch('change.inputNumber', this.el, payload);
        } else if (typeof dispatch !== 'undefined') {
            dispatch('change.inputNumber', this.el, payload);
        }
    };

    console.log('HSInputNumber patched successfully!');
}

// Start patching when the module loads
patchHSInputNumber();

[PruthviPraj00]

@areski

Thank you for reporting the bug. We'll fix it in the next release.