Unable to select multiple groups with same name in MR approval rules drawer

Summary

When there are subgroups in the Project groups list when adding a group to an MR approval rule, only the first group is selectable.

Steps to reproduce

1. Create a group with nameA
2. Create a project within this group (nameA), call it projectA
3. Create another group with nameB
4. Create a subgroup called nameA within the group with nameB
5. Invite the subgroup nameB/nameA to the projectA, with at least Reporter role
6. Navigate to projectA -> Settings -> Merge requests
7. Click on Add approval rule
8. Under the Groups section, click on the search field
9. Notice that nameA and nameB/nameA groups both show up in the list
10. Attempt to select both nameA and nameB/nameA groups

What is the current bug behavior?

Only one of the groups is selectable, in this case only nameB/nameA group is added to the list. Clicking on nameA always adds nameB/nameA as in the below screenshot.

Click to see screenshot

What is the expected correct behavior?

Both groups should be selectable.

Output of checks

Results of GitLab environment info

Expand for output related to GitLab environment info

(For installations with omnibus-gitlab package run and paste the output of:
`sudo gitlab-rake gitlab:env:info`)

(For installations from source run and paste the output of:
`sudo -u git -H bundle exec rake gitlab:env:info RAILS_ENV=production`)

Results of GitLab application Check

Expand for output related to the GitLab application check

(For installations with omnibus-gitlab package run and paste the output of:
sudo gitlab-rake gitlab:check SANITIZE=true)
(For installations from source run and paste the output of:
sudo -u git -H bundle exec rake gitlab:check RAILS_ENV=production SANITIZE=true)
(we will only investigate if the tests are passing)

Possible fixes

This UI was added in Replace approval selectors with User/Group sele... (!148667 - merged)

Implementation guide

1. Change filter key from name to id for the groups type in ListSelector component: app/assets/javascripts/vue_shared/components/list_selector/constants.js#L22
2. Adjust any failing unit tests: spec/frontend/vue_shared/components/list_selector/index_spec.js
3. This component is used in Project settings / Merge requests / Merge requests approvals. Example url on GDK: http://gdk.test:8080/flightjs/Flight/-/settings/merge_requests Choose Add approval rule or Edit to open a drawer and use a group selector.