Issue with EuiSearchBar ("@elastic/eui": "95.2.0") using multiselect false and with 'true' and 'false' values on the filter section

[jguerreiro-wr]

Kibana version: 8.15.0

Elasticsearch version: 8.15.0

Server OS version:

Browser version:

Browser OS version:

Original install method (e.g. download page, yum, from source, etc.):

Describe the bug:
When we use the value as 'true' or 'false' inside the options array in the filters array to pass to the EuiSearchBar, the select icon as well as the icon that shows the number of selections on the right side of the drop-down label, doesn't appear on the first click, only on the second click.
When you use a different string other than 'true' or 'false', it works.

In my tests, I set 3 options, 'true', 'false', and 'unknown'. See below that only the unknown works on first click.

When I replace the 'true' and 'false' values for any other string, it works.

Steps to reproduce:

1. Configure the filters array having the 'true' and 'false' values. Example:

const filters = [
    {
      type: 'field_value_selection',
      field: <ANY_FIELD>,
      name: <ANY_NAME>
      }),
      multiSelect: false,
      options: [
        {
          value: "true",
          name: <ANY_NAME>
          }),
          view: <EuiHealth color="success">True</EuiHealth>
        },
        {
          value: "false",
          name: <ANY_NAME>
          }),
          view: <EuiHealth color="danger">False</EuiHealth>
        },
        {
          value: "unknown",
          name: <ANY_NAME>
          }),
          view: <EuiHealth color="danger">Unknown</EuiHealth>
        }
      ]
    }
  ];

2. Then pass this filters array to the EuiSearchBar. Example:

<EuiSearchBar
    filters={filters}
    defaultQuery={initialQuery}
    onChange={onQueryChange}
/>

3. Observe the issue shown in the GIF above.

Expected behavior:
The expectation is to have this component working with 'true' and 'false' on the first click, the same way it works for other strings.

Screenshots (if relevant):

Errors in browser console (if relevant):

Provide logs and/or server output (if relevant):

Any additional context:

IMPORTANT: The issue described above doesn't happen when you use the multiselect prop as "or" for example, even using 'true' or 'false' as values, it only happens for multiselect equals to false.

Cloned from: elastic/kibana#195991

[cee-chen]

@jguerreiro-wr I cannot reproduce this behavior in latest EUI:

• https://ng2xkg.csb.app/
• https://codesandbox.io/p/sandbox/kind-agnesi-ng2xkg?file=%2Fdemo.js%3A127%2C8-146%2C9

Unless you can provide a working reproducible CodeSandbox of this behavior on latest EUI, we'll mark this as an issue to resolve by upgrading either EUI or Kibana.

[cee-chen]

Closing as can't repro - if you can repro this in Kibana but not in EUI, please re-open the issue in Kibana.