[EuiSelectable] Fix searchable single selection selectables not correctly highlighting the checked option on initial render

[cee-chen]

Summary

This PR also contains 2 other small fixes / cleanups (see commit history).

Before

After

Problem

EuiSelectable.onSearchChange was being called on mount by EuiSelectableSearch, which was setting activeOptionIndex to undefined:

eui/src/components/selectable/selectable.tsx

Lines 423 to 432 in eb493ff

	onSearchChange = (
	searchValue: string,
	visibleOptions: Array<EuiSelectableOption<T>>
	) => {
	this.setState(
	{
	searchValue,
	visibleOptions,
	activeOptionIndex: undefined,
	},

Solution

Moving the searchProps.onChange callback to the EuiSelectable's constructor (which calls getMatchingOptions/sets search state on mount anyway, so no need for EuiSelectableSearch to repeat it) fixes the issue and leaves the found activeOptionIndex from the constructor intact.

Checklist

- [ ] Checked in both light and dark modes
- [ ] Checked in mobile
- [ ] Checked in Chrome, Safari, Edge, and Firefox
- [ ] Props have proper autodocs and playground toggles
- [ ] Added documentation
- [ ] Checked Code Sandbox works for any docs examples
- [ ] Checked for breaking changes and labeled appropriately
- [ ] Updated the Figma library counterpart
- [ ] Checked for accessibility including keyboard-only and screenreader modes Tested but no meaningful impact for these users - they have to tab into the Selectable which triggers the highlight in any case

• Added or updated jest and cypress tests
• A changelog entry exists and is marked appropriately

[kibanamachine]

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

[thompsongl]

LGTM!