ovh/ovh-ui-kit

[oui-numeric] Default behavior on Firefox

jperchoc opened this issue · 4 comments

jperchoc commented

Description

With Firefox, the oui-numeric still has the up and down arrows which is the default behavior of numeric inputs. This leads to incorrect display on small numeric values.

Steps to reproduce

<oui-field
    data-label="{{:: 'data_processing_submit_job_stepper_spark_driver_cores_label' | translate }}"
>
    <div class="sizing__advanced-units-container">
        <oui-numeric
            name="driver-cores"
            data-model="$ctrl.state.driverCores"
            data-min="$ctrl.jobParameters.driver_cores.validator.min"
            data-max="$ctrl.jobParameters.driver_cores.validator.max"
        >
        </oui-numeric>
    </div>
    <span class="sizing__advanced-units">vCores</span>
</oui-field>

Expected behavior:

Arrows should not appear / hide value (screenshot on Linux OS)
image

Actual behavior:
Default behavior truncates input value (Windows OS - Firefox)
image

Frequency:
5 (always)

baaastijn commented

this issue is clearly a major one

jperchoc commented

Issue is also appearing on Mac OS with Firefox 104
image

jperchoc commented

This css seems to fix the problem:

input[type=number]::-webkit-outer-spin-button,
input[type=number]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

input[type=number] {
     -moz-appearance:textfield;
}

It should be added to the oui-numeric css (to only target this component, and not every input with type number)

anooparveti commented

As discussed on associated Jira, the issue is not reproducible anymore.