search

tableau / tableau-ui

React UI components that have the look-and-feel of Tableau.
https://tableau.github.io/tableau-ui/
Other
95 stars 28 forks source link

TextField with numeric value 0 displays 0 above the input #20

Closed tjallingt closed 5 years ago

tjallingt commented 5 years ago

Example code:

<TextField value={0} />

Will display like this: image

This happens because of the use of the boolean and operator (&&) which is used to determine whether to display the TextFieldClearButton. This operator will always return either side of the evaluation which in most cases won't matter since React will not render false, undefined, null or "" but unfortunately it will show 0.

This can be replaced by either Boolean(value) && <TextFieldClearButton /> or value ? <TextFieldClearButton /> : null

tjallingt commented 5 years ago

This is probably never going to happen since input fields return their values as strings but its kind of a strange thing to see in your application when it does... 😕

craigkovatch commented 5 years ago

Fixed in https://www.npmjs.com/package/@tableau/tableau-ui/v/2.2.0