'Cursor moving to starting position when trying add decimals in html input

I have a HTML element, input type="number". When I'm trying to add a decimal after adding a number, the dot is removed and the cursor is moving to the start position and I'm able to add the decimal before the number. Can anyone explain why it is behaving like this and How can I fix this behavior?

Here's my HTML element in case of ref:

<input class="form-control custom-form-control input-sm bg-color-report-select border-0 text-color-info" autocomplete="off" name="latitude" type="number">

Thanks in advance!!



Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source