Components with refs getting "null" (string) key even if no key is set

[bdwain]

I have a component that returns something like

return <Dropdown ref={this.setRef}>...</Dropdown>;

I am trying to shallow render it, but when i try to verify the element returned from .get(0), it has a key of "null", the string not the value null, even though there should be no key in the return value.

I've been trying to dig through the code and I think the problem is here. The function propsWithKeysAndRef is adding BOTH key and ref to props, even if only one of them has a value. React stringifies all valid keys in createElement, and a key is valid if it is not undefined. This seems like it was an intentional decision.

The problem seems to be that in enzyme 3, it reruns the node through react.createElement, which now thinks you explicitly set the key to null, and so it sets it to "null". I guess an element with no key gets a "key" property of null, not undefined.

Unfortunately, I don't think the answer is to just not return key as one of the props from propsWithKeysAndRef if it is null, because if you explicitly set it to null, then that would be the correct thing to do.

Is there a way to store the original key value on the node somehow, so that you can look for undefined explicitly?

[bdwain]

any update on this? I'd be happy to make a PR i just want to make sure I'm going in the right direction first.

[ljharb]

I'm not sure what the solution is; but I think you've correctly identified the bug.

[ljharb]

@bdwain what version of react are you using, and which adapter?

[bdwain]

version 16.0.0, adapter 16@1.0.1

[bdwain]

i can try to look at this later tonight.

[bdwain]

added #1254 to fix this.