GlFilteredSearch token value is multiple words gets split unexpectedly

Description

When selecting a token value from the dropdown that has spaces in it, the token is split. This is easier to see in this image:

This is the token configuration:

  {
    icon: 'status',
    title: __('Status'),
    type: PARAM_KEY_STATUS,
    token: GlFilteredSearchToken,
    unique: true,
    options: [
      { value: STATUS_ACTIVE, title: s__('Runners|Active') },
      { value: STATUS_PAUSED, title: s__('Runners|Paused') },
      { value: STATUS_ONLINE, title: s__('Runners|Online') },
      { value: STATUS_OFFLINE, title: s__('Runners|Offline') },
      { value: STATUS_NOT_CONNECTED, title: s__('Runners|Not connected') }, // <--- issue
    ],
    operators: OPERATOR_IS_ONLY,
  },

Expected outcome

The entire value is selected as Not connected

Workaround

Adding quotes around the token value allows the user to select the value:

Suggested solution

The solution suggested in #1438 (comment 906619217) is to stop treating spaces specially in GlFilteredSearch. How this component treats spaces was called out specifically in the original MR, and is the source of bugs and poor UX.

It's not clear yet how to make this change, even from a UX perspective, so that plan is to:

• Figure out possible UX solutions (@markrian and @aregnery pairing)
• Create a spike/proof of concept implementation to get a sense of the necessary changes, both in GitLab UI and GitLab
• Create a more thorough implementation plan issue/epic to implement the changes (assuming previous steps are successful)