Cannot set input value to undefined

[wnvko]

Description

I am trying to set the value of the input to undefined.

NOTE: Transferred from React repo, see comments below for repro sample.

Steps to reproduce

Setup input like this

document.getElementById("test").value = undefined;
...
<igc-input id="test"> </igc-input>

Result

The input value is set to undefined string.

Expected result

Value of the input should be undefined.

[MayaKirova]

@wnvko This seems to be a web component's issue since if you set undefined directly to a igc-input you'd get the same result: https://codesandbox.io/p/sandbox/heuristic-james-n8ydp4

This should probably be logged here: https://github.com/IgniteUI/igniteui-webcomponents/issues

[wnvko]

@MayaKirova the sample provided is not correct. Try to set the value like this:

  @state()
  private text?: string = undefined;

  render() {
    return html`
      <link rel='stylesheet' href='../../ig-theme.css'>
      <igc-input value="${this.text!}" label="Some label" class="input"></igc-input>
    `;
  }

There is not undefined in the input:

[MayaKirova]

@wnvko React wrappers set those runtime, so the scenario where you get the input and set undefined is closer to what react does under the hood. Also shouldn't it work runtime as well, not only declaratively?

[damyanpetev]

I'll just transfer the issue to the Web Components repo.

[damyanpetev]

The only sad part is the native input behaves this way too for whatever reason :( We could still consider if we can add our own handling, assuming use case it meaningful.

PS: Technically, the input always has a value and it's always string even if it's an empty one. @wnvko not sure if the input forcibly converts the undefined value to one it'd be better for your uses