From da3934cc7bf70afaff2aea35a1a006792135e9a4 Mon Sep 17 00:00:00 2001
From: Darren Labithiotis <labithiotis@users.noreply.github.com>
Date: Tue, 6 Aug 2024 11:10:27 +0200
Subject: [PATCH] Push from menu-display-hidden (#14)

---
 .../textbox-autocomplete.tsx                  | 431 +++++++++---------
 packages/ui/src/css/menu.module.css           |   4 +
 2 files changed, 220 insertions(+), 215 deletions(-)

diff --git a/packages/ui/src/components/textbox/textbox-autocomplete/textbox-autocomplete.tsx b/packages/ui/src/components/textbox/textbox-autocomplete/textbox-autocomplete.tsx
index f3c1f7a9..f620bc27 100644
--- a/packages/ui/src/components/textbox/textbox-autocomplete/textbox-autocomplete.tsx
+++ b/packages/ui/src/components/textbox/textbox-autocomplete/textbox-autocomplete.tsx
@@ -1,63 +1,64 @@
-import { ComponentChildren, h, JSX, RefObject } from 'preact'
-import { useCallback, useRef, useState } from 'preact/hooks'
-
-import menuStyles from '../../../css/menu.module.css'
-import { useMouseDownOutside } from '../../../hooks/use-mouse-down-outside'
-import { IconMenuCheckmarkChecked16 } from '../../../icons/icon-16/icon-menu-checkmark-checked-16'
-import { OnValueChange, Props } from '../../../types/types'
-import { createClassName } from '../../../utilities/create-class-name'
-import { getCurrentFromRef } from '../../../utilities/get-current-from-ref'
-import { computeNextValue } from '../private/compute-next-value'
-import { isKeyCodeCharacterGenerating } from '../private/is-keycode-character-generating'
-import textboxStyles from '../textbox/textbox.module.css'
-import textboxAutocompleteStyles from './textbox-autocomplete.module.css'
-
-const EMPTY_STRING = ''
-const INVALID_ID = null
-const ITEM_ID_DATA_ATTRIBUTE_NAME = 'data-textbox-autocomplete-item-id'
-const MENU_VERTICAL_MARGIN = 16
+/** @jsx h */
+import { ComponentChildren, h, JSX, RefObject } from 'preact';
+import { useCallback, useRef, useState } from 'preact/hooks';
+
+import menuStyles from '../../../css/menu.module.css';
+import { useMouseDownOutside } from '../../../hooks/use-mouse-down-outside';
+import { IconMenuCheckmarkChecked16 } from '../../../icons/icon-16/icon-menu-checkmark-checked-16';
+import { OnValueChange, Props } from '../../../types/types';
+import { createClassName } from '../../../utilities/create-class-name';
+import { getCurrentFromRef } from '../../../utilities/get-current-from-ref';
+import { computeNextValue } from '../private/compute-next-value';
+import { isKeyCodeCharacterGenerating } from '../private/is-keycode-character-generating';
+import textboxStyles from '../textbox/textbox.module.css';
+import textboxAutocompleteStyles from './textbox-autocomplete.module.css';
+
+const EMPTY_STRING = '';
+const INVALID_ID = null;
+const ITEM_ID_DATA_ATTRIBUTE_NAME = 'data-textbox-autocomplete-item-id';
+const MENU_VERTICAL_MARGIN = 16;
 
 export type TextboxAutocompleteProps<Name extends string> = {
-  disabled?: boolean
-  filter?: boolean
-  icon?: ComponentChildren
-  name?: Name
-  onInput?: OmitThisParameter<JSX.GenericEventHandler<HTMLInputElement>>
-  onValueInput?: OnValueChange<string, Name>
-  options: Array<TextboxAutocompleteOption>
-  placeholder?: string
-  propagateEscapeKeyDown?: boolean
-  revertOnEscapeKeyDown?: boolean
-  spellCheck?: boolean
-  strict?: boolean
-  top?: boolean
-  value: string
-  variant?: TextboxAutocompleteVariant
-}
+  disabled?: boolean;
+  filter?: boolean;
+  icon?: ComponentChildren;
+  name?: Name;
+  onInput?: OmitThisParameter<JSX.GenericEventHandler<HTMLInputElement>>;
+  onValueInput?: OnValueChange<string, Name>;
+  options: Array<TextboxAutocompleteOption>;
+  placeholder?: string;
+  propagateEscapeKeyDown?: boolean;
+  revertOnEscapeKeyDown?: boolean;
+  spellCheck?: boolean;
+  strict?: boolean;
+  top?: boolean;
+  value: string;
+  variant?: TextboxAutocompleteVariant;
+};
 export type TextboxAutocompleteOption =
   | TextboxAutocompleteOptionHeader
   | TextboxAutocompleteOptionValue
-  | TextboxAutocompleteOptionSeparator
+  | TextboxAutocompleteOptionSeparator;
 export type TextboxAutocompleteOptionHeader = {
-  header: string
-}
+  header: string;
+};
 export type TextboxAutocompleteOptionValue = {
-  value: string
-  disabled?: boolean
-}
+  value: string;
+  disabled?: boolean;
+};
 export type TextboxAutocompleteOptionSeparator = {
-  separator: true
-}
-export type TextboxAutocompleteVariant = 'border' | 'underline'
+  separator: true;
+};
+export type TextboxAutocompleteVariant = 'border' | 'underline';
 
 type Option =
   | TextboxAutocompleteOptionHeader
   | OptionValueWithId
-  | TextboxAutocompleteOptionSeparator
+  | TextboxAutocompleteOptionSeparator;
 type OptionValueWithId = TextboxAutocompleteOptionValue & {
-  id: string
-}
-type Id = typeof INVALID_ID | string
+  id: string;
+};
+type Id = typeof INVALID_ID | string;
 
 export function TextboxAutocomplete<Name extends string>({
   disabled = false,
@@ -77,166 +78,166 @@ export function TextboxAutocomplete<Name extends string>({
   ...rest
 }: Props<HTMLInputElement, TextboxAutocompleteProps<Name>>): JSX.Element {
   if (typeof icon === 'string' && icon.length !== 1) {
-    throw new Error(`String \`icon\` must be a single character: ${icon}`)
+    throw new Error(`String \`icon\` must be a single character: ${icon}`);
   }
 
-  const rootElementRef: RefObject<HTMLDivElement> = useRef(null)
-  const inputElementRef: RefObject<HTMLInputElement> = useRef(null)
-  const menuElementRef: RefObject<HTMLDivElement> = useRef(null)
+  const rootElementRef: RefObject<HTMLDivElement> = useRef(null);
+  const inputElementRef: RefObject<HTMLInputElement> = useRef(null);
+  const menuElementRef: RefObject<HTMLDivElement> = useRef(null);
 
-  const [isMenuVisible, setIsMenuVisible] = useState(false)
-  const [selectedId, setSelectedId] = useState<Id>(INVALID_ID)
-  const [originalValue, setOriginalValue] = useState(EMPTY_STRING) // Value of the textbox when it was initially focused
-  const [editedValue, setEditedValue] = useState<string>(value) // Value being edited that does not match any of the options
+  const [isMenuVisible, setIsMenuVisible] = useState(false);
+  const [selectedId, setSelectedId] = useState<Id>(INVALID_ID);
+  const [originalValue, setOriginalValue] = useState(EMPTY_STRING); // Value of the textbox when it was initially focused
+  const [editedValue, setEditedValue] = useState<string>(value); // Value being edited that does not match any of the options
 
-  let options: Array<Option> = createOptions(rest.options)
+  let options: Array<Option> = createOptions(rest.options);
   if (filter === true) {
-    options = filterOptions(options, value, editedValue)
+    options = filterOptions(options, value, editedValue);
   }
 
   // Uncomment to debug
   // console.table([{ isMenuVisible, selectedId, originalValue, editedValue, value }])
 
   const triggerBlur = useCallback(function (): void {
-    setIsMenuVisible(false)
-    setOriginalValue(EMPTY_STRING)
-    setEditedValue(EMPTY_STRING)
-    setSelectedId(INVALID_ID)
-    getCurrentFromRef(inputElementRef).blur()
-  }, [])
+    setIsMenuVisible(false);
+    setOriginalValue(EMPTY_STRING);
+    setEditedValue(EMPTY_STRING);
+    setSelectedId(INVALID_ID);
+    getCurrentFromRef(inputElementRef).blur();
+  }, []);
 
   // Adjust the menu scroll position so that the selected option is always visible
   const updateScrollPosition = useCallback(function (id: Id): void {
-    const menuElement = getCurrentFromRef(menuElementRef)
+    const menuElement = getCurrentFromRef(menuElementRef);
     if (id === INVALID_ID) {
-      menuElement.scrollTop = 0
-      return
+      menuElement.scrollTop = 0;
+      return;
     }
     const selectedElement = menuElement.querySelector<HTMLDivElement>(
       `[${ITEM_ID_DATA_ATTRIBUTE_NAME}='${id}']`
-    )
+    );
     if (selectedElement === null) {
-      throw new Error('Invariant violation') // `id` is valid
+      throw new Error('Invariant violation'); // `id` is valid
     }
     const y =
       selectedElement.getBoundingClientRect().y -
-      menuElement.getBoundingClientRect().y
+      menuElement.getBoundingClientRect().y;
     if (y < menuElement.scrollTop) {
-      menuElement.scrollTop = y
-      return
+      menuElement.scrollTop = y;
+      return;
     }
-    const offsetBottom = y + selectedElement.offsetHeight
+    const offsetBottom = y + selectedElement.offsetHeight;
     if (offsetBottom > menuElement.scrollTop + menuElement.offsetHeight) {
-      menuElement.scrollTop = offsetBottom - menuElement.offsetHeight
+      menuElement.scrollTop = offsetBottom - menuElement.offsetHeight;
     }
-  }, [])
+  }, []);
 
   const updateEditedValue = useCallback(
     function (editedValue: string): void {
-      const newId = getIdByValue(options, editedValue)
+      const newId = getIdByValue(options, editedValue);
       if (newId === INVALID_ID) {
         // `newValue` does not match any option in `options`
-        setEditedValue(editedValue)
-        setSelectedId(INVALID_ID)
-        updateScrollPosition(INVALID_ID)
-        return
+        setEditedValue(editedValue);
+        setSelectedId(INVALID_ID);
+        updateScrollPosition(INVALID_ID);
+        return;
       }
       // `newValue` matches one of the options in `options`
-      setEditedValue(EMPTY_STRING)
-      setSelectedId(newId)
-      updateScrollPosition(newId)
+      setEditedValue(EMPTY_STRING);
+      setSelectedId(newId);
+      updateScrollPosition(newId);
     },
     [options, updateScrollPosition]
-  )
+  );
 
   const handleFocus = useCallback(
     function (event: JSX.TargetedFocusEvent<HTMLInputElement>): void {
-      setIsMenuVisible(true)
+      setIsMenuVisible(true);
       updateMenuElementMaxHeight(
         getCurrentFromRef(rootElementRef),
         getCurrentFromRef(menuElementRef),
         top
-      )
-      setOriginalValue(value)
-      updateEditedValue(value)
-      const inputElement = event.currentTarget
-      inputElement.focus()
-      inputElement.select()
+      );
+      setOriginalValue(value);
+      updateEditedValue(value);
+      const inputElement = event.currentTarget;
+      inputElement.focus();
+      inputElement.select();
     },
     [top, updateEditedValue, value]
-  )
+  );
 
   const handleInput = useCallback(
     function (event: JSX.TargetedEvent<HTMLInputElement>): void {
-      const newValue = event.currentTarget.value
-      updateEditedValue(newValue)
-      onValueInput(newValue, name)
-      onInput(event)
+      const newValue = event.currentTarget.value;
+      updateEditedValue(newValue);
+      onValueInput(newValue, name);
+      onInput(event);
     },
     [name, onInput, onValueInput, updateEditedValue]
-  )
+  );
 
   const handleKeyDown = useCallback(
     function (event: JSX.TargetedKeyboardEvent<HTMLInputElement>): void {
-      const inputElement = event.currentTarget
-      const key = event.key
+      const inputElement = event.currentTarget;
+      const key = event.key;
       if (key === 'ArrowUp' || key === 'ArrowDown') {
-        event.preventDefault()
+        event.preventDefault();
         if (options.length === 0) {
-          return
+          return;
         }
         const newId =
           key === 'ArrowUp'
             ? computePreviousId(options, selectedId)
-            : computeNextId(options, selectedId)
+            : computeNextId(options, selectedId);
         if (newId === INVALID_ID) {
           // Reached beginning/end of list of `options`, so just restore `savedValue`
-          setSelectedId(INVALID_ID)
-          inputElement.value = editedValue
-          onValueInput(editedValue, name)
-          onInput(event)
-          updateScrollPosition(INVALID_ID)
-          return
+          setSelectedId(INVALID_ID);
+          inputElement.value = editedValue;
+          onValueInput(editedValue, name);
+          onInput(event);
+          updateScrollPosition(INVALID_ID);
+          return;
         }
         // Set the selected option to `newId`, and update `value`
-        setSelectedId(newId)
-        updateScrollPosition(newId)
-        const newOptionValue = findOptionValueById(options, newId)
+        setSelectedId(newId);
+        updateScrollPosition(newId);
+        const newOptionValue = findOptionValueById(options, newId);
         if (newOptionValue === null) {
-          throw new Error('Invariant violation') // `newId` is valid
+          throw new Error('Invariant violation'); // `newId` is valid
         }
-        const newValue = newOptionValue.value
-        inputElement.value = newValue
-        onValueInput(newValue, name)
-        onInput(event)
-        inputElement.select()
-        return
+        const newValue = newOptionValue.value;
+        inputElement.value = newValue;
+        onValueInput(newValue, name);
+        onInput(event);
+        inputElement.select();
+        return;
       }
       if (key === 'Enter' || key === 'Escape' || key === 'Tab') {
-        event.preventDefault()
+        event.preventDefault();
         if (propagateEscapeKeyDown === false) {
-          event.stopPropagation()
+          event.stopPropagation();
         }
         if (key === 'Escape' && revertOnEscapeKeyDown === true) {
-          inputElement.value = originalValue
-          const inputEvent = document.createEvent('Event')
-          inputEvent.initEvent('input', true, true)
-          inputElement.dispatchEvent(inputEvent)
+          inputElement.value = originalValue;
+          const inputEvent = document.createEvent('Event');
+          inputEvent.initEvent('input', true, true);
+          inputElement.dispatchEvent(inputEvent);
         }
-        triggerBlur()
-        return
+        triggerBlur();
+        return;
       }
       if (strict === false) {
-        return
+        return;
       }
       if (event.ctrlKey === true || event.metaKey === true) {
-        return
+        return;
       }
       if (isKeyCodeCharacterGenerating(event.keyCode) === true) {
         // Piece together `newValue`, and stop the `keyDown` event if `newValue` is invalid
-        const newValue = computeNextValue(inputElement, event.key)
+        const newValue = computeNextValue(inputElement, event.key);
         if (isValidValue(options, newValue) === false) {
-          event.preventDefault()
+          event.preventDefault();
         }
       }
     },
@@ -252,75 +253,75 @@ export function TextboxAutocomplete<Name extends string>({
       selectedId,
       strict,
       triggerBlur,
-      updateScrollPosition
+      updateScrollPosition,
     ]
-  )
+  );
 
   const handlePaste = useCallback(
     function (event: JSX.TargetedClipboardEvent<HTMLInputElement>): void {
       if (strict === false) {
-        return
+        return;
       }
       if (event.clipboardData === null) {
-        throw new Error('`event.clipboardData` is `null`')
+        throw new Error('`event.clipboardData` is `null`');
       }
       const newValue = computeNextValue(
         event.currentTarget,
         event.clipboardData.getData('Text')
-      )
+      );
       if (isValidValue(options, newValue) === false) {
-        event.preventDefault()
+        event.preventDefault();
       }
     },
     [options, strict]
-  )
+  );
 
   const handleOptionChange = useCallback(
     function (event: JSX.TargetedEvent<HTMLInputElement>): void {
       const newId = event.currentTarget.getAttribute(
         ITEM_ID_DATA_ATTRIBUTE_NAME
-      ) as string
+      ) as string;
       // Set the selected option to `newId`, and update `value`
-      setSelectedId(newId)
-      const newOptionValue = findOptionValueById(options, newId)
+      setSelectedId(newId);
+      const newOptionValue = findOptionValueById(options, newId);
       if (newOptionValue === null) {
-        throw new Error('Invariant violation') // `newId` is valid
+        throw new Error('Invariant violation'); // `newId` is valid
       }
-      const inputElement = getCurrentFromRef(inputElementRef)
-      inputElement.value = newOptionValue.value
-      const inputEvent = document.createEvent('Event')
-      inputEvent.initEvent('input', true, true)
-      inputElement.dispatchEvent(inputEvent)
-      triggerBlur()
+      const inputElement = getCurrentFromRef(inputElementRef);
+      inputElement.value = newOptionValue.value;
+      const inputEvent = document.createEvent('Event');
+      inputEvent.initEvent('input', true, true);
+      inputElement.dispatchEvent(inputEvent);
+      triggerBlur();
     },
     [options, triggerBlur]
-  )
+  );
 
   const handleOptionMouseMove = useCallback(
     function (event: JSX.TargetedMouseEvent<HTMLInputElement>): void {
       const newId = event.currentTarget.getAttribute(
         ITEM_ID_DATA_ATTRIBUTE_NAME
-      ) as string
+      ) as string;
       if (newId !== selectedId) {
-        setSelectedId(newId)
+        setSelectedId(newId);
       }
     },
     [selectedId]
-  )
+  );
 
   const handleMouseDownOutside = useCallback(
     function (): void {
       if (isMenuVisible === false) {
-        return
+        return;
       }
-      triggerBlur()
+      triggerBlur();
     },
     [isMenuVisible, triggerBlur]
-  )
+  );
   useMouseDownOutside({
     onMouseDownOutside: handleMouseDownOutside,
-    ref: rootElementRef
-  })
+    ref: rootElementRef,
+  });
 
   return (
     <div
@@ -333,7 +334,7 @@ export function TextboxAutocomplete<Name extends string>({
           ? textboxStyles.hasBorder
           : null,
         typeof icon === 'undefined' ? null : textboxStyles.hasIcon,
-        disabled === true ? textboxStyles.disabled : null
+        disabled === true ? textboxStyles.disabled : null,
       ])}
     >
       <div class={textboxStyles.inner}>
@@ -364,23 +365,23 @@ export function TextboxAutocomplete<Name extends string>({
           class={createClassName([
             menuStyles.menu,
             disabled === true || isMenuVisible === false
-              ? menuStyles.hidden
+              ? menuStyles.displayNone
               : null,
             top === true
               ? textboxAutocompleteStyles.top
-              : textboxAutocompleteStyles.bottom
+              : textboxAutocompleteStyles.bottom,
           ])}
         >
           {options.map(function (option: Option, index: number): JSX.Element {
             if ('separator' in option) {
-              return <hr key={index} class={menuStyles.optionSeparator} />
+              return <hr key={index} class={menuStyles.optionSeparator} />;
             }
             if ('header' in option) {
               return (
                 <h1 key={index} class={menuStyles.optionHeader}>
                   {option.header}
                 </h1>
-              )
+              );
             }
             return (
               <label
@@ -392,7 +393,7 @@ export function TextboxAutocomplete<Name extends string>({
                     : null,
                   option.disabled !== true && option.id === selectedId
                     ? menuStyles.optionValueSelected
-                    : null
+                    : null,
                 ])}
               >
                 <input
@@ -416,12 +417,12 @@ export function TextboxAutocomplete<Name extends string>({
                 ) : null}
                 {option.value}
               </label>
-            )
+            );
           })}
         </div>
       </div>
     </div>
-  )
+  );
 }
 
 // Add an `id` attribute to all the `TextboxAutocompleteOptionValue` items in `options`
@@ -435,12 +436,12 @@ function createOptions(
     if ('value' in option) {
       const optionValueWithId: OptionValueWithId = {
         ...option,
-        id: `${index}`
-      }
-      return optionValueWithId
+        id: `${index}`,
+      };
+      return optionValueWithId;
     }
-    return option
-  })
+    return option;
+  });
 }
 
 function filterOptions(
@@ -449,29 +450,29 @@ function filterOptions(
   editedValue: string
 ): Array<Option> {
   if (value === EMPTY_STRING) {
-    return options
+    return options;
   }
-  const id = getIdByValue(options, value)
+  const id = getIdByValue(options, value);
   if (id === INVALID_ID) {
     // `value` does not match any option in `options`
     return options.filter(function (option: Option): boolean {
       if ('value' in option) {
-        return doesStringContainSubstring(option.value, value) === true
+        return doesStringContainSubstring(option.value, value) === true;
       }
-      return false
-    })
+      return false;
+    });
   }
   // `value` matches one of the options in `options`
   if (editedValue === EMPTY_STRING) {
-    return options
+    return options;
   }
   // Filter `options` by `editedValue`
   return options.filter(function (option: Option): boolean {
     if ('value' in option) {
-      return doesStringContainSubstring(option.value, editedValue) === true
+      return doesStringContainSubstring(option.value, editedValue) === true;
     }
-    return false
-  })
+    return false;
+  });
 }
 
 // Returns `true` if `string` contains `substring`, else `false`
@@ -479,7 +480,7 @@ function doesStringContainSubstring(
   string: string,
   substring: string
 ): boolean {
-  return string.toLowerCase().indexOf(substring.toLowerCase()) !== -1
+  return string.toLowerCase().indexOf(substring.toLowerCase()) !== -1;
 }
 
 // Returns the `id` of an `OptionValueWithId` in `options` with the given `value`
@@ -487,26 +488,26 @@ function getIdByValue(options: Array<Option>, value: string): Id {
   for (const option of options) {
     if ('value' in option) {
       if (option.value === value) {
-        return option.id
+        return option.id;
       }
     }
   }
-  return INVALID_ID
+  return INVALID_ID;
 }
 
 // Returns `true` if `value` is a substring of `options[i].value` in `options`, else `false`
 function isValidValue(options: Array<Option>, value: string): boolean {
   if (value === EMPTY_STRING) {
-    return true
+    return true;
   }
   for (const option of options) {
     if ('value' in option) {
       if (option.value.toLowerCase().indexOf(value.toLowerCase()) === 0) {
-        return true
+        return true;
       }
     }
   }
-  return false
+  return false;
 }
 
 // Returns the `OptionValueWithId` in `options` with the given `id`, else `null`
@@ -516,56 +517,56 @@ function findOptionValueById(
 ): null | OptionValueWithId {
   for (const option of options) {
     if ('id' in option && option.id === id) {
-      return option
+      return option;
     }
   }
-  return null
+  return null;
 }
 
 // Returns the index of the `OptionValueWithId` in `options` with the given `id`, else `-1`
 function getIndexById(options: Array<Option>, id: string): number {
-  let index = 0
+  let index = 0;
   for (const option of options) {
     if ('id' in option && option.id === id) {
-      return index
+      return index;
     }
-    index += 1
+    index += 1;
   }
-  return -1
+  return -1;
 }
 
 // Returns the `Id` of the `OptionValueWithId` _before_ the `OptionValueWithId` in `options` with the given `id`
 function computePreviousId(options: Array<Option>, id: Id): Id {
   if (id === INVALID_ID) {
-    const result = findOptionValueAtOrBeforeIndex(options, options.length - 1)
-    return result === null ? null : result.id
+    const result = findOptionValueAtOrBeforeIndex(options, options.length - 1);
+    return result === null ? null : result.id;
   }
-  const index = getIndexById(options, id)
+  const index = getIndexById(options, id);
   if (index === -1) {
-    throw new Error(`No option with \`id\` ${id}`)
+    throw new Error(`No option with \`id\` ${id}`);
   }
   if (index === 0) {
-    return null
+    return null;
   }
-  const result = findOptionValueAtOrBeforeIndex(options, index - 1)
-  return result === null ? null : result.id
+  const result = findOptionValueAtOrBeforeIndex(options, index - 1);
+  return result === null ? null : result.id;
 }
 
 // Returns the `Id` of the `OptionValueWithId` _after_ the `OptionValueWithId` in `options` with the given `id`
 function computeNextId(options: Array<Option>, id: Id): Id {
   if (id === INVALID_ID) {
-    const result = findOptionValueAtOrAfterIndex(options, 0)
-    return result === null ? null : result.id
+    const result = findOptionValueAtOrAfterIndex(options, 0);
+    return result === null ? null : result.id;
   }
-  const index = getIndexById(options, id)
+  const index = getIndexById(options, id);
   if (index === -1) {
-    throw new Error(`No option with \`id\` ${id}`)
+    throw new Error(`No option with \`id\` ${id}`);
   }
   if (index === options.length - 1) {
-    return null
+    return null;
   }
-  const result = findOptionValueAtOrAfterIndex(options, index + 1)
-  return result === null ? null : result.id
+  const result = findOptionValueAtOrAfterIndex(options, index + 1);
+  return result === null ? null : result.id;
 }
 
 // Returns the `OptionValueWithId` in `options` at or _before_ the `index`, else `null`
@@ -574,12 +575,12 @@ function findOptionValueAtOrBeforeIndex(
   index: number
 ): null | OptionValueWithId {
   if (index < 0) {
-    throw new Error('`index` < 0')
+    throw new Error('`index` < 0');
   }
   if (index > options.length - 1) {
-    throw new Error('`index` > `options.length` - 1')
+    throw new Error('`index` > `options.length` - 1');
   }
-  return findLastOptionValue(options.slice(0, index + 1))
+  return findLastOptionValue(options.slice(0, index + 1));
 }
 
 // Returns the `OptionValueWithId` in `options` at or _after_ the `index`, else `null`
@@ -588,12 +589,12 @@ function findOptionValueAtOrAfterIndex(
   index: number
 ): null | OptionValueWithId {
   if (index < 0) {
-    throw new Error('`index` < 0')
+    throw new Error('`index` < 0');
   }
   if (index > options.length - 1) {
-    throw new Error('`index` > `options.length` - 1')
+    throw new Error('`index` > `options.length` - 1');
   }
-  return findFirstOptionValue(options.slice(index))
+  return findFirstOptionValue(options.slice(index));
 }
 
 // Returns the first `OptionValueWithId` encountered in `options`, else `null`
@@ -602,15 +603,15 @@ function findFirstOptionValue(
 ): null | OptionValueWithId {
   for (const option of options) {
     if ('id' in option && option.disabled !== true) {
-      return option
+      return option;
     }
   }
-  return null
+  return null;
 }
 
 // Returns the last `OptionValueWithId` encountered in `options`, else `null`
 function findLastOptionValue(options: Array<Option>): null | OptionValueWithId {
-  return findFirstOptionValue(options.slice().reverse())
+  return findFirstOptionValue(options.slice().reverse());
 }
 
 function updateMenuElementMaxHeight(
@@ -618,13 +619,13 @@ function updateMenuElementMaxHeight(
   menuElement: HTMLDivElement,
   top: boolean
 ) {
-  const rootElementTop = rootElement.getBoundingClientRect().top
+  const rootElementTop = rootElement.getBoundingClientRect().top;
   const maxHeight =
     top === true
       ? rootElementTop - MENU_VERTICAL_MARGIN
       : window.innerHeight -
         rootElementTop -
         rootElement.offsetHeight -
-        MENU_VERTICAL_MARGIN
-  menuElement.style.maxHeight = `${maxHeight}px`
+        MENU_VERTICAL_MARGIN;
+  menuElement.style.maxHeight = `${maxHeight}px`;
 }
diff --git a/packages/ui/src/css/menu.module.css b/packages/ui/src/css/menu.module.css
index a65aa21a..63286db2 100644
--- a/packages/ui/src/css/menu.module.css
+++ b/packages/ui/src/css/menu.module.css
@@ -19,6 +19,10 @@
   visibility: hidden;
 }
 
+.displayNone {
+  display: none;
+}
+
 @media screen and (-webkit-min-device-pixel-ratio: 1.5),
   screen and (min-resolution: 1.5dppx) {
   .menu {