Updated EuiComboBox to allow the options list to open for single selection custom options

[miukimiu]

Summary

This PR fixes #3701.

Feature

Before this PR, when selecting a single selection custom option the options list wouldn't open. Consumers could think this was a bug. So we decided to improve the code and to always allow the list to open for single selection custom options.

Checklist

• [ ] Check against all themes for compatibility in both light and dark modes
• [ ] Checked in mobile
• Checked in IE11 and Firefox
• [ ] Props have proper autodocs
• [ ] Added documentation
• [ ] Checked Code Sandbox works for the any docs examples
• [ ] Added or updated jest tests
• [ ] Checked for breaking changes and labeled appropriately
• [ ] Checked for accessibility including keyboard-only and screenreader modes
• A changelog entry exists and is marked appropriately

[kibanamachine]

Preview documentation changes for this PR: https://eui.elastic.co/pr_3706/

[chandlerprall]

This change does not appear to fix the underlying issue in #3701. To test with, I modified the src-docs/src/views/combo_box/combo_box.js example by:

• removing the options.push(newOption); action in onCreateOption
• added singleSelection={{asPlainText: true}} to the combobox

A larger question though: do we really want to suppress the options list when the sole entry in a single selection is a custom option? As the original issue mentioned, it is still triggered when typing. Seems like this setup creates a less unified user experience.

[miukimiu]

@chandlerprall, not sure I understood the issue. 😛

I thought the problem was when we have singleSelection={{ asPlainText: true }} and onCreateOption and we click the input, the list was not showing up. Like it is demonstrated here: https://codesandbox.io/s/combobox-example-7bw9r?file=/index.js

This issue was fixed. You don't need to start typing to make the list showing up.

[kibanamachine]

Preview documentation changes for this PR: https://eui.elastic.co/pr_3706/

[chandlerprall]

There are two identified issues:

1. [EuiComboBox] Options list doesn't show when singleSelection and onCreateOption are set #3701 where providing singleSelection and onCreateOption prevents the popover
2. The one you identified in this PR description, where options and selectedOptions arrays do not share in-memory objects, but rather recreate them

Your PR addresses the second item, but not the first. To demonstrate, replace src-docs/src/views/combo_box/combo_box.js with the following

import React, { useState } from 'react';

import { EuiComboBox } from '../../../../src/components';
import { DisplayToggles } from '../form_controls/display_toggles';

const options = [
  {
    label: 'Titan',
    'data-test-subj': 'titanOption',
  },
  {
    label: 'Enceladus is disabled',
    disabled: true,
  },
  {
    label: 'Mimas',
  },
  {
    label: 'Dione',
  },
  {
    label: 'Iapetus',
  },
  {
    label: 'Phoebe',
  },
  {
    label: 'Rhea',
  },
  {
    label:
      "Pandora is one of Saturn's moons, named for a Titaness of Greek mythology",
  },
  {
    label: 'Tethys',
  },
  {
    label: 'Hyperion',
  },
];
export default () => {
  const [selectedOptions, setSelected] = useState([options[2]]);

  const onChange = selectedOptions => {
    setSelected(selectedOptions);
  };

  const onCreateOption = searchValue => {
    const normalizedSearchValue = searchValue.trim().toLowerCase();

    if (!normalizedSearchValue) {
      return;
    }

    const newOption = {
      label: searchValue,
    };

    // Select the option.
    setSelected([newOption]);
  };

  return (
    /* DisplayToggles wrapper for Docs only */
    <DisplayToggles canDisabled={false} canReadOnly={false}>
      <EuiComboBox
        singleSelection={{ asPlainText: true }}
        placeholder="Select or create options"
        options={options}
        selectedOptions={selectedOptions}
        onChange={onChange}
        onCreateOption={onCreateOption}
        isClearable={true}
        data-test-subj="demoComboBox"
      />
    </DisplayToggles>
  );
};

Then in that first Combo box example, add a custom entry. The popover will now not trigger by clicking on the input.

I took an additional step back in the response by asking: do we really want to prevent that popover in any case? The component is structured in a way where the issue in #3701 is a feature, not a bug. If we're changing that decision, we should be able to remove the call to isSingleSelectionCustomOption from onComboBoxFocus.

eui/src/components/combo_box/combo_box.tsx

Lines 535 to 543 in 4a0d20e

	onComboBoxFocus: FocusEventHandler<HTMLInputElement> = event => {
	if (this.props.onFocus) {
	this.props.onFocus(event);
	}
	if (!this.isSingleSelectionCustomOption()) {
	this.openList();
	}
	this.setState({ hasFocus: true });
	};

[miukimiu]

Thanks @Chandler for helping me out!

I think it makes more sense to always allow the list to open for single selection custom options. So I worked on adding this new feature.

I also provided a new example in our docs.

[kibanamachine]

Preview documentation changes for this PR: https://eui.elastic.co/pr_3706/

[chandlerprall]

Couple more comments

[kibanamachine]

Preview documentation changes for this PR: https://eui.elastic.co/pr_3706/

[cchaos]

I think this is a good place to also showcase a best-practice of supplying the user with help text indicating the ability to create a custom option. For instance, we do this in Visualize where the combo box is used for a time interval that has a few defaults, but a user can also type in their own.

Can you add some text in the example about providing help text when allowing for custom options and also wrap the example in a EuiFormRow with an example help text?

[kibanamachine]

Preview documentation changes for this PR: https://eui.elastic.co/pr_3706/

[kibanamachine]

Preview documentation changes for this PR: https://eui.elastic.co/pr_3706/

[chandlerprall]

Code & doc changes LGTM! Left one small comment on the Single selection example, but I don't want to be a blocker as I'm out tomorrow.

[chandlerprall]

Extra stamp of approval. Thanks for all the iterations on this one!

[kibanamachine]

Preview documentation changes for this PR: https://eui.elastic.co/pr_3706/

[kibanamachine]

Preview documentation changes for this PR: https://eui.elastic.co/pr_3706/

[miukimiu]

Thanks @chandlerprall.

@cchaos I improved the example. Can you take another look?

[miukimiu]

jenkins test this

[kibanamachine]

Preview documentation changes for this PR: https://eui.elastic.co/pr_3706/

[cchaos]

LGTM! Works as described. Just a couple nit-picky items.

[kibanamachine]

Preview documentation changes for this PR: https://eui.elastic.co/pr_3706/