Fix clear value for relational interfaces

[azrikahar]

Fixes #12854

Problem

Currently "to many" relational interfaces (or ones using useRelationMultiple) requires the initial payload to at least be an empty array. When the props.value is undefined, it is defaulted to an empty array as well.

However when we use Clear Value, it emits null value (not undefined), which breaks them:

chrome_yG90ec5nnB.mp4

Solution

Now useRelationMultiple will clear the value properly, and ensure it being undefined or [] depending on the initial value to not stage any edits.

However if there are any existing values (not newly created or updated ones, those will still be cleared), we will stage them for deletion instead.

chrome_PDOTQ8oCT5.mp4

[rijkvanzanten]

However if there are any existing values (not newly created or updated ones, those will still be cleared), we will stage them for deletion instead.

I'm wondering if this is needed. The API will also clear everything if null is submitted IIRC, so we might be able to just have the app handle null as [], and be done 🤔

[azrikahar]

However if there are any existing values (not newly created or updated ones, those will still be cleared), we will stage them for deletion instead.

I'm wondering if this is needed. The API will also clear everything if null is submitted IIRC, so we might be able to just have the app handle null as [], and be done 🤔

It was initially due to the existing items persisting visually after being cleared:

chrome_nHAGsAHKZE.mp4

hence I opted to use the current approach. I do agree it'll feel more like the previous interaction if we fully clear the items, so I tried to implement it here but there's a slight issue where the Add Existing drawer will still filter out existing items:

chrome_Sl3Xx3CDxz.mp4

It's due to the following filter to exclude an existing entry's relational items:

directus/app/src/interfaces/list-m2m/list-m2m.vue

Lines 291 to 299 in c30b041

	const selectFilter: Filter = {
	[reverseRelation]: {
	_none: {
	[relationInfo.value.reverseJunctionField.field]: {
	_eq: props.primaryKey,
	},
	},
	},
	};

So not sure how to "toggle" this off after a user clears the value to full empty to ensure they can select the existing items again, at least without even more changes I presume 🤔 (and will need to "toggle" this on back again when user uses Undo Value)