Calcite-components: Enhancement: Add `valueAsNumber` to calcite-input

[codylawson]

Description

The input HTML spec shows a property called valueAsNumber, we should expose this prop on the calcite-input.

Acceptance Criteria

Expose valueAsNumber from native input el in calcite-input.

Relevant Info

https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement

Which Component

calcite-input

Example Use Case

A calcite-input with type="number" requires users to parseInt() the value prop to get a number.

[github-actions[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[eriklharper]

@codylawson can you explain your use case for this a bit more? It sounds like you just need to be able to read (not write) the valueAsNumber property, correct?

[codylawson]

@eriklharper That's correct, this would just be to store the value in local state. By default input value is a string, even if the input type is number, meaning you have to parseFloat or similar to get the proper value. My recommendations was to just follow the dom api standard and expose valueAsNumber as well.

[driskull]

Would we want to expose 'childEl' as something and let the user access things like valueAsNumber and valueAsDate?

[codylawson]

@driskull I think that would be acceptable as well.

[driskull]

I'm just trying to avoid having to duplicate native input logic for these things

[eriklharper]

Would we want to expose 'childEl' as something and let the user access things like valueAsNumber and valueAsDate?

On board with this idea, because like you said we would have to duplicate all the native properties otherwise.

[driskull]

@eriklharper @jcfranco I'm not sure if we can add a readOnly property like this. Seems like we would have to use a method. Is that correct?

[eriklharper]

@eriklharper @jcfranco I'm not sure if we can add a readOnly property like this. Seems like we would have to use a method. Is that correct?

When you say "readOnly" property, are you talking about the idea of exposing the childEl or the valueAsNumber property?

[driskull]

childEl prop

[eriklharper]

A method could work, which would return the input element, but I was thinking just a plain ol javascript getter (POJG? lol) which we could maybe call input perhaps since that _is_ the actual input?

export class CalciteInput {
  get input() {
    return this.input;
  }
}

[driskull]

I'm not sure it would get added unless it has the prop decorator though.

[eriklharper]

~I'll look into if this is possible, and even consult the Stencil Slack peeps to see what they think.~

Heard from @jcfranco that this is not supported in Stencil and a support ticket was opened as a result. Guess we should explore the method route.

[driskull]

Yeah I opened a support issue and didn't realize we had opened one before about this. :(