Calcite-components: Bug: Clearable, numeric `calcite-input` with empty value not rendering

[nwhittaker]

Actual Behavior

A <calcite-input> element crashes when initialized with the following attributes: type="number", clearable, and value="" (or omit value). As a result, no input element is shown.

Expected Behavior

The input element is present.

Reproduction Steps or Sample

<calcite-input type="number" clearable></calcite-input>

Relevant Info

Stack trace:

TypeError: null is not an object (evaluating 'this.value.length') = $1
  isClearable — calcite-input.entry.js:279:89
  render — calcite-input.entry.js:404:138
  callRender — index-1c5dced1.js:1403
  (anonymous function) — index-1c5dced1.js:1341
  asyncFunctionResume
  consume — index-1c5dced1.js:2758
  flush — index-1c5dced1.js:2811

_Version_: @esri/[email protected]

[caripizza]

According to the prop's documentation, only calcite-input of type="textarea" should NOT support the clearable property:
https://github.com/Esri/calcite-components/blob/master/src/components/calcite-input/calcite-input.tsx#L65

Which types of input need to support this property? @eriklharper @macandcheese do either of you know by chance?

[macandcheese]

It should definitely support number, the docs seem right there (as well as showing by default for the listed types). Seems like this happens only when the number input has a certain set of initial attributes?

[eriklharper]

@nwhittaker I can't reproduce this locally in @esri/calcite-components's dev server, but I am noticing issues when rendering the self-closing tag, which is not supported for custom elements, so your code should render the input like <calcite-input type="number" clearable></calcite-input>.

Could you post a Codepen or something that shows this specific error that you're seeing?

[nwhittaker]

@nwhittaker I can't reproduce this locally in @esri/calcite-components's dev server, but I am noticing issues when rendering the self-closing tag...

I didn't notice a difference either way. I didn't know custom components couldn't be self-closing, though -- I'll update the code sample in the issue description.

Could you post a Codepen or something that shows this specific error that you're seeing?

@eriklharper, I have a working repro at https://jsbin.com/xibogupego/edit?html,console,output. The <calcite-input> element is initially not rendering. Remove its clearable attribute to get it to render.

---

FWIW, you should also be able to see the problem if you start the project's local server and visit http://localhost:3333/demos/calcite-input.html. Notice no inputs are rendered under the following labels:

• _Number input clearable horizontal_
• _Number input clearable vertical_
• _Number input clearable kitchen sync_

[caripizza]

@nwhittaker I think this was fixed as of beta.56 as a part of Erik's time-picker feature. Can you confirm?

(If you agree, I'll remove the BUG comments I had added in the demo calcite-input.html page.)

[nwhittaker]

@caripizza, it looks good in my jsbin -- thanks for following up.