Drawer-collection select: Only every third click lucky winner 😅

[nickluger]

Preflight Checklist

• I have completed all Troubleshooting Steps.
• I'm on the latest version of Directus.
• There's no other issue that already describes my problem.

Describe the Bug

When selecting an existing item for a M2O-relation in the <drawer-collection>-select, (in my test case from a select-dropdown-m2o) you can normally select the item by:

A, either clicking directly in the little checkbox on the left

or B., by clicking anywhere else in the row, e.g. on the author name, in the image above. This is super useful, as clicking the little checkbox directly is a bit tedious.

Procedure A, using the little box still, works on first try, but B only ever works on the third click.

But that's not all to it:

1. This usually happens only once while selecting items. Once you did your 3 clicks, the rows become kind of "activated" and start working on first click.
2. This only happens with unselected rows. If you e.g. have an existing item selected, and want to deselect it or associate another item, the "deselection"-click works on first try!
3. Plus: When you did a deselection click, the rows again become kind of "activated" again and every click works on first try.
4. Maybe unrelated: If you come from a select-dropdown-m2o interface and have an existing item selected, and you select another item, the previously selected item does not become unselected. In other words: Although you cannot select more than one item, the drawer-selection interface acts like you could select multiple. If this is unrelated to the issue described here, I will open a separate one.

To Reproduce

Just try to select in a drawer-collection or use this reproduction repo including SQLite data:
https://github.com/bluepick-app/directus-drawer-select-three-clicks-issue

I could reproduce this both, on Chrome and Safari to make sure it's not a Chrome-extensions thing.

What version of Directus are you using?

9.0.0-rc.92

What version of Node.js are you using?

=14

What database are you using?

Postgres 13

What browser are you using?

Chrome, Safari

What operating system are you using?

macOS

How are you deploying Directus?

running locally

[benhaynes]

@joselcvarela, did you see this while working on selection yesterday? 🤔

[azrikahar]

Actually I've also noticed this when I worked on the selection part out of curiosity, but I noticed @joselcvarela already worked on it so I didn't continue with it. In hindsight, I should've at least opened this particular issue regardless. Apologies for that @nickluger, and thank you for still providing detailed info & investigate into it 👍

From what I gathered, the issue is with the click event with tabular layout, where there's a click event on each row (because that was supposed to open the record if we were just viewing it as a collection). However when it's put as a M2O table, it never actually "bubble up" as an event to the layout wrapper here:

directus/app/src/views/private/components/drawer-collection/drawer-collection.vue

Lines 2 to 12 in 8564cb0

	<component
	:is="layoutWrapper"
	v-slot="{ layoutState }"
	v-model:selection="layoutSelection"
	v-model:layout-options="localOptions"
	v-model:layout-query="localQuery"
	v-model:filters="layoutFilters"
	v-model:search-query="searchQuery"
	:collection="collection"
	select-mode
	>

because the v-model:selection is only bound to the "selections" aka clicking on the checkboxes precisely (explains why clicking on checkbox works).

Here's a short video with the devtools open to show that the selection for TabularWrapper gets synchronized when we click the checkboxes, but not if we click the row and trigger it's click event (look at the change at bottom right corner):

As0c7N3kqi.mp4

I'm also unsure whether removing the click event altogther in M2O either makes more or less sense from a UX perspective, as we can't really do the same "click row to select it" action in collections table view. Just a question that I'm also personally unsure atm, so just throwing this out there.

[joselcvarela]

@joselcvarela, did you see this while working on selection yesterday? 🤔

@benhaynes I only looked into checkbox selection. In fact, I didn't know, I could click on row to select it 😐
But I am still working on this and will check it.
Thanks @nickluger and @azrikahar for the extensive investigation ❤

[benhaynes]

No problem! Generally, once you're in "selection mode", the entire row/item should be clickable for selection. Selection mode is enabled when you select the first item of a layout... or immediately when in a selection drawer. 👍

[nickluger]

Thank you, @azrikahar, for further investigation 👍 and @joselcvarela, for looking into it 🙏

4. Maybe unrelated: If you come from a select-dropdown-m2o interface and have an existing item selected, and you select another item, the previously selected item does not become unselected.

Correction, is related: Using the checkbox it works.

I'm also unsure whether removing the click event altogther in M2O either makes more or less sense from a UX perspective

From an UX perspective, "selection mode" is indispensable, IMHO. Especially if you have a use case where you connect/disconnect/reconnect often.