Datagrid: Placeholder sets to NaN.000 after clicking in the empty field

[janahintal]

Describe the bug
Datagrid: Palaceholder sets to NaN.000 after clicking in the empty field

To Reproduce

Steps to reproduce the behavior:

1. Go to https://4530-beta0-enterprise.demo.design.infor.com/components/datagrid/example-placeholder.html
2. In Row ID 1 - Price column with placeholder, click inside the field and click outside (See error)
3. In Row ID 1 - Action column, click the dropdown field to open
4. Select Blank
5. Open again using Enter key
6. Select On Hold (See error)

Expected behavior
Placeholder should show

Version
4.530 - beta - IDS

Screenshots

Platform
All major browsers & OS

Additional context
N/a

[tmcconechy]

@Jah25 Maybe should have pointed you in the right place as datagrid is a bit crazy. But i think the problem is that we are using:

formatter: placeholder and editor:input on numbers here:
https://github.com/infor-design/enterprise/blob/main/app/views/components/datagrid/example-placeholder.html#L71

Since this is a first issue i think its maybe a little complex to start with (sorry on my part). But i can see a fix which would be in https://github.com/infor-design/enterprise/blob/main/src/components/datagrid/datagrid.js#L10434

The coerveValue function is trying to put the data back in the source format fx (number in this case). I think it would be safe to exclude NaN here. So maybe NaN it just shows blank

     // coerced value may be coerced to empty string, null, or 0
      if (coercedVal === undefined && Number.isNaN(value)) {
        coercedVal = value;
      }

Something along those lines. But just a hint. Im noticing this example is a little odd as well so maybe we just fix this quick and move on.

HTH

[Jah25]

@tmcconechy Hey Tim I just saw this. Yeah it took a little chasing to find it but I also found the coercion was the issue though I ran across it here where the coercion is checking against the oldValue to determine the datatype it should force too

https://github.com/infor-design/enterprise/blob/main/src/components/datagrid/datagrid.js#L10372

my fix was going to be something like this
let isWord = /[A-Za-z!@#$%^&*()_+\-=\[\]{};':"\\|,.<>\/?]]/ ... else if (typeof oldVal === 'number' && value && isWord.test(value) ) { newVal = Locale.parseNumber(value); // remove thousands sep , keep a number a number }

I don't think it's perfect protection but it covers a few more edge cases, do you want to move forward with a change or the example fix?

[tmcconechy]

@Jah25 that sounds like it should work. Lets give it a try

[CindyMercadoReyes]

This issue is now resolved.