Not able to avoid 'e','+','-' in fw-input with type number

App Platform
#1

My goal is to take only integer as input.

I have tried using fw-input with type number as shown below

<fw-input
label="Delay"
value={value}
type="number"
class="delay" />

It’s events such as fwInput is capturing value such as ‘e’,’+’,’-’ but not able to get value from event when these are given as input.

image
image922×200 30.5 KB

Please let me know if there is some alternative to this?

#5

Confirming this is reproducible. I have opened the following issue in the Crayons repo:

#7

I guess they are treated as e for exponential, +,- for negative and positive integers. One of things we can further verify if fwChange is observed when e,+,- is typed by the user in order to event.preventDefault();

Seems like even that doens’t seem to work because hanlder listening to fwChange doesn’t seem to emit events for e,+,- (Needs to be re-verified.)

1 Like
#8

Good point @Saif, those characters should be valid. I completely missed it. 2e10, -2e4, -10e+2 are all valid number representations.

fwChange gets triggered with an empty value in the event payload’s target.value. Also, the value property of the DOM element goes empty. So in this case, this happens when the number is invalid. For example:

  • 2e is an invalid number, so, fwChange triggers with target.value as an empty string.
  • 2e10 is a valid number, so fwChange triggers with target.value as a number string.

The type of the value is always string. The correct way to parse this will then be to use parseFloat(event.target.value).

<fw-input
  id="input-num"
  label="Num"
  type="number"
></fw-input>

const inputNum = document.getElementById("input-num");
inputNum.addEventListener("fwChange", function (evt) {
  // String representation. Will be empty string when invalid number is input
  console.log(evt.target.value);
  // Parsed number. Will be NaN when invalid number is input
  console.log(parseFloat(evt.target.value));
});

Which makes this a documentation gap.

2 Likes