Cannot clear Relationship field (without many set to true)

[chochihim]

Expected behavior

For Relationship fields without many set to true, if I clear the Select input, the value should be removed.

Actual/Current behavior

The value remains.

This looks like caused by keystonejs/keystone@5df6846. The many: true case was fixed by keystonejs/keystone#4667. How about the many: false case?

Steps to reproduce the actual/current behavior

Environment

Software	Version
Keystone	v4.0.0-rc.1
Node.js	8.11.3
Browser	Version 66.0.3359.139

[robinrossow]

I've also encountered this bug and looked a little into it. The POST request is already wrong (the data isn't erased) so this must be a frontend bug.
Unfortunately I don't know much about React so I wasn't able to find a solution :(

[dfinton]

One item I'd like to add: I've seen this same issue, but the POST data is correct. I don't think it's a front-end issue, but when I look at the data in a pre-save hook the association ID is still set.

[robinrossow]

@dfinton

Look at the Keyvisual field, it should be empty here but it isn't.

[dfinton]

Here are my screenshots: webkit form data with and without the relationship set. When the field is cleared, the data is no longer present between "state" and "author" (it's not anywhere else in the POST data either). I'm not sure if it has something to do with the fact our data includes a file upload which is why the form data is in this format, but it doesn't change the fact that on the server, it still thinks the relationship with that particular document exists.

[robinrossow]

Yeah I was wrong! I Looked at the server response instead of the actual POST request.

[Vultraz]

Just ran into this myself. I can't clear a singular relationship field (the value is restored when I save the document).

[mcglabs]

The problem I found was with react-select and removing the single relationship, removed the hidden field that holds the value that is collated with the rest of the form data and sent to api. Because the param for the relationship is empty, the server process ignores any change. {many: true} works because a hidden field is generated in that case, see line 225: const emptyValueInput = ... in RelationshipField.js

My solution was to add:

{!this.state.value && !this.props.many && (
    <input type="hidden" name={inputName} value="" />
)}

in render beneath

{emptyValueInput}

on line 233