[Combobox] Infinite render loop when input is whitespace on controlled combobox

[jbachhardie]

🐛 Bug report

Current Behavior

When a controlled Combobox receives a value prop that is just whitespace — e.g " " — it crashes with a "Maximum update depth exceeded" error,

Expected behavior

The input is rendered with a value equal to the one passed in without crashing.

Reproducible example

https://codesandbox.io/s/musing-thunder-rmzvv

Suggested solution(s)

The problem is due to ComboboxInput triggering a change on isControlled && controlledValue !== value (line 462) but then deciding whether the input is cleared with value.trim() === "" (line 447). Either both of these comparisons have to .trim() the value or neither, not sure what the most appropriate would be but the discrepancy makes the loop infinite.

Additional context

Your environment

Software	Name(s)	Version
Reach Package	@reach/combobox	0.8.4
React		16.11.0
Browser	Multiple
Assistive tech	N/A
Node	N/A
npm/yarn	yarn	1.19.1
Operating System	Multiple

[enforce-template-use]

Thank you for opening this issue

[chaance]

Fixed in 0.8.5