From bafff9dd7fdcaa7f3a66d4401a36808ecae481c3 Mon Sep 17 00:00:00 2001
From: VWSCoronaDashboard19 <hasan.ozaynaci@ordina.nl>
Date: Wed, 15 Jun 2022 09:47:21 +0200
Subject: [PATCH 1/4] feat: scroll through list of results with keyboard

---
 .../src/components/combo-box/combo-box.tsx    | 29 +++++++++++++++++++
 1 file changed, 29 insertions(+)

diff --git a/packages/app/src/components/combo-box/combo-box.tsx b/packages/app/src/components/combo-box/combo-box.tsx
index 980081cb8e..e424182f33 100644
--- a/packages/app/src/components/combo-box/combo-box.tsx
+++ b/packages/app/src/components/combo-box/combo-box.tsx
@@ -53,12 +53,40 @@ export function ComboBox<Option extends TOption>(props: TProps<Option>) {
   const router = useRouter();
   const { code } = router.query;
   const inputRef = useRef<HTMLInputElement>(null);
+  const containerRef = useRef<HTMLInputElement>(null);
   const [inputValue, setInputValue] = useState<string>('');
   const results = useSearchedOptions<Option>(inputValue, options, sorter);
   const breakpoints = useBreakpoints();
   const isLargeScreen = breakpoints.md;
   const hasRegionSelected = !!code;
 
+  /**
+   * Allow keyboard interaction to scroll through a list of results.
+   */
+  const onKeyDown = (event: React.KeyboardEvent<HTMLInputElement>) => {
+    if (!event.isDefaultPrevented()) {
+      const container = containerRef.current;
+
+      if (container) {
+        window.requestAnimationFrame(() => {
+          const element: HTMLInputElement | null = container.querySelector(
+            '[aria-selected=true]'
+          );
+          if (element) {
+            const top = element.offsetTop - container.scrollTop;
+            const bottom =
+              container.scrollTop +
+              container.clientHeight -
+              (element.offsetTop + element.clientHeight);
+
+            if (bottom < 0) container.scrollTop -= bottom;
+            if (top < 0) container.scrollTop += top;
+          }
+        });
+      }
+    }
+  };
+
   function handleInputChange(event: React.ChangeEvent<HTMLInputElement>): void {
     setInputValue(event.target.value);
   }
@@ -99,6 +127,7 @@ export function ComboBox<Option extends TOption>(props: TProps<Option>) {
         <ComboboxInput
           ref={inputRef}
           onChange={handleInputChange}
+          onKeyDown={onKeyDown}
           placeholder={placeholder}
         />
         <ComboboxPopover>

From 356ff5dd9eae2740242ffcc43c529ce5ed21e5b6 Mon Sep 17 00:00:00 2001
From: VWSCoronaDashboard19 <hasan.ozaynaci@ordina.nl>
Date: Thu, 16 Jun 2022 15:01:40 +0200
Subject: [PATCH 2/4] feat: Add guard pattern and named functions

- Change if statement and add guard
- Add extra comment for specific calculations
- Change functions to named functions
---
 .../src/components/combo-box/combo-box.tsx    | 57 +++++++++----------
 1 file changed, 28 insertions(+), 29 deletions(-)

diff --git a/packages/app/src/components/combo-box/combo-box.tsx b/packages/app/src/components/combo-box/combo-box.tsx
index e424182f33..d89ff0d479 100644
--- a/packages/app/src/components/combo-box/combo-box.tsx
+++ b/packages/app/src/components/combo-box/combo-box.tsx
@@ -45,7 +45,7 @@ type TProps<Option extends TOption> = {
  * />
  * ```
  */
-export function ComboBox<Option extends TOption>(props: TProps<Option>) {
+export const ComboBox = <Option extends TOption>(props: TProps<Option>) => {
   const { options, placeholder, sorter, selectedOption } = props;
 
   const { commonTexts } = useIntl();
@@ -53,7 +53,7 @@ export function ComboBox<Option extends TOption>(props: TProps<Option>) {
   const router = useRouter();
   const { code } = router.query;
   const inputRef = useRef<HTMLInputElement>(null);
-  const containerRef = useRef<HTMLInputElement>(null);
+  const containerRef = useRef<HTMLUListElement>(null);
   const [inputValue, setInputValue] = useState<string>('');
   const results = useSearchedOptions<Option>(inputValue, options, sorter);
   const breakpoints = useBreakpoints();
@@ -64,34 +64,33 @@ export function ComboBox<Option extends TOption>(props: TProps<Option>) {
    * Allow keyboard interaction to scroll through a list of results.
    */
   const onKeyDown = (event: React.KeyboardEvent<HTMLInputElement>) => {
-    if (!event.isDefaultPrevented()) {
-      const container = containerRef.current;
+    const container = containerRef.current;
 
-      if (container) {
-        window.requestAnimationFrame(() => {
-          const element: HTMLInputElement | null = container.querySelector(
-            '[aria-selected=true]'
-          );
-          if (element) {
-            const top = element.offsetTop - container.scrollTop;
-            const bottom =
-              container.scrollTop +
-              container.clientHeight -
-              (element.offsetTop + element.clientHeight);
+    if (event.isDefaultPrevented() || !container) return;
 
-            if (bottom < 0) container.scrollTop -= bottom;
-            if (top < 0) container.scrollTop += top;
-          }
-        });
+    window.requestAnimationFrame(() => {
+      const element: HTMLInputElement | null = container.querySelector(
+        '[aria-selected=true]'
+      );
+      if (element) {
+        const top = element.offsetTop - container.scrollTop; // Calculate the space between active element and top of the list
+        const bottom =
+          container.scrollTop +
+          container.clientHeight -
+          (element.offsetTop + element.clientHeight); // Calculate the space between active element and bottom of the list
+        if (bottom < 0) container.scrollTop -= bottom;
+        if (top < 0) container.scrollTop += top;
       }
-    }
+    });
   };
 
-  function handleInputChange(event: React.ChangeEvent<HTMLInputElement>): void {
+  const handleInputChange = (
+    event: React.ChangeEvent<HTMLInputElement>
+  ): void => {
     setInputValue(event.target.value);
-  }
+  };
 
-  function handleSelect(name: string): void {
+  const handleSelect = (name: string): void => {
     if (!name) {
       return;
     }
@@ -113,7 +112,7 @@ export function ComboBox<Option extends TOption>(props: TProps<Option>) {
     setTimeout(() => {
       inputRef.current?.blur();
     }, 1);
-  }
+  };
 
   useEffect(() => {
     if (!inputRef.current?.value && isLargeScreen && !hasRegionSelected) {
@@ -132,7 +131,7 @@ export function ComboBox<Option extends TOption>(props: TProps<Option>) {
         />
         <ComboboxPopover>
           {results.length > 0 ? (
-            <ComboboxList>
+            <ComboboxList ref={containerRef}>
               {results.map((option, index) => (
                 <StyledComboboxOption
                   key={`${index}-${option.name}`}
@@ -149,13 +148,13 @@ export function ComboBox<Option extends TOption>(props: TProps<Option>) {
       <ComboBoxStyles />
     </Box>
   );
-}
+};
 
-function useSearchedOptions<Option extends TOption>(
+const useSearchedOptions = <Option extends TOption>(
   term: string,
   options: Option[],
   sorter?: (a: Option, b: Option) => number
-): Option[] {
+): Option[] => {
   const throttledTerm = useThrottle(term, 100);
 
   return useMemo(
@@ -167,7 +166,7 @@ function useSearchedOptions<Option extends TOption>(
           }),
     [throttledTerm, options, sorter]
   );
-}
+};
 
 const StyledComboboxOption = styled(ComboboxOption)<{
   isSelectedOption: boolean;

From 3c9b23fa06720577174aab2c98ee0719bb02a36e Mon Sep 17 00:00:00 2001
From: VWSCoronaDashboard19 <hasan.ozaynaci@ordina.nl>
Date: Tue, 21 Jun 2022 09:35:34 +0200
Subject: [PATCH 3/4] feat: rename function according to coding standards

---
 packages/app/src/components/combo-box/combo-box.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/app/src/components/combo-box/combo-box.tsx b/packages/app/src/components/combo-box/combo-box.tsx
index d89ff0d479..86c4038299 100644
--- a/packages/app/src/components/combo-box/combo-box.tsx
+++ b/packages/app/src/components/combo-box/combo-box.tsx
@@ -63,7 +63,7 @@ export const ComboBox = <Option extends TOption>(props: TProps<Option>) => {
   /**
    * Allow keyboard interaction to scroll through a list of results.
    */
-  const onKeyDown = (event: React.KeyboardEvent<HTMLInputElement>) => {
+  const handleKeyDown = (event: React.KeyboardEvent<HTMLInputElement>) => {
     const container = containerRef.current;
 
     if (event.isDefaultPrevented() || !container) return;
@@ -126,7 +126,7 @@ export const ComboBox = <Option extends TOption>(props: TProps<Option>) => {
         <ComboboxInput
           ref={inputRef}
           onChange={handleInputChange}
-          onKeyDown={onKeyDown}
+          onKeyDown={handleKeyDown}
           placeholder={placeholder}
         />
         <ComboboxPopover>

From d1274ce42c88a2dd6352eeed8618f231b7622b95 Mon Sep 17 00:00:00 2001
From: VWSCoronaDashboard19 <hasan.ozaynaci@ordina.nl>
Date: Wed, 22 Jun 2022 09:57:11 +0200
Subject: [PATCH 4/4] feat: add extra space in code

---
 packages/app/src/components/combo-box/combo-box.tsx | 1 +
 1 file changed, 1 insertion(+)

diff --git a/packages/app/src/components/combo-box/combo-box.tsx b/packages/app/src/components/combo-box/combo-box.tsx
index 86c4038299..288d392a79 100644
--- a/packages/app/src/components/combo-box/combo-box.tsx
+++ b/packages/app/src/components/combo-box/combo-box.tsx
@@ -78,6 +78,7 @@ export const ComboBox = <Option extends TOption>(props: TProps<Option>) => {
           container.scrollTop +
           container.clientHeight -
           (element.offsetTop + element.clientHeight); // Calculate the space between active element and bottom of the list
+
         if (bottom < 0) container.scrollTop -= bottom;
         if (top < 0) container.scrollTop += top;
       }