diff --git a/package-lock.json b/package-lock.json
index 3295d467..b7be4009 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,12 +1,12 @@
 {
   "name": "diet-diary",
-  "version": "2.26.3",
+  "version": "2.26.4",
   "lockfileVersion": 2,
   "requires": true,
   "packages": {
     "": {
       "name": "diet-diary",
-      "version": "2.26.3",
+      "version": "2.26.4",
       "workspaces": [
         "packages/parser"
       ],
diff --git a/package.json b/package.json
index 70556688..7de1a760 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "diet-diary",
-  "version": "2.26.3",
+  "version": "2.26.4",
   "private": true,
   "homepage": ".",
   "dependencies": {
diff --git a/src/components/input-form/FoodDescriptionComboBox.tsx b/src/components/input-form/FoodDescriptionComboBox.tsx
index d38a2feb..1f626f60 100644
--- a/src/components/input-form/FoodDescriptionComboBox.tsx
+++ b/src/components/input-form/FoodDescriptionComboBox.tsx
@@ -1,5 +1,5 @@
 import _ from "lodash";
-import { useEffect, useRef, useState } from "react";
+import { RefObject, useEffect, useRef, useState } from "react";
 import Dropdown from "react-bootstrap/Dropdown";
 import Form from "react-bootstrap/Form";
 import { Suggestion } from "../../features/suggestions/Suggestion";
@@ -62,6 +62,21 @@ interface Props {
   updateFoodDescriptionServing: (desc: string, serving?: Serving, bestChoice?: boolean) => void;
 }
 
+function useClickOutside(ref: RefObject<HTMLDivElement>, handler: () => void) {
+  useEffect(() => {
+    function handleClickOutside(event: MouseEvent) {
+      if (ref.current && !ref.current.contains(event.target as Node)) {
+        handler();
+      }
+    }
+
+    document.addEventListener('mousedown', handleClickOutside);
+    return () => {
+      document.removeEventListener('mousedown', handleClickOutside);
+    };
+  }, [ref, handler]);
+}
+
 export const FoodDescriptionComboBox = (props: Props) => {
 
   const { invalid } = props;
@@ -82,8 +97,11 @@ export const FoodDescriptionComboBox = (props: Props) => {
     if (invalid) { setToggle(false); }
   }, [invalid]);
 
+  const ref = useRef<HTMLDivElement>(null);
+  useClickOutside(ref, () => setToggle(false));
+
   return (
-    <Dropdown show={toggle} onSelect={() => setToggle(false)}>
+    <Dropdown ref={ref} show={toggle} onSelect={() => setToggle(false)}>
 
       <Form.Label htmlFor="inputFoodDescription">Food description</Form.Label>
       <Form.Control