Focus helpers additionally by ArrowDown

src/components/chat/autocompleteHelper.ts

@@ -28,7 +28,7 @@ export default class AutocompleteHelper extends EventListenerBase<{
   protected controller: AutocompleteHelperController;
   protected listType: 'xy' | 'x' | 'y';
   protected onSelect: (target: Element) => boolean | void;
-  protected waitForKey?: string;
+  protected waitForKey?: string[];
 
   protected navigationItem: NavigationItem;
 

src/components/chat/emojiHelper.ts

@@ -64,7 +64,7 @@ export default class EmojiHelper extends AutocompleteHelper {
       });
     }
 
-    this.waitForKey = waitForKey ? 'ArrowUp' : undefined;
+    this.waitForKey = waitForKey ? ['ArrowUp', 'ArrowDown'] : undefined;
     this.toggle(!emojis.length);
 
     /* window.requestAnimationFrame(() => {

src/components/chat/inlineHelper.ts

@@ -46,7 +46,7 @@ export default class InlineHelper extends AutocompleteHelper {
       appendTo, 
       controller,
       listType: 'xy', 
-      waitForKey: 'ArrowUp',
+      waitForKey: ['ArrowUp', 'ArrowDown'],
       onSelect: (target) => {
         if(!target) return false; // can happen when there is only button
         const {peerId, botId, queryId} = this.list.dataset;

src/components/chat/stickersHelper.ts

@@ -30,7 +30,7 @@ export default class StickersHelper extends AutocompleteHelper {
       onSelect: (target) => {
         return !EmoticonsDropdown.onMediaClick({target}, true);
       }, 
-      waitForKey: 'ArrowUp'
+      waitForKey: ['ArrowUp', 'ArrowDown']
     });
 
     this.container.classList.add('stickers-helper');

src/helpers/dom/attachListNavigation.ts

@@ -22,8 +22,9 @@ export default function attachListNavigation({list, type, onSelect, once, waitFo
   type: 'xy' | 'x' | 'y',
   onSelect: (target: Element) => void | boolean,
   once: boolean,
-  waitForKey?: string
+  waitForKey?: string[]
 }) {
+  let waitForKeySet = waitForKey?.length ? new Set(waitForKey) : undefined;
   const keyNames = new Set(type === 'xy' ? AXIS_Y_KEYS.concat(AXIS_X_KEYS) : (type === 'x' ? AXIS_X_KEYS : AXIS_Y_KEYS)); 
 
   let target: Element;
@@ -165,21 +166,21 @@ export default function attachListNavigation({list, type, onSelect, once, waitFo
   };
 
   const resetTarget = () => {
-    if(waitForKey) return;
+    if(waitForKeySet) return;
     setCurrentTarget(list.firstElementChild, false);
   };
 
-  if(waitForKey) {
+  if(waitForKeySet) {
     const _onKeyDown = onKeyDown;
     onKeyDown = (e) => {
-      if(e.key === waitForKey) {
+      if(waitForKeySet.has(e.key)) {
         cancelEvent(e);
 
         document.removeEventListener(HANDLE_EVENT, onKeyDown, {capture: true});
         onKeyDown = _onKeyDown;
         document.addEventListener(HANDLE_EVENT, onKeyDown, {capture: true, passive: false});
 
-        waitForKey = undefined;
+        waitForKeySet = undefined;
         resetTarget();
       }
     };

src/scss/partials/_chat.scss

@@ -1036,7 +1036,7 @@ $background-transition-total-time: #{$input-transition-time - $background-transi
 		width: 100%;
 		position: relative;
 		// z-index: 2;
-		background-color: inherit;
+		background-color: var(--surface-color);
 		border-radius: .75rem;
 		padding: var(--padding);
 	}