[8.19] [Controls] Fix error when selecting "(blank)" value in options list (#239791) (#239812)

# Backport

This will backport the following commits from `main` to `8.19`:
- [[Controls] Fix error when selecting "(blank)" value in options list
(#239791)](#239791)

<!--- Backport version: 9.6.6 -->

### Questions ?
Please refer to the [Backport tool
documentation](https://github.com/sorenlouv/backport)

<!--BACKPORT [{"author":{"name":"Nick
Peihl","email":"nick.peihl@elastic.co"},"sourceCommit":{"committedDate":"2025-10-20T19:52:09Z","message":"[Controls]
Fix error when selecting \"(blank)\" value in options list
(#239791)\n\nFixes #239735\n\n## Summary\n\nFixes an error in the
Options list control when selecting a \"(blank)\"\nvalue.\n\nMakes the
boolean check for key more explicit using [loose equality to\ncheck if
the key is null
or\nundefined](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Equality_comparisons_and_sameness#loose_equality_using).\nWithout
this, selecting a `\"\"` value causes the control to
error.","sha":"36758259f660d3d512b5f90ee3f5dadd7c3114b9","branchLabelMapping":{"^v9.3.0$":"main","^v(\\d+).(\\d+).\\d+$":"$1.$2"}},"sourcePullRequest":{"labels":["release_note:fix","Feature:Input
Control","Team:Presentation","backport:version","v9.2.0","v9.3.0","v9.1.6","v8.19.6"],"title":"[Controls]
Fix error when selecting \"(blank)\" value in options
list","number":239791,"url":"https://github.com/elastic/kibana/pull/239791","mergeCommit":{"message":"[Controls]
Fix error when selecting \"(blank)\" value in options list
(#239791)\n\nFixes #239735\n\n## Summary\n\nFixes an error in the
Options list control when selecting a \"(blank)\"\nvalue.\n\nMakes the
boolean check for key more explicit using [loose equality to\ncheck if
the key is null
or\nundefined](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Equality_comparisons_and_sameness#loose_equality_using).\nWithout
this, selecting a `\"\"` value causes the control to
error.","sha":"36758259f660d3d512b5f90ee3f5dadd7c3114b9"}},"sourceBranch":"main","suggestedTargetBranches":["9.2","9.1","8.19"],"targetPullRequestStates":[{"branch":"9.2","label":"v9.2.0","branchLabelMappingKey":"^v(\\d+).(\\d+).\\d+$","isSourceBranch":false,"state":"NOT_CREATED"},{"branch":"main","label":"v9.3.0","branchLabelMappingKey":"^v9.3.0$","isSourceBranch":true,"state":"MERGED","url":"https://github.com/elastic/kibana/pull/239791","number":239791,"mergeCommit":{"message":"[Controls]
Fix error when selecting \"(blank)\" value in options list
(#239791)\n\nFixes #239735\n\n## Summary\n\nFixes an error in the
Options list control when selecting a \"(blank)\"\nvalue.\n\nMakes the
boolean check for key more explicit using [loose equality to\ncheck if
the key is null
or\nundefined](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Equality_comparisons_and_sameness#loose_equality_using).\nWithout
this, selecting a `\"\"` value causes the control to
error.","sha":"36758259f660d3d512b5f90ee3f5dadd7c3114b9"}},{"branch":"9.1","label":"v9.1.6","branchLabelMappingKey":"^v(\\d+).(\\d+).\\d+$","isSourceBranch":false,"state":"NOT_CREATED"},{"branch":"8.19","label":"v8.19.6","branchLabelMappingKey":"^v(\\d+).(\\d+).\\d+$","isSourceBranch":false,"state":"NOT_CREATED"}]}]
BACKPORT-->

Co-authored-by: Nick Peihl <nick.peihl@elastic.co>

Author: kibanamachine

src/platform/plugins/shared/controls/public/controls/data_controls/options_list_control/get_options_list_control_factory.test.tsx

@@ -237,10 +237,35 @@ describe('Options List Control Api', () => {
           { value: 'woof', docCount: 10 },
           { value: 'bark', docCount: 15 },
           { value: 'meow', docCount: 12 },
+          { value: '', docCount: 20 },
         ],
       });
     });
 
+    test('renders a "(blank)" option', async () => {
+      const { Component } = await factory.buildControl({
+        initialState: {
+          dataViewId: 'myDataViewId',
+          fieldName: 'myFieldName',
+          existsSelected: true,
+        },
+        finalizeApi,
+        uuid,
+        controlGroupApi,
+      });
+
+      const control = render(<Component className={'controlPanel'} />);
+      await userEvent.click(control.getByTestId(`optionsList-control-${uuid}`));
+      await waitFor(() => {
+        expect(control.getAllByRole('option').length).toBe(5);
+      });
+      const option = control.getByTestId('optionsList-control-selection-');
+      await userEvent.click(option);
+      await waitFor(async () => {
+        expect(option).toBeChecked();
+      });
+    });
+
     test('clicking another option unselects "Exists"', async () => {
       const { Component } = await factory.buildControl({
         initialState: {
@@ -256,7 +281,7 @@ describe('Options List Control Api', () => {
       const control = render(<Component className={'controlPanel'} />);
       await userEvent.click(control.getByTestId(`optionsList-control-${uuid}`));
       await waitFor(() => {
-        expect(control.getAllByRole('option').length).toBe(4);
+        expect(control.getAllByRole('option').length).toBe(5);
       });
 
       expect(control.getByTestId('optionsList-control-selection-exists')).toBeChecked();
@@ -285,7 +310,7 @@ describe('Options List Control Api', () => {
       const control = render(<Component className={'controlPanel'} />);
       await userEvent.click(control.getByTestId(`optionsList-control-${uuid}`));
       await waitFor(() => {
-        expect(control.getAllByRole('option').length).toEqual(4);
+        expect(control.getAllByRole('option').length).toEqual(5);
       });
 
       const existsOption = control.getByTestId('optionsList-control-selection-exists');
@@ -319,7 +344,7 @@ describe('Options List Control Api', () => {
       const control = render(<Component className={'controlPanel'} />);
       await userEvent.click(control.getByTestId(`optionsList-control-${uuid}`));
       await waitFor(() => {
-        expect(control.getAllByRole('option').length).toEqual(4);
+        expect(control.getAllByRole('option').length).toEqual(5);
       });
       await userEvent.click(control.getByTestId('optionsList-control-show-only-selected'));
 
@@ -381,7 +406,7 @@ describe('Options List Control Api', () => {
 
       await userEvent.click(control.getByTestId(`optionsList-control-${uuid}`));
       await waitFor(() => {
-        expect(control.getAllByRole('option').length).toEqual(4);
+        expect(control.getAllByRole('option').length).toEqual(5);
       });
       expect(control.getByTestId('optionsList-control-selection-woof')).toBeChecked();
       expect(control.queryByTestId('optionsList-control-selection-bark')).not.toBeChecked();

src/platform/plugins/shared/controls/public/controls/data_controls/options_list_control/get_options_list_control_factory.tsx

@@ -373,7 +373,7 @@ export const getOptionsListControlFactory = (): DataControlFactory<
         },
         makeSelection: (key: string | undefined, showOnlySelected: boolean) => {
           const field = api.field$.getValue();
-          if (!key || !field) {
+          if (key == null || !field) {
             api.setBlockingError(
               new Error(OptionsListStrings.control.getInvalidSelectionMessage())
             );