From 8f501ca2205abdca2f8f04bc8399e217e00501aa Mon Sep 17 00:00:00 2001
From: Yury Molodov <yurymolodov@gmail.com>
Date: Tue, 6 Dec 2022 06:56:54 +0100
Subject: [PATCH] vmui: fix multi-line query (#3448)

* fix: remove prevent nav by up/down keys for multi-line query

* fix: add query params encode in URL
---
 .../vmui/src/components/Main/Autocomplete/Autocomplete.tsx   | 5 +++--
 app/vmui/packages/vmui/src/utils/query-string.ts             | 2 +-
 2 files changed, 4 insertions(+), 3 deletions(-)

diff --git a/app/vmui/packages/vmui/src/components/Main/Autocomplete/Autocomplete.tsx b/app/vmui/packages/vmui/src/components/Main/Autocomplete/Autocomplete.tsx
index 021e05797c..3cb15557e8 100644
--- a/app/vmui/packages/vmui/src/components/Main/Autocomplete/Autocomplete.tsx
+++ b/app/vmui/packages/vmui/src/components/Main/Autocomplete/Autocomplete.tsx
@@ -56,13 +56,14 @@ const Autocomplete: FC<AutocompleteProps> = ({
   const handleKeyDown = (e: KeyboardEvent) => {
     const { key, ctrlKey, metaKey, shiftKey } = e;
     const modifiers = ctrlKey || metaKey || shiftKey;
+    const hasOptions = foundOptions.length;
 
-    if (key === "ArrowUp" && !modifiers) {
+    if (key === "ArrowUp" && !modifiers && hasOptions) {
       e.preventDefault();
       setFocusOption((prev) => prev <= 0 ? 0 : prev - 1);
     }
 
-    if (key === "ArrowDown" && !modifiers) {
+    if (key === "ArrowDown" && !modifiers && hasOptions) {
       e.preventDefault();
       const lastIndex = foundOptions.length - 1;
       setFocusOption((prev) => prev >= lastIndex ? lastIndex : prev + 1);
diff --git a/app/vmui/packages/vmui/src/utils/query-string.ts b/app/vmui/packages/vmui/src/utils/query-string.ts
index 170a163795..333bd93550 100644
--- a/app/vmui/packages/vmui/src/utils/query-string.ts
+++ b/app/vmui/packages/vmui/src/utils/query-string.ts
@@ -5,7 +5,7 @@ import { MAX_QUERY_FIELDS } from "../constants/graph";
 export const setQueryStringWithoutPageReload = (params: Record<string, unknown>): void => {
   const w = window;
   if (w) {
-    const qsValue = Object.entries(params).map(([k, v]) => `${k}=${v}`).join("&");
+    const qsValue = Object.entries(params).map(([k, v]) => `${k}=${encodeURIComponent(String(v))}`).join("&");
     const qs = qsValue ? `?${qsValue}` : "";
     const newurl = `${w.location.protocol}//${w.location.host}${w.location.pathname}${qs}${w.location.hash}`;
     w.history.pushState({ path: newurl }, "", newurl);