Igniteui-angular: Various Glitches Typing Decimals into Numeric Editor

[ScottMichaud]

Description

The carrot (keyboard cursor) can get confused when editing numbers with decimals in them. The behaviour is not consistent across Chrome 77 and Firefox 69, although both have various issues that make editing decimals very difficult.

Chrome 77:

• Backspacing across a decimal causes the decimal to disappear and the cursor to snap all the way to the left. To delete the whole part of the number, the user needs to stop pressing backspace and either a) finish with delete or b) move the cursor again.
• Adding a period after an integer snaps the cursor all the way to the left, requiring the user to click on the far right of the number, again, to add the decimal portion of the number.

Firefox 69:

• Number entry has up and down spinner arrows (is this a bug with Firefox showing it or Chrome not showing it?)
• Adding a decimal (".") to the right of an integer doesn't appear. Pressing "." again makes it appear, but it will sometimes delete the number.

Some of these issues might take multiple tries. It shouldn't be hard to see at least one fail state, though.

• igniteui-angular version: 8.1.9 from NPM (my project). 8.1.4 (StackBlitz.)
• browser: Chrome 77, Firefox 69. (Have not tried Opera or Edge.)

Steps to reproduce

Chrome 77:

1. Step 1: Go to https://www.infragistics.com/products/ignite-ui-angular/angular/components/grid/editing.html
2. Step 2: Click on View on StackBlitz. (For some reason, the one on the example site seems to work okay. Older version?)
3. Step 3: Once StackBlitz loads, click on the number 39, click to move the cursor to the right of the number, then try to add a decimal ".". It should fail and move the cursor to the left.
4. Step 4: Click on the right of the number again (to move the cursor to the right of the number) and add a decimal ".". This time it will work. Add 68 to turn the number into 39.68.
5. Step 5; Click away to accept the editor, then click on the number again. Move the cursor to the right of 39.68 and press backspace three times. (The second backspace should snap the cursor to the far left. The third backspace should do nothing.)

Result

What is the actual result after following the steps to reproduce?
Various glitches, usually involving something being deleted or the cursor moving somewhere unintended.

Expected result

What is the expected result after following the steps to reproduce?
The user should be able to reliably type decimal numbers into the text area.

Attachments

Attach a sample if available, and screenshots, if applicable.

[kdinev]

@ScottMichaud The described behaviors are all due to native browser navigation handling within an <input type="number" />. I tested the described behavior for Chrome in both 76 and 77 and I was actually unable to reproduce it, so it might be fixed in the latest Chrome patch. For Firefox, I was able to reproduce it and what you're describing seems like a bug in Firefox.

The spinner buttons are also native implementation of Firefox and are visible by default. To enable them in Chrome, you need to add this to your css:

input[type=number]::-webkit-outer-spin-button, 
input[type=number]::-webkit-inner-spin-button {
    -webkit-appearance: inner-spin-button !important;
}