[TextField] null value throws cannot read property length of null

[mbaumbach]

Issue summary

When a TextField component is given a value of null, an error is thrown saying cannot read property length of null.

Expected behavior

Providing a null value should render a TextField with no contents.

Actual behavior

The following error is thrown:

Uncaught TypeError: Cannot read property 'length' of null
    at TextField.render (index.es.js:5177)

This appears to be due to the character count trying to check the length of the value. Ideally null shouldn't be passed to a TextField, but I would expect just the typical warning from React about an uncontrolled component and not a crash.

This is the piece of code in TextField.tsx that's crashing:

const characterCount = value.length;

I think a simple fix would be:

const characterCount = value ? value.length : 0;

Steps to reproduce the problem

1. Create the following component: <TextField value={null} />

Reduced test case

The following code sandbox reproduces the issue: https://codesandbox.io/s/1omnl2q7vj

Specifications

• Are you using the React components? (Y/N): Y
• Polaris version number: 3.6.0
• Browser: Chrome 72.0.3626.81 (Official Build) (64-bit)
• Device: MacBook Pro
• Operating System: macOS High Sierra 10.14.3

[dpersing]

Hi @mbaumbach! Leaving out the value prop renders an empty field currently, with a value attribute with a null value. Does that work for your scenario?

<TextField />

<div class="Polaris-TextField"><input id="TextField2" class="Polaris-TextField__Input" aria-labelledby="TextField2Label" aria-invalid="false" value=""><div class="Polaris-TextField__Backdrop"></div></div>

[mbaumbach]

@dpersing I actually think passing a null to value is rightfully a bug in the application consuming Polaris. React even warns you that the underlying input field is uncontrolled. When I came across this problem, I simply fixed it to never pass null. Ideally, everybody would be using TypeScript and this would be a compile time error instead of runtime, but I opened this bug originally because we aren't currently using TypeScript and this was a regression in how the TextField component worked in a previous release when receiving a null value. I think it's potentially an easy scenario to accidentally pass in null and cause your app to crash.

So yes, I generally agree if you don't want the field to render a value, either leave it undefined or explicitly pass in an empty string, but my concern was more for the many consumers living in a non-TypeScript world that may do this accidentally. :)

EDIT: So I think it's perfectly fine for Polaris to say: "just stop passing null and fix your code" but I also think it's potentially a common enough scenario that it might be good for Polaris to handle it gracefully.