Number input not accepting decimal - bug?

#1

I have a form on a BS4 page which has a number input that I want to accept decimals for a monetary value but for some reason when someone types the decimal point, the cursor returns to the start of the number in the input. See the video below:

NumberInputIssue

Here’s the HTML for the input (the form is on a modal and the input is in a conditional region - not that I would expect that to make a difference)

<div class="col-auto" is="dmx-if" id="conditional2" dmx-bind:condition="inp_clubChargeable.value == 'session'">
    <div class="form-group">
          <label for="inp_clubSessionCost">Session cost</label>
          <input type="number" step="any" class="form-control" id="inp_clubSessionCost" name="clubSessionCost" aria-describedby="inp_clubSessionCost_help" placeholder="Enter Session cost" data-rule-number="" required="" min="" data-rule-min="0">
     </div>
</div>

I tried adjusting the step (tried both ‘any’ and 0.01), adding validation, removing validation and the behaviour doesn’t change.

The only way I have found to get around it is to make the input type=“text” which is far from ideal!

#2
#3

I’ve tries with the same html and can’t reproduce it. There must be something else on the page that is affects the input.

#4

Thanks Patrick,
Just realised that I had a JS function to clear out some of the **** that comes when people copy from Word. It looks like it sees a decimal point in a number input as an ellipsis when it has no digit after the point. I prevented it from applying to number inputs and it solved the issue.

I really appreciate you checking :+1:

1 Like
#5