eui icon indicating copy to clipboard operation
eui copied to clipboard

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

Open jguerreiro-wr opened this issue 1 year ago • 1 comments

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. Image

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>
        }
      ]
    }
  ];
  1. Then pass this filters array to the EuiSearchBar. Example:
<EuiSearchBar
    filters={filters}
    defaultQuery={initialQuery}
    onChange={onQueryChange}
/>
  1. 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: https://github.com/elastic/kibana/issues/195991

jguerreiro-wr avatar Oct 16 '24 22:10 jguerreiro-wr