[EuiSelectableTemplateSitewide] fix: The keydown popup display shall …

…be Enter key. (#5886)

* fix: Display popup bar in keydown

* fix: The keydown popup display shall be Enter key only.

- Because all keys except the Enter key were covered.

* add: changelog

* refacor: Added note on target functionality.

* docs: refactor changelogs

- To apply the appropriate modification description.

Co-authored-by: Constance <constancecchen@users.noreply.github.com>

* refactor: Delete unnecessary processes

- No need for quick returns based on whether or not the pop-up bar is displayed
- Use predefined constants for Enter key comparisons instead of literals

Co-authored-by: Constance <constancecchen@users.noreply.github.com>

src/components/selectable/selectable_templates/selectable_template_sitewide.tsx

@@ -32,6 +32,7 @@ import {
   isWithinBreakpoints,
 } from '../../../services/breakpoint';
 import { EuiSpacer } from '../../spacer';
+import { ENTER } from '../../../services/keys';
 
 export type EuiSelectableTemplateSitewideProps = Partial<
   Omit<EuiSelectableProps<{ [key: string]: any }>, 'options'>
@@ -142,21 +143,24 @@ export const EuiSelectableTemplateSitewide: FunctionComponent<EuiSelectableTempl
    * Search helpers
    */
   const searchOnFocus = (e: React.FocusEvent<HTMLInputElement>) => {
-    searchProps && searchProps.onFocus && searchProps.onFocus(e);
-    if (canShowPopoverButton) return;
-
+    searchProps?.onFocus?.(e);
     setPopoverIsOpen(true);
   };
 
   const onSearchInput = (e: React.FormEvent<HTMLInputElement>) => {
-    searchProps && searchProps.onInput && searchProps.onInput(e);
+    searchProps?.onInput?.(e);
     setPopoverIsOpen(true);
   };
 
-  const searchOnBlur = (e: React.FocusEvent<HTMLInputElement>) => {
-    searchProps && searchProps.onBlur && searchProps.onBlur(e);
-    if (canShowPopoverButton) return;
+  const onSearchKeydown = (e: React.KeyboardEvent<HTMLInputElement>) => {
+    searchProps?.onKeyDown?.(e);
+    if (e.key === ENTER) {
+      setPopoverIsOpen(true);
+    }
+  };
 
+  const searchOnBlur = (e: React.FocusEvent<HTMLInputElement>) => {
+    searchProps?.onBlur?.(e);
     if (!popoverRef?.contains(e.relatedTarget as HTMLElement)) {
       setPopoverIsOpen(false);
     }
@@ -235,6 +239,7 @@ export const EuiSelectableTemplateSitewide: FunctionComponent<EuiSelectableTempl
         onFocus: searchOnFocus,
         onBlur: searchOnBlur,
         onInput: onSearchInput,
+        onKeyDown: onSearchKeydown,
         className: searchClasses,
       }}
       listProps={{

upcoming_changelogs/5886.md

@@ -0,0 +1,3 @@
+**Bug fixes**
+
+- Fixed `EuiSelectableTemplateSitewide` to allow re-opening the search popover (if closed via Escape key) via the Enter key