From 08305717a37330c843749356e5d30e127e671095 Mon Sep 17 00:00:00 2001
From: Philipp Veller <mail@vellip.de>
Date: Fri, 3 Jan 2025 11:02:15 +0100
Subject: [PATCH] projects: add address search, zoom style and autocomplete
 component

---
 .../scss/components_user_facing/_alert.scss   |   4 +-
 .../scss/components_user_facing/_leaflet.scss |   5 +
 .../components_user_facing/_multi-select.scss |  45 +++-
 .../_projects-list.scss                       |  16 +-
 .../components_user_facing/_projects_map.scss |   4 +
 .../_projects_map_info.scss                   |  33 +++
 .../_projects_map_search.scss                 |   5 +
 .../components_user_facing/_typeahead.scss    |   1 +
 meinberlin/assets/scss/style_user_facing.scss |   3 +
 .../assets/scss/styles_user_facing/_base.scss |   5 +
 meinberlin/config/settings/base.py            |   2 +-
 .../react/contrib/forms/AutoComplete.jsx      | 123 +++++++++
 .../react/contrib/forms/MultiSelect.jsx       | 171 ++----------
 .../forms/__tests__/AutoComplete.jest.jsx     | 218 +++++++++++++++
 .../forms/__tests__/MultiSelect.jest.jsx      | 252 +++++++-----------
 .../forms/__tests__/useCombobox.jest.js       | 233 ++++++++++++++++
 meinberlin/react/contrib/forms/useCombobox.js | 177 ++++++++++++
 meinberlin/react/contrib/useDebounce.js       |  32 +++
 meinberlin/react/projects/ProjectMarker.jsx   |   2 +-
 meinberlin/react/projects/ProjectsMap.jsx     |  13 +-
 meinberlin/react/projects/ProjectsMapInfo.jsx |  37 +++
 .../react/projects/ProjectsMapSearch.jsx      |  98 +++++++
 package.json                                  |   1 +
 23 files changed, 1158 insertions(+), 322 deletions(-)
 create mode 100644 meinberlin/assets/scss/components_user_facing/_projects_map_info.scss
 create mode 100644 meinberlin/assets/scss/components_user_facing/_projects_map_search.scss
 create mode 100644 meinberlin/assets/scss/styles_user_facing/_base.scss
 create mode 100644 meinberlin/react/contrib/forms/AutoComplete.jsx
 create mode 100644 meinberlin/react/contrib/forms/__tests__/AutoComplete.jest.jsx
 create mode 100644 meinberlin/react/contrib/forms/__tests__/useCombobox.jest.js
 create mode 100644 meinberlin/react/contrib/forms/useCombobox.js
 create mode 100644 meinberlin/react/contrib/useDebounce.js
 create mode 100644 meinberlin/react/projects/ProjectsMapInfo.jsx
 create mode 100644 meinberlin/react/projects/ProjectsMapSearch.jsx

diff --git a/meinberlin/assets/scss/components_user_facing/_alert.scss b/meinberlin/assets/scss/components_user_facing/_alert.scss
index f91e51ea74..77a1772067 100644
--- a/meinberlin/assets/scss/components_user_facing/_alert.scss
+++ b/meinberlin/assets/scss/components_user_facing/_alert.scss
@@ -4,7 +4,7 @@
     background-color: $message-light-blue;
 }
 
-.alert__content {
+.a4-alert__content {
     padding: 1.125rem 2rem 1.125rem 1.125rem;
     margin: 0 auto;
     max-width: 81rem;
@@ -50,4 +50,4 @@
 
 .alert--small {
     padding: 0.5em;
-}
\ No newline at end of file
+}
diff --git a/meinberlin/assets/scss/components_user_facing/_leaflet.scss b/meinberlin/assets/scss/components_user_facing/_leaflet.scss
index c38dad63a5..1713286faa 100644
--- a/meinberlin/assets/scss/components_user_facing/_leaflet.scss
+++ b/meinberlin/assets/scss/components_user_facing/_leaflet.scss
@@ -32,3 +32,8 @@
     font-size: $font-size-sm;
   }
 }
+
+.leaflet-control.leaflet-bar.leaflet-control-zoom {
+  border: 2px solid $black;
+  border-radius: 0;
+}
diff --git a/meinberlin/assets/scss/components_user_facing/_multi-select.scss b/meinberlin/assets/scss/components_user_facing/_multi-select.scss
index 0003bd949f..fe3233816b 100644
--- a/meinberlin/assets/scss/components_user_facing/_multi-select.scss
+++ b/meinberlin/assets/scss/components_user_facing/_multi-select.scss
@@ -4,18 +4,51 @@
     .form-label {
         font-weight: bold;
     }
+
+    &:not(.multi-select--autocomplete) {
+        .multi-select__combobox {
+            background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA1MTIgNTEyIj48cGF0aCBkPSJNMjMzLjQgNDA2LjZjMTIuNSAxMi41IDMyLjggMTIuNSA0NS4zIDBsMTkyLTE5MmMxMi41LTEyLjUgMTIuNS0zMi44IDAtNDUuM3MtMzIuOC0xMi41LTQ1LjMgMEwyNTYgMzM4LjcgODYuNiAxNjkuNGMtMTIuNS0xMi41LTMyLjgtMTIuNS00NS4zIDBzLTEyLjUgMzIuOCAwIDQ1LjNsMTkyIDE5MnoiLz48L3N2Zz4=") !important;
+            background-repeat: no-repeat;
+            background-position: right 0.5em center;
+            background-size: 1em;
+            padding-right: 2em;
+        }
+    }
 }
 
-.multi-select__combobox {
+
+input.multi-select__combobox {
+    border: 0;
     line-height: normal;
-    background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA1MTIgNTEyIj48cGF0aCBkPSJNMjMzLjQgNDA2LjZjMTIuNSAxMi41IDMyLjggMTIuNSA0NS4zIDBsMTkyLTE5MmMxMi41LTEyLjUgMTIuNS0zMi44IDAtNDUuM3MtMzIuOC0xMi41LTQ1LjMgMEwyNTYgMzM4LjcgODYuNiAxNjkuNGMtMTIuNS0xMi41LTMyLjgtMTIuNS00NS4zIDBzLTEyLjUgMzIuOCAwIDQ1LjNsMTkyIDE5MnoiLz48L3N2Zz4=") !important;
-    background-repeat: no-repeat;
-    background-position: right 0.5em center;
-    background-size: 1em;
-    padding-right: 2em;
     text-overflow: ellipsis;
     white-space: nowrap;
     overflow: hidden;
+    min-height: 0;
+    padding: 0;
+
+    &:focus {
+        outline: 0;
+        border: 0;
+        box-shadow: none;
+    }
+}
+
+.multi-select__input-wrapper {
+    display: flex;
+    align-items: center;
+}
+
+.multi-select__input-wrapper:has(input:focus) {
+    outline: 2px solid Highlight;
+    outline: 5px auto -webkit-focus-ring-color;
+}
+
+.multi-select__before {
+    margin-right: 1em;
+}
+
+.multi-select__after {
+    margin-left: 1em;
 }
 
 .multi-select__container,
diff --git a/meinberlin/assets/scss/components_user_facing/_projects-list.scss b/meinberlin/assets/scss/components_user_facing/_projects-list.scss
index 1758622804..a7c2bc1e19 100644
--- a/meinberlin/assets/scss/components_user_facing/_projects-list.scss
+++ b/meinberlin/assets/scss/components_user_facing/_projects-list.scss
@@ -44,11 +44,9 @@
 }
 
 .projects-list__wrapper--combined {
-    height: 600px;
-
     @media screen and (min-width: $breakpoint-tablet) {
-        height: 1100px;
         display: flex;
+        position: relative;
     }
 
     .projects-list__list {
@@ -56,7 +54,16 @@
 
         @media screen and (min-width: $breakpoint-tablet) {
             display: block;
-            overflow: auto;
+        }
+    }
+
+    .projects-list__map {
+        height: 600px;
+
+        @media screen and (min-width: $breakpoint-tablet) {
+            position: sticky;
+            top: 65px;
+            height: 1100px;
         }
     }
 
@@ -65,7 +72,6 @@
         flex: 1;
     }
 
-    .projects-list__map,
     .modul-geomap,
     .geomap-main,
     .geomap-container,
diff --git a/meinberlin/assets/scss/components_user_facing/_projects_map.scss b/meinberlin/assets/scss/components_user_facing/_projects_map.scss
index ee2bad4baf..b9433de336 100644
--- a/meinberlin/assets/scss/components_user_facing/_projects_map.scss
+++ b/meinberlin/assets/scss/components_user_facing/_projects_map.scss
@@ -1,6 +1,7 @@
 .projects-map {
     height: 100%;
     margin: 0 -12px;
+    overflow: hidden;
 
     @media screen and (min-width: $breakpoint-tablet) {
         margin: 0;
@@ -57,3 +58,6 @@
     }
 }
 
+.projects-map__search.leaflet-control {
+    z-index: 1001;
+}
diff --git a/meinberlin/assets/scss/components_user_facing/_projects_map_info.scss b/meinberlin/assets/scss/components_user_facing/_projects_map_info.scss
new file mode 100644
index 0000000000..ac03070675
--- /dev/null
+++ b/meinberlin/assets/scss/components_user_facing/_projects_map_info.scss
@@ -0,0 +1,33 @@
+.projects-map-info {
+    font-size: $font-size-base;
+}
+
+.projects-map-info__wrapper {
+    margin: 10px;
+    bottom: 2em;
+    display: none;
+
+    .alert {
+        margin: 0;
+    }
+
+    .container,
+    .a4-alert__content {
+        margin: 0;
+        width: auto;
+    }
+
+    @media screen and (min-width: $breakpoint-tablet) {
+        display: block;
+    }
+}
+
+.projects-map-info--mobile {
+    @media screen and (min-width: $breakpoint-tablet) {
+        display: none;
+    }
+
+    .alert {
+        margin: 0;
+    }
+}
diff --git a/meinberlin/assets/scss/components_user_facing/_projects_map_search.scss b/meinberlin/assets/scss/components_user_facing/_projects_map_search.scss
new file mode 100644
index 0000000000..e325652ee0
--- /dev/null
+++ b/meinberlin/assets/scss/components_user_facing/_projects_map_search.scss
@@ -0,0 +1,5 @@
+.projects-map-search {
+    form {
+        margin-bottom: 0;
+    }
+}
diff --git a/meinberlin/assets/scss/components_user_facing/_typeahead.scss b/meinberlin/assets/scss/components_user_facing/_typeahead.scss
index 3319018444..4ca5238d68 100644
--- a/meinberlin/assets/scss/components_user_facing/_typeahead.scss
+++ b/meinberlin/assets/scss/components_user_facing/_typeahead.scss
@@ -13,6 +13,7 @@
     .rbt-menu .dropdown-item {
         color: $text-base;
         text-decoration: none;
+        display: block;
     }
 
     .rbt-input-multi .rbt-input-wrapper {
diff --git a/meinberlin/assets/scss/style_user_facing.scss b/meinberlin/assets/scss/style_user_facing.scss
index 1a54af1cb9..dcb5f868d2 100644
--- a/meinberlin/assets/scss/style_user_facing.scss
+++ b/meinberlin/assets/scss/style_user_facing.scss
@@ -19,6 +19,7 @@
 
 @import "styles_user_facing/form";
 @import "styles_user_facing/utility";
+@import "styles_user_facing/base";
 
 @import "components_user_facing/accordion-list";
 @import "components_user_facing/alert";
@@ -52,6 +53,8 @@
 @import "components_user_facing/icon_switch";
 @import "components_user_facing/projects-list";
 @import "components_user_facing/projects_map";
+@import "components_user_facing/projects_map_search";
+@import "components_user_facing/projects_map_info";
 @import "components_user_facing/leaflet";
 @import "components_user_facing/project-tile";
 @import "components_user_facing/status-bar";
diff --git a/meinberlin/assets/scss/styles_user_facing/_base.scss b/meinberlin/assets/scss/styles_user_facing/_base.scss
new file mode 100644
index 0000000000..9b43d7939f
--- /dev/null
+++ b/meinberlin/assets/scss/styles_user_facing/_base.scss
@@ -0,0 +1,5 @@
+// Using overflow: hidden (as used in the styleguide) causes position: sticky
+// to not work as expected. See https://www.terluinwebdesign.nl/en/blog/position-sticky-not-working-try-overflow-clip-not-overflow-hidden/
+body {
+    overflow: clip;
+}
diff --git a/meinberlin/config/settings/base.py b/meinberlin/config/settings/base.py
index 465999ea1b..018747a95b 100644
--- a/meinberlin/config/settings/base.py
+++ b/meinberlin/config/settings/base.py
@@ -497,7 +497,7 @@
 A4_MAP_BASEURL = "https://basemap.berlin.de/gdz_basemapde_vektor/styles/bm_web_col.json"
 A4_OPENMAPTILES_TOKEN = "9aVUrssbx7PKNUKo3WtXY6MqETI6Q336u5D142QS"
 A4_MAPBOX_TOKEN = ""
-
+A4_MAP_ATTRIBUTION = "&copy; 2024 basemap.de / BKG | Datenquellen: &copy; GeoBasis-DE"
 A4_PROJECT_TOPICS = "meinberlin.apps.contrib.enums.TopicEnum"
 
 A4_BLUEPRINT_TYPES = [
diff --git a/meinberlin/react/contrib/forms/AutoComplete.jsx b/meinberlin/react/contrib/forms/AutoComplete.jsx
new file mode 100644
index 0000000000..b2581d163e
--- /dev/null
+++ b/meinberlin/react/contrib/forms/AutoComplete.jsx
@@ -0,0 +1,123 @@
+import React, { useState } from 'react'
+import { classNames } from '../helpers'
+import useCombobox from './useCombobox'
+
+/*
+ * Returns the item at the given index in an array, wrapping around
+ * if index is out of bounds.
+ */
+export const getLoopedIndex = (array, index) => {
+  const length = array.length
+  const wrappedIndex = ((index % length) + length) % length
+  return array[wrappedIndex]
+}
+
+const defaultFilterFn = (choice, text) => choice.name.toLowerCase().includes(text.toLowerCase())
+
+/*
+  Choice formatting looks like:
+  { name: 'Swedish', value: 'sv' },
+  { name: 'English', value: 'en' }
+  Values need to be unique!
+ */
+export const AutoComplete = ({
+  label,
+  className,
+  liClassName,
+  comboboxClassName,
+  choices,
+  hideLabel,
+  onChangeInput,
+  filterFn,
+  placeholder,
+  before,
+  after,
+  ...comboboxProps
+}) => {
+  const {
+    opened,
+    labelId,
+    activeItems,
+    listboxAttrs,
+    comboboxAttrs,
+    getChoicesAttr
+  } = useCombobox({
+    choices,
+    ...comboboxProps,
+    isAutoComplete: true
+  })
+  const [text, setText] = useState('')
+
+  const classes = classNames(
+    'form-control input__element multi-select__container',
+    opened && 'multi-select__container--opened',
+    className
+  )
+  const comboboxClasses = classNames(
+    'form-control multi-select__combobox',
+    comboboxClassName
+  )
+
+  const actualFilterFn = filterFn || defaultFilterFn
+  const filteredChoices = text !== '' ? choices.filter(choice => actualFilterFn(choice, text)) : choices
+
+  const onChangeHandler = (e) => {
+    setText(e.target.value)
+    onChangeInput?.(e.target.value)
+  }
+
+  return (
+    <div className="form-group multi-select multi-select--autocomplete">
+      <p id={labelId} className={classNames('label', hideLabel && 'aural')}>
+        {label}
+      </p>
+      <div className="multi-select__input-wrapper form-control">
+        {before && <div className="multi-select__before">{before}</div>}
+        {comboboxProps.isMultiple && (
+          <div className="multi-select__selected">
+            {activeItems.map((choice) => choice.name).join(', ')}
+          </div>
+        )}
+        <input
+          type="text"
+          value={text}
+          onChange={onChangeHandler}
+          placeholder={placeholder}
+          className={comboboxClasses}
+          {...comboboxAttrs}
+        />
+        {after && <div className="multi-select__after">{after}</div>}
+      </div>
+      {filteredChoices.length > 0 && (
+        <ul className={classes} {...listboxAttrs}>
+          {
+          filteredChoices.map((choice) => {
+            const { active, focused, ...attrs } = getChoicesAttr(choice)
+            const liClasses = classNames(
+              liClassName,
+              'multi-select__option',
+              active && 'multi-select__option--active',
+              focused && 'multi-select__option--focus'
+            )
+
+            return (
+              // No keyboard event is needed here. Keyboard management happens
+              // in the combobox element, where the focus is kept at all times.
+              // see https://www.w3.org/WAI/ARIA/apg/patterns/combobox/
+              // eslint-disable-next-line jsx-a11y/click-events-have-key-events
+              <li
+                key={choice.value}
+                className={liClasses}
+                {...attrs}
+              >
+                <span>{choice.name}</span>
+                {active && <i className="bicon bicon-check" aria-hidden="true" />}
+              </li>
+            )
+          })
+        }
+        </ul>
+      )}
+    </div>
+  )
+}
diff --git a/meinberlin/react/contrib/forms/MultiSelect.jsx b/meinberlin/react/contrib/forms/MultiSelect.jsx
index 700ccf216a..b9516af854 100644
--- a/meinberlin/react/contrib/forms/MultiSelect.jsx
+++ b/meinberlin/react/contrib/forms/MultiSelect.jsx
@@ -1,33 +1,6 @@
-import React, { useId, useRef, useState } from 'react'
+import React from 'react'
 import { classNames } from '../helpers'
-
-/*
- * Returns the item at the given index in an array, wrapping around
- * if index is out of bounds.
- */
-export const getLoopedIndex = (array, index) => {
-  const length = array.length
-  const wrappedIndex = ((index % length) + length) % length
-  return array[wrappedIndex]
-}
-
-export const toggleValue = (value, values) => {
-  const shouldRemove = values.includes(value)
-  let newValues = [...values, value]
-  if (shouldRemove) {
-    newValues = values.filter(item => item !== value)
-  }
-  return newValues
-}
-
-function getTargets (choices, focusedIndex) {
-  return {
-    first: choices[0],
-    last: choices[choices.length - 1],
-    next: typeof focusedIndex === 'number' ? getLoopedIndex(choices, focusedIndex + 1) : null,
-    prev: typeof focusedIndex === 'number' ? getLoopedIndex(choices, focusedIndex - 1) : null
-  }
-}
+import useCombobox from './useCombobox'
 
 /*
   Choice formatting looks like:
@@ -47,20 +20,12 @@ export const MultiSelect = ({
   defaultValue = [],
   ...rest
 }) => {
-  const defaultValueArray = Array.isArray(defaultValue) ? defaultValue : [defaultValue]
-  // Use values prop if provided (controlled), otherwise use internal state (uncontrolled)
-  const [internalValue, setInternalValue] = useState(defaultValueArray)
-  const active = values ?? internalValue
-
-  const [focused, setFocused] = useState(null)
-  const [opened, setOpened] = useState(false)
-
-  const comboboxRef = useRef(null)
-  const typed = useRef('')
-
-  const containerId = useId()
-  const labelId = useId()
-
+  const { opened, labelId, activeItems, listboxAttrs, comboboxAttrs, getChoicesAttr } = useCombobox({
+    choices,
+    values,
+    defaultValue,
+    onChange
+  })
   const classes = classNames(
     'form-control input__element multi-select__container',
     opened && 'multi-select__container--opened',
@@ -71,122 +36,23 @@ export const MultiSelect = ({
     comboboxClassName
   )
 
-  const activeItems = choices.filter(choice => active.includes(choice.value))
-  const focusedItem = choices.find((choice) => choice.value === focused)
-  const focusedIndex = choices.findIndex(choice => choice.value === focused)
-  const targets = getTargets(choices, focusedIndex)
-
-  const toggleOption = (v) => {
-    const newValues = toggleValue(v, active)
-    if (values === undefined) setInternalValue(newValues)
-    if (onChange) onChange(newValues)
-  }
-
   return (
     <div className="form-group multi-select">
       <p id={labelId} className="label">
         {label}
       </p>
-      <div
-        role="combobox"
-        className={comboboxClasses}
-        aria-controls={containerId}
-        aria-expanded={opened}
-        aria-activedescendant={focusedItem?.value}
-        aria-labelledby={labelId}
-        aria-haspopup
-        tabIndex={0}
-        ref={comboboxRef}
-        onClick={() => {
-          if (!opened) {
-            setFocused(targets.first.value)
-          }
-          setOpened(!opened)
-        }}
-        onBlur={(e) => {
-          if (e.relatedTarget?.classList.contains('multi-select__option')) {
-            // This fixes a firefox bug where the focus is not set if calling
-            // .focus() without a timeout and the focus doesn't go back to the
-            // combobox in that case.
-            setTimeout(() => {
-              comboboxRef.current?.focus()
-            }, 10)
-            return
-          }
-          setOpened(false)
-        }}
-        onKeyDown={(e) => {
-          const key = e.key
-          switch (key) {
-            case ' ':
-              e.preventDefault()
-              if (!opened) {
-                setFocused(targets.first.value)
-                setOpened(true)
-              } else {
-                toggleOption(focused)
-              }
-              break
-            case 'Enter':
-              e.preventDefault()
-
-              if (opened && focused) {
-                toggleOption(focused)
-              } else if (!opened) {
-                setFocused(targets.first.value)
-              }
-              setOpened(!opened)
-              break
-            case 'Escape':
-              setOpened(false)
-              break
-            case 'ArrowUp':
-              e.preventDefault()
-              setFocused(targets.prev?.value)
-              break
-            case 'ArrowDown':
-              e.preventDefault()
-              setFocused(targets.next?.value)
-              if (!opened) {
-                setFocused(targets.first.value)
-                setOpened(true)
-              }
-              break
-            case 'Home':
-              e.preventDefault()
-              setFocused(targets.first.value)
-              break
-            case 'End':
-              e.preventDefault()
-              setFocused(targets.last.value)
-              break
-          }
-          if (key.length === 1) {
-            typed.current += key
-            const filtered = choices.filter(choice => choice.name.toLowerCase().startsWith(typed.current.toLowerCase()))
-            if (filtered.length) {
-              setFocused(filtered[0].value)
-            }
-            setTimeout(() => { typed.current = '' }, 200)
-          }
-        }}
-      >
+      <div className={comboboxClasses} {...comboboxAttrs}>
         {activeItems.length ? activeItems.map(item => item.name).join(', ') : placeholder}
       </div>
-      <ul
-        role="listbox"
-        aria-multiselectable="true"
-        id={containerId}
-        className={classes}
-        {...rest}
-      >
+      <ul className={classes} {...listboxAttrs} {...rest}>
         {
           choices.map((choice) => {
+            const { active, focused, ...attrs } = getChoicesAttr(choice)
             const liClasses = classNames(
               liClassName,
               'multi-select__option',
-              active.includes(choice.value) && 'multi-select__option--active',
-              focusedItem?.value === choice.value && 'multi-select__option--focus'
+              active && 'multi-select__option--active',
+              focused && 'multi-select__option--focus'
             )
 
             return (
@@ -196,18 +62,11 @@ export const MultiSelect = ({
               // eslint-disable-next-line jsx-a11y/click-events-have-key-events
               <li
                 key={choice.value}
-                role="option"
-                aria-selected={active.includes(choice.value)}
-                onClick={() => {
-                  toggleOption(choice.value)
-                  setFocused(choice.value)
-                }}
                 className={liClasses}
-                ref={focusedItem?.value === choice.value ? (node) => node?.scrollIntoView({ block: 'nearest' }) : null}
-                tabIndex={-1}
+                {...attrs}
               >
                 <span>{choice.name}</span>
-                {active.includes(choice.value) && <i className="bicon bicon-check" aria-hidden="true" />}
+                {active && <i className="bicon bicon-check" aria-hidden="true" />}
               </li>
             )
           })
diff --git a/meinberlin/react/contrib/forms/__tests__/AutoComplete.jest.jsx b/meinberlin/react/contrib/forms/__tests__/AutoComplete.jest.jsx
new file mode 100644
index 0000000000..e13a72aa03
--- /dev/null
+++ b/meinberlin/react/contrib/forms/__tests__/AutoComplete.jest.jsx
@@ -0,0 +1,218 @@
+import React from 'react'
+import { render, screen, fireEvent } from '@testing-library/react'
+import { AutoComplete } from '../AutoComplete'
+import useCombobox from '../useCombobox'
+
+jest.mock('../useCombobox')
+
+describe('AutoComplete', () => {
+  const choices = [
+    { name: 'Swedish', value: 'sv' },
+    { name: 'English', value: 'en' },
+    { name: 'German', value: 'de' }
+  ]
+
+  const defaultMockHookReturn = {
+    opened: false,
+    labelId: 'test-label-id',
+    activeItems: [],
+    listboxAttrs: {
+      role: 'listbox',
+      'aria-multiselectable': 'true'
+    },
+    comboboxAttrs: {
+      role: 'combobox',
+      'aria-haspopup': 'true',
+      'aria-expanded': false,
+      'aria-labelledby': 'test-label-id'
+    },
+    getChoicesAttr: (choice) => ({
+      role: 'option',
+      'aria-selected': false,
+      active: false,
+      focused: false
+    })
+  }
+
+  beforeEach(() => {
+    useCombobox.mockImplementation(() => defaultMockHookReturn)
+  })
+
+  afterEach(() => {
+    jest.clearAllMocks()
+  })
+
+  test('renders with label and input', () => {
+    render(
+      <AutoComplete
+        label="Search Languages"
+        choices={choices}
+        placeholder="Type to search"
+      />
+    )
+
+    expect(screen.getByText('Search Languages')).toBeInTheDocument()
+    expect(screen.getByPlaceholderText('Type to search')).toBeInTheDocument()
+  })
+
+  test('handles text input and filtering', () => {
+    const onChangeInput = jest.fn()
+    render(
+      <AutoComplete
+        label="Search Languages"
+        choices={choices}
+        onChangeInput={onChangeInput}
+      />
+    )
+
+    const input = screen.getByRole('combobox')
+    fireEvent.change(input, { target: { value: 'en' } })
+
+    expect(input.value).toBe('en')
+    expect(onChangeInput).toHaveBeenCalledWith('en')
+    expect(screen.getByText('English')).toBeInTheDocument()
+    expect(screen.queryByText('Swedish')).not.toBeInTheDocument()
+  })
+
+  test('applies custom filter function', () => {
+    const customFilter = jest.fn((choice, text) => choice.value.includes(text))
+    render(
+      <AutoComplete
+        label="Search Languages"
+        choices={choices}
+        filterFn={customFilter}
+      />
+    )
+
+    const input = screen.getByRole('combobox')
+    fireEvent.change(input, { target: { value: 'sv' } })
+
+    expect(customFilter).toHaveBeenCalled()
+  })
+
+  test('hides label when hideLabel is true', () => {
+    render(
+      <AutoComplete
+        label="Search Languages"
+        choices={choices}
+        hideLabel
+      />
+    )
+
+    const label = screen.getByText('Search Languages')
+    expect(label).toHaveClass('aural')
+  })
+
+  test('renders before and after elements', () => {
+    render(
+      <AutoComplete
+        label="Search Languages"
+        choices={choices}
+        before={<div data-testid="before">Before</div>}
+        after={<div data-testid="after">After</div>}
+      />
+    )
+
+    expect(screen.getByTestId('before')).toBeInTheDocument()
+    expect(screen.getByTestId('after')).toBeInTheDocument()
+  })
+
+  test('displays multiple selected items', () => {
+    useCombobox.mockImplementation(() => ({
+      ...defaultMockHookReturn,
+      activeItems: [
+        { name: 'English', value: 'en' },
+        { name: 'German', value: 'de' }
+      ]
+    }))
+
+    render(
+      <AutoComplete
+        label="Search Languages"
+        choices={choices}
+        isMultiple
+      />
+    )
+
+    expect(screen.getByText('English, German')).toBeInTheDocument()
+  })
+
+  test('applies custom class names', () => {
+    render(
+      <AutoComplete
+        label="Search Languages"
+        choices={choices}
+        className="custom-class"
+        comboboxClassName="custom-combobox"
+        liClassName="custom-li"
+      />
+    )
+
+    expect(screen.getByRole('listbox')).toHaveClass('custom-class')
+    expect(screen.getByRole('combobox')).toHaveClass('custom-combobox')
+    const options = screen.getAllByRole('option')
+    options.forEach(option => {
+      expect(option).toHaveClass('custom-li')
+    })
+  })
+
+  test('shows check icon for active items', () => {
+    useCombobox.mockImplementation(() => ({
+      ...defaultMockHookReturn,
+      getChoicesAttr: (choice) => ({
+        ...defaultMockHookReturn.getChoicesAttr(choice),
+        active: choice.value === 'en'
+      })
+    }))
+
+    render(
+      <AutoComplete
+        label="Search Languages"
+        choices={choices}
+      />
+    )
+
+    const checkIcon = screen.getByText('English').closest('li').querySelector('.bicon-check')
+    expect(checkIcon).toBeInTheDocument()
+  })
+
+  test('hides listbox when no filtered choices', () => {
+    render(
+      <AutoComplete
+        label="Search Languages"
+        choices={choices}
+      />
+    )
+
+    const input = screen.getByRole('combobox')
+    fireEvent.change(input, { target: { value: 'xyz' } })
+
+    expect(screen.queryByRole('listbox')).not.toBeInTheDocument()
+  })
+
+  test('passes isAutoComplete prop to useCombobox', () => {
+    render(
+      <AutoComplete
+        label="Search Languages"
+        choices={choices}
+      />
+    )
+
+    expect(useCombobox).toHaveBeenCalledWith(
+      expect.objectContaining({
+        isAutoComplete: true
+      })
+    )
+  })
+
+  test('handles empty choices array', () => {
+    render(
+      <AutoComplete
+        label="Search Languages"
+        choices={[]}
+      />
+    )
+
+    expect(screen.queryByRole('listbox')).not.toBeInTheDocument()
+  })
+})
diff --git a/meinberlin/react/contrib/forms/__tests__/MultiSelect.jest.jsx b/meinberlin/react/contrib/forms/__tests__/MultiSelect.jest.jsx
index c18d4245f5..a801c6c6d4 100644
--- a/meinberlin/react/contrib/forms/__tests__/MultiSelect.jest.jsx
+++ b/meinberlin/react/contrib/forms/__tests__/MultiSelect.jest.jsx
@@ -1,6 +1,9 @@
 import React from 'react'
-import { render, screen, fireEvent, waitFor } from '@testing-library/react'
-import { getLoopedIndex, MultiSelect, toggleValue } from '../MultiSelect'
+import { render, screen } from '@testing-library/react'
+import { MultiSelect } from '../MultiSelect'
+import useCombobox from '../useCombobox'
+
+jest.mock('../useCombobox')
 
 describe('MultiSelect', () => {
   const choices = [
@@ -9,195 +12,144 @@ describe('MultiSelect', () => {
     { name: 'German', value: 'de' }
   ]
 
-  const openedClass = 'multi-select__container--opened'
+  const defaultMockHookReturn = {
+    opened: false,
+    labelId: 'test-label-id',
+    activeItems: [],
+    listboxAttrs: {
+      role: 'listbox',
+      'aria-multiselectable': 'true'
+    },
+    comboboxAttrs: {
+      role: 'combobox',
+      'aria-haspopup': 'true',
+      'aria-expanded': false,
+      'aria-labelledby': 'test-label-id'
+    },
+    getChoicesAttr: (choice) => ({
+      role: 'option',
+      'aria-selected': false,
+      active: false,
+      focused: false
+    })
+  }
+
+  beforeEach(() => {
+    useCombobox.mockImplementation(() => defaultMockHookReturn)
+  })
+
+  afterEach(() => {
+    jest.clearAllMocks()
+  })
 
-  test('is displaying with label and options', () => {
+  test('renders with label and options', () => {
     render(
       <MultiSelect label="My Label" choices={choices} />
     )
 
-    const combobox = screen.getByLabelText(/My Label/)
-    expect(combobox).toHaveRole('combobox')
-
-    const options = screen.getAllByRole('option')
-    expect(options).toHaveLength(3)
-
+    expect(screen.getByText('My Label')).toBeInTheDocument()
     expect(screen.getByText('Swedish')).toBeInTheDocument()
     expect(screen.getByText('English')).toBeInTheDocument()
     expect(screen.getByText('German')).toBeInTheDocument()
   })
 
-  test('is changing values on click', () => {
-    const onChange = jest.fn()
-    render(
-      <MultiSelect label="My Label" choices={choices} onChange={onChange} />
-    )
-
-    const combobox = screen.getByLabelText(/My Label/)
-    const listbox = screen.getByRole('listbox')
-
-    fireEvent.click(combobox)
-    expect(listbox).toHaveClass(openedClass)
+  test('displays active items when selected', () => {
+    useCombobox.mockImplementation(() => ({
+      ...defaultMockHookReturn,
+      activeItems: [{ name: 'English', value: 'en' }]
+    }))
 
-    fireEvent.click(screen.getByText('English'))
-    expect(onChange).toHaveBeenCalledWith(['en'])
-  })
-
-  test('is closing on blur', () => {
     render(
-      <MultiSelect label="My Label" choices={choices} />
+      <MultiSelect
+        label="My Label"
+        choices={choices}
+        placeholder="Select language"
+      />
     )
 
-    const combobox = screen.getByLabelText(/My Label/)
-    const listbox = screen.getByRole('listbox')
-
-    fireEvent.click(combobox)
-    expect(listbox).toHaveClass(openedClass)
-
-    fireEvent.blur(combobox, { relatedTarget: null })
-    expect(listbox).not.toHaveClass(openedClass)
+    expect(screen.getAllByText('English')).toHaveLength(2)
   })
 
-  test('is opening on space', async () => {
+  test('displays placeholder when no items are selected', () => {
     render(
-      <MultiSelect label="My Label" choices={choices} />
+      <MultiSelect
+        label="My Label"
+        choices={choices}
+        placeholder="Select language"
+      />
     )
 
-    const combobox = screen.getByLabelText(/My Label/)
-    const listbox = screen.getByRole('listbox')
-
-    expect(listbox).not.toHaveClass(openedClass)
-    fireEvent.focus(combobox)
-    fireEvent.keyDown(combobox, { key: ' ' })
-    expect(listbox).toHaveClass(openedClass)
+    expect(screen.getByText('Select language')).toBeInTheDocument()
   })
 
-  test('is selecting with space and enter', () => {
-    render(
-      <MultiSelect label="My Label" choices={choices} />
+  test('applies correct classes', () => {
+    useCombobox.mockImplementation(() => ({
+      ...defaultMockHookReturn,
+      opened: true
+    }))
+
+    const { container } = render(
+      <MultiSelect
+        label="My Label"
+        choices={choices}
+        comboboxClassName="combobox-custom"
+        className="listbox-custom"
+        liClassName="li-custom"
+      />
     )
 
-    const combobox = screen.getByLabelText(/My Label/)
-
-    fireEvent.focus(combobox)
-    fireEvent.keyDown(combobox, { key: 'Enter' })
-    const firstOption = screen.getAllByRole('option')[0]
-    expect(combobox).toHaveAttribute('aria-activedescendant', 'sv')
-    expect(firstOption).toHaveAttribute('aria-selected', 'false')
+    const combobox = container.querySelector('.combobox-custom')
+    expect(combobox).toBeInTheDocument()
 
-    fireEvent.keyDown(combobox, { key: 'Enter' })
-    expect(firstOption).toHaveAttribute('aria-selected', 'true')
+    const listbox = container.querySelector('.listbox-custom')
+    expect(listbox).toBeInTheDocument()
 
-    fireEvent.keyDown(combobox, { key: ' ' })
-    fireEvent.keyDown(combobox, { key: ' ' })
-    expect(firstOption).toHaveAttribute('aria-selected', 'false')
+    const lis = container.querySelectorAll('.li-custom')
+    expect(lis).toHaveLength(3)
   })
 
-  test('is closing with escape', () => {
-    render(
-      <MultiSelect label="My Label" choices={choices} />
-    )
+  test('renders check icon for active items', () => {
+    useCombobox.mockImplementation(() => ({
+      ...defaultMockHookReturn,
+      getChoicesAttr: (choice) => ({
+        ...defaultMockHookReturn.getChoicesAttr(choice),
+        active: choice.value === 'en'
+      })
+    }))
 
-    const combobox = screen.getByLabelText(/My Label/)
-    const listbox = screen.getByRole('listbox')
-
-    fireEvent.focus(combobox)
-    fireEvent.keyDown(combobox, { key: 'Enter' })
-    expect(listbox).toHaveClass(openedClass)
-
-    fireEvent.keyDown(combobox, { key: 'Escape' })
-    expect(listbox).not.toHaveClass(openedClass)
-  })
-
-  test('is navigating with arrows', () => {
     render(
       <MultiSelect label="My Label" choices={choices} />
     )
 
-    const combobox = screen.getByLabelText(/My Label/)
-
-    fireEvent.focus(combobox)
-    fireEvent.keyDown(combobox, { key: 'ArrowDown' })
-    expect(combobox).toHaveAttribute('aria-activedescendant', 'sv')
-
-    fireEvent.keyDown(combobox, { key: 'ArrowDown' })
-    expect(combobox).toHaveAttribute('aria-activedescendant', 'en')
-
-    fireEvent.keyDown(combobox, { key: 'ArrowUp' })
-    fireEvent.keyDown(combobox, { key: 'ArrowUp' })
-    expect(combobox).toHaveAttribute('aria-activedescendant', 'de')
-  })
-
-  test('is navigating with home and end', () => {
-    render(
-      <MultiSelect label="My Label" choices={choices} />
-    )
-
-    const combobox = screen.getByLabelText(/My Label/)
-
-    fireEvent.focus(combobox)
-    fireEvent.keyDown(combobox, { key: 'ArrowDown' })
-    expect(combobox).toHaveAttribute('aria-activedescendant', 'sv')
-
-    fireEvent.keyDown(combobox, { key: 'End' })
-    expect(combobox).toHaveAttribute('aria-activedescendant', 'de')
-
-    fireEvent.keyDown(combobox, { key: 'Home' })
-    expect(combobox).toHaveAttribute('aria-activedescendant', 'sv')
+    const checkIcon = screen.getByText('English').closest('li').querySelector('.bicon-check')
+    expect(checkIcon).toBeInTheDocument()
   })
 
-  test('is selecting when typing', () => {
+  test('passes custom className to combobox', () => {
     render(
-      <MultiSelect label="My Label" choices={choices} />
+      <MultiSelect
+        label="My Label"
+        choices={choices}
+        comboboxClassName="custom-combobox-class"
+      />
     )
 
-    const combobox = screen.getByLabelText(/My Label/)
-
-    fireEvent.focus(combobox)
-    fireEvent.keyDown(combobox, { key: 'ArrowDown' })
-    expect(combobox).toHaveAttribute('aria-activedescendant', 'sv')
-
-    fireEvent.keyDown(combobox, { key: 'G' })
-    fireEvent.keyDown(combobox, { key: 'E' })
-    expect(combobox).toHaveAttribute('aria-activedescendant', 'de')
+    const combobox = screen.getByRole('combobox')
+    expect(combobox).toHaveClass('custom-combobox-class')
   })
 
-  test('keeps focus on combobox when blur is triggered', async () => {
+  test('passes custom className to list items', () => {
     render(
-      <MultiSelect label="My Label" choices={choices} />
+      <MultiSelect
+        label="My Label"
+        choices={choices}
+        liClassName="custom-li-class"
+      />
     )
 
-    const combobox = screen.getByLabelText(/My Label/)
-
-    combobox.focus()
-    fireEvent.keyDown(combobox, { key: 'ArrowDown' })
-    expect(combobox).toHaveAttribute('aria-activedescendant', 'sv')
-
-    const germanOption = screen.getByRole('option', { name: 'German' })
-    germanOption.focus()
-    fireEvent.click(germanOption)
-    fireEvent.blur(combobox, { relatedTarget: germanOption })
-    await waitFor(() => expect(combobox).toHaveFocus())
-  })
-})
-
-describe('getLoopedIndex', () => {
-  const choices = [1, 2, 3]
-  test('returns the correct index', () => {
-    expect(getLoopedIndex(choices, 0)).toBe(1)
-    expect(getLoopedIndex(choices, 2)).toBe(3)
-    expect(getLoopedIndex(choices, 3)).toBe(1)
-    expect(getLoopedIndex(choices, -1)).toBe(3)
-    expect(getLoopedIndex(choices, -3)).toBe(1)
-  })
-})
-
-describe('toggleValue', () => {
-  const choices = [1, 2, 3]
-  test('toggles the value correctly from a given list', () => {
-    expect(toggleValue(1, choices)).toEqual([2, 3])
-    expect(toggleValue(2, choices)).toEqual([1, 3])
-    expect(toggleValue(3, choices)).toEqual([1, 2])
-    expect(toggleValue(4, choices)).toEqual([1, 2, 3, 4])
+    const options = screen.getAllByRole('option')
+    options.forEach(option => {
+      expect(option).toHaveClass('custom-li-class')
+    })
   })
 })
diff --git a/meinberlin/react/contrib/forms/__tests__/useCombobox.jest.js b/meinberlin/react/contrib/forms/__tests__/useCombobox.jest.js
new file mode 100644
index 0000000000..63b543f599
--- /dev/null
+++ b/meinberlin/react/contrib/forms/__tests__/useCombobox.jest.js
@@ -0,0 +1,233 @@
+import { renderHook, act } from '@testing-library/react'
+import useCombobox from '../useCombobox'
+
+const mockChoices = [
+  { value: '1', name: 'Option 1' },
+  { value: '2', name: 'Option 2' },
+  { value: '3', name: 'Option 3' }
+]
+
+const defaultProps = {
+  choices: mockChoices,
+  values: undefined,
+  defaultValue: [],
+  onChange: jest.fn(),
+  isAutoComplete: false,
+  isMultiple: false,
+  search: ''
+}
+
+describe('useCombobox', () => {
+  beforeEach(() => {
+    jest.clearAllMocks()
+  })
+
+  test('initializes with default values', () => {
+    const { result } = renderHook(() => useCombobox(defaultProps))
+
+    expect(result.current.opened).toBe(false)
+    expect(result.current.activeItems).toEqual([])
+    expect(result.current.labelId).toBeTruthy()
+    expect(result.current.comboboxAttrs['aria-expanded']).toBe(false)
+  })
+
+  test('toggles dropdown on click', () => {
+    const { result } = renderHook(() => useCombobox(defaultProps))
+
+    act(() => {
+      result.current.comboboxAttrs.onClick()
+    })
+
+    expect(result.current.opened).toBe(true)
+    expect(result.current.comboboxAttrs['aria-expanded']).toBe(true)
+  })
+
+  test('handles keyboard navigation', () => {
+    const { result } = renderHook(() => useCombobox(defaultProps))
+
+    act(() => {
+      result.current.comboboxAttrs.onClick()
+    })
+    expect(result.current.comboboxAttrs['aria-activedescendant']).toBe('1')
+
+    act(() => {
+      result.current.comboboxAttrs.onKeyDown({ key: 'ArrowDown', preventDefault: jest.fn() })
+    })
+    expect(result.current.comboboxAttrs['aria-activedescendant']).toBe('2')
+
+    act(() => {
+      result.current.comboboxAttrs.onKeyDown({ key: 'ArrowDown', preventDefault: jest.fn() })
+    })
+    expect(result.current.comboboxAttrs['aria-activedescendant']).toBe('3')
+
+    act(() => {
+      result.current.comboboxAttrs.onKeyDown({ key: 'ArrowUp', preventDefault: jest.fn() })
+    })
+    expect(result.current.comboboxAttrs['aria-activedescendant']).toBe('2')
+  })
+
+  test('handles multiple selection', () => {
+    const multipleProps = {
+      ...defaultProps,
+      isMultiple: true
+    }
+
+    const { result } = renderHook(() => useCombobox(multipleProps))
+
+    // Select first option
+    act(() => {
+      const choiceAttrs = result.current.getChoicesAttr(mockChoices[0])
+      choiceAttrs.onClick()
+    })
+
+    expect(result.current.activeItems).toHaveLength(1)
+    expect(result.current.activeItems[0]).toEqual(mockChoices[0])
+
+    // Select second option
+    act(() => {
+      const choiceAttrs = result.current.getChoicesAttr(mockChoices[1])
+      choiceAttrs.onClick()
+    })
+
+    expect(result.current.activeItems).toHaveLength(2)
+    expect(result.current.activeItems).toEqual([mockChoices[0], mockChoices[1]])
+  })
+
+  test('handles single selection', () => {
+    const { result } = renderHook(() => useCombobox(defaultProps))
+
+    // Select first option
+    act(() => {
+      const choiceAttrs = result.current.getChoicesAttr(mockChoices[0])
+      choiceAttrs.onClick()
+    })
+
+    expect(result.current.activeItems).toHaveLength(1)
+    expect(result.current.activeItems[0]).toBe(mockChoices[0])
+
+    // Select second option (should replace first)
+    act(() => {
+      const choiceAttrs = result.current.getChoicesAttr(mockChoices[1])
+      choiceAttrs.onClick()
+    })
+
+    expect(result.current.activeItems).toHaveLength(1)
+    expect(result.current.activeItems[0]).toBe(mockChoices[1])
+  })
+
+  test('closes on escape key', () => {
+    const { result } = renderHook(() => useCombobox(defaultProps))
+
+    // Open dropdown
+    act(() => {
+      result.current.comboboxAttrs.onClick()
+    })
+
+    expect(result.current.opened).toBe(true)
+
+    // Press escape
+    act(() => {
+      result.current.comboboxAttrs.onKeyDown({ key: 'Escape' })
+    })
+
+    expect(result.current.opened).toBe(false)
+  })
+
+  test('handles controlled values', () => {
+    const controlledProps = {
+      ...defaultProps,
+      values: ['1']
+    }
+
+    const { result } = renderHook(() => useCombobox(controlledProps))
+
+    expect(result.current.activeItems).toHaveLength(1)
+    expect(result.current.activeItems[0]).toBe(mockChoices[0])
+  })
+
+  test('handles type-to-select', () => {
+    const { result } = renderHook(() => useCombobox(defaultProps))
+
+    act(() => {
+      result.current.comboboxAttrs.onKeyDown({ key: 'O', length: 1 })
+    })
+
+    expect(result.current.comboboxAttrs['aria-activedescendant']).toBe('1')
+  })
+
+  test('handles Home and End keys', () => {
+    const { result } = renderHook(() => useCombobox(defaultProps))
+
+    act(() => {
+      result.current.comboboxAttrs.onKeyDown({ key: 'End', preventDefault: jest.fn() })
+    })
+    expect(result.current.comboboxAttrs['aria-activedescendant']).toBe('3')
+
+    act(() => {
+      result.current.comboboxAttrs.onKeyDown({ key: 'Home', preventDefault: jest.fn() })
+    })
+    expect(result.current.comboboxAttrs['aria-activedescendant']).toBe('1')
+  })
+
+  test('calls onChange when selection changes', () => {
+    const onChange = jest.fn()
+    const propsWithOnChange = {
+      ...defaultProps,
+      onChange
+    }
+
+    const { result } = renderHook(() => useCombobox(propsWithOnChange))
+
+    act(() => {
+      const choiceAttrs = result.current.getChoicesAttr(mockChoices[0])
+      choiceAttrs.onClick()
+    })
+
+    expect(onChange).toHaveBeenCalledWith(['1'])
+  })
+})
+
+describe('useCombobox accessibility', () => {
+  test('provides correct ARIA attributes', () => {
+    const { result } = renderHook(() => useCombobox(defaultProps))
+
+    expect(result.current.comboboxAttrs['aria-haspopup']).toBe('true')
+    expect(result.current.listboxAttrs['aria-multiselectable']).toBe('true')
+    expect(result.current.listboxAttrs.role).toBe('listbox')
+    expect(result.current.comboboxAttrs.role).toBe('combobox')
+  })
+
+  test('handles focus management correctly', () => {
+    const { result } = renderHook(() => useCombobox(defaultProps))
+    const mockEvent = {
+      relatedTarget: null
+    }
+
+    act(() => {
+      result.current.comboboxAttrs.onBlur(mockEvent)
+    })
+
+    expect(result.current.opened).toBe(false)
+  })
+})
+
+describe('useCombobox with autoComplete', () => {
+  test('handles space key differently in autoComplete mode', () => {
+    const autoCompleteProps = {
+      ...defaultProps,
+      isAutoComplete: true
+    }
+
+    const { result } = renderHook(() => useCombobox(autoCompleteProps))
+
+    act(() => {
+      result.current.comboboxAttrs.onKeyDown({
+        key: ' ',
+        preventDefault: jest.fn()
+      })
+    })
+
+    // Space should not trigger option selection in autoComplete mode
+    expect(result.current.opened).toBe(false)
+  })
+})
diff --git a/meinberlin/react/contrib/forms/useCombobox.js b/meinberlin/react/contrib/forms/useCombobox.js
new file mode 100644
index 0000000000..8315827b05
--- /dev/null
+++ b/meinberlin/react/contrib/forms/useCombobox.js
@@ -0,0 +1,177 @@
+import { useCallback, useId, useMemo, useRef, useState } from 'react'
+import { getLoopedIndex } from './AutoComplete'
+
+function getTargets (choices, focusedIndex) {
+  return {
+    first: choices[0],
+    last: choices[choices.length - 1],
+    next: typeof focusedIndex === 'number' ? getLoopedIndex(choices, focusedIndex + 1) : null,
+    prev: typeof focusedIndex === 'number' ? getLoopedIndex(choices, focusedIndex - 1) : null
+  }
+}
+
+function toggleValue (value, values) {
+  const shouldRemove = values.includes(value)
+  let newValues = [...values, value]
+  if (shouldRemove) {
+    newValues = values.filter(item => item !== value)
+  }
+  return newValues
+}
+
+const useCombobox = ({
+  choices,
+  values,
+  defaultValue,
+  onChange,
+  isAutoComplete,
+  isMultiple,
+  search
+}) => {
+  const defaultValueArray = Array.isArray(defaultValue) ? defaultValue : [defaultValue]
+
+  const listboxRef = useRef(null)
+  const typed = useRef('')
+
+  const [internalValue, setInternalValue] = useState(defaultValueArray)
+  const [focused, setFocused] = useState(null)
+  const [opened, setOpened] = useState(false)
+
+  const containerId = useId()
+  const labelId = useId()
+
+  // Use values prop if provided (controlled), otherwise use internal state (uncontrolled)
+  const active = useMemo(() => values ?? internalValue, [values, internalValue])
+
+  const activeItems = choices.filter(choice => active.includes(choice.value))
+  const focusedItem = choices.find((choice) => choice.value === focused)
+  const focusedIndex = choices.findIndex(choice => choice.value === focused)
+  const targets = getTargets(choices, focusedIndex)
+
+  const toggleOption = useCallback((v) => {
+    const newValues = isMultiple ? toggleValue(v, active) : [v]
+    if (values === undefined) setInternalValue(newValues)
+    if (onChange) onChange(newValues)
+    if (!isMultiple) setOpened(false)
+  }, [values, onChange, active])
+
+  const onClick = useCallback(() => {
+    if (!opened && targets.first) {
+      setFocused(targets.first.value)
+    }
+    setOpened(!opened)
+  }, [opened])
+
+  const onBlur = useCallback((e) => {
+    if (listboxRef.current?.contains(e.relatedTarget)) {
+      listboxRef.current?.focus()
+      return
+    }
+    setOpened(false)
+  }, [listboxRef])
+
+  const getChoicesAttr = (choice) => ({
+    active: active.includes(choice.value),
+    focused: focusedItem?.value === choice.value,
+    role: 'option',
+    'aria-selected': active.includes(choice.value),
+    onClick: () => {
+      toggleOption(choice.value)
+      setFocused(choice.value)
+    },
+    ref: focusedItem?.value === choice.value ? (node) => node?.scrollIntoView({ block: 'nearest' }) : null,
+    tabIndex: -1
+  })
+
+  const onKeyDown = useCallback((e) => {
+    const key = e.key
+    switch (key) {
+      case ' ':
+        if (isAutoComplete) return
+        e.preventDefault()
+        if (!opened && targets.first) {
+          setFocused(targets.first.value)
+          setOpened(true)
+        } else if (focused) {
+          toggleOption(focused)
+        } else {
+          return
+        }
+        break
+      case 'Enter':
+        e.preventDefault()
+
+        if (opened && focused) {
+          toggleOption(focused)
+        } else if (!opened) {
+          setFocused(targets.first.value)
+        }
+        setOpened(!opened)
+        break
+      case 'Escape':
+        setOpened(false)
+        break
+      case 'ArrowUp':
+        e.preventDefault()
+        if (targets.prev) {
+          setFocused(targets.prev.value)
+        }
+        break
+      case 'ArrowDown':
+        e.preventDefault()
+        if (targets.next) {
+          setFocused(targets.next.value)
+        }
+        if (!opened) {
+          if (targets.first) {
+            setFocused(targets.first.value)
+          }
+          setOpened(true)
+        }
+        break
+      case 'Home':
+        e.preventDefault()
+        setFocused(targets.first.value)
+        break
+      case 'End':
+        e.preventDefault()
+        setFocused(targets.last.value)
+        break
+    }
+    if (key.length === 1 && !isAutoComplete) {
+      typed.current += key
+      const filtered = choices.filter(choice => choice.name.toLowerCase().startsWith(typed.current.toLowerCase()))
+      if (filtered.length) {
+        setFocused(filtered[0].value)
+      }
+      setTimeout(() => { typed.current = '' }, 200)
+    }
+  }, [focused, opened, targets, choices, isAutoComplete])
+
+  return {
+    comboboxAttrs: {
+      onClick,
+      onBlur,
+      onKeyDown,
+      tabIndex: 0,
+      'aria-haspopup': 'true',
+      'aria-expanded': opened,
+      'aria-activedescendant': focusedItem?.value,
+      'aria-labelledby': labelId,
+      'aria-controls': containerId,
+      role: 'combobox'
+    },
+    listboxAttrs: {
+      role: 'listbox',
+      'aria-multiselectable': 'true',
+      ref: listboxRef,
+      id: containerId
+    },
+    labelId,
+    activeItems,
+    getChoicesAttr,
+    opened
+  }
+}
+
+export default useCombobox
diff --git a/meinberlin/react/contrib/useDebounce.js b/meinberlin/react/contrib/useDebounce.js
new file mode 100644
index 0000000000..fe6ca58d89
--- /dev/null
+++ b/meinberlin/react/contrib/useDebounce.js
@@ -0,0 +1,32 @@
+import { useEffect, useMemo, useRef } from 'react'
+import debounce from 'lodash.debounce'
+
+/**
+ * A custom hook that returns a debounced callback function. A debounced function
+ * means that it will wait for a certain amount of time before executing the
+ * original function. So it will make sure that for certain events like typing
+ * in an input field, the function is not executed too often.
+ *
+ * @param {function} callback - The callback function to be debounced.
+ * @param {number} delay - The delay in milliseconds.
+ * @returns {function} - The debounced callback function.
+ */
+const useDebounce = (callback, delay = 1000) => {
+  const ref = useRef()
+
+  useEffect(() => {
+    ref.current = callback
+  }, [callback])
+
+  const debouncedCallback = useMemo(() => {
+    const func = () => {
+      ref.current?.()
+    }
+
+    return debounce(func, delay)
+  }, [])
+
+  return debouncedCallback
+}
+
+export default useDebounce
diff --git a/meinberlin/react/projects/ProjectMarker.jsx b/meinberlin/react/projects/ProjectMarker.jsx
index c18d880255..89b6d1fed7 100644
--- a/meinberlin/react/projects/ProjectMarker.jsx
+++ b/meinberlin/react/projects/ProjectMarker.jsx
@@ -26,7 +26,7 @@ const ProjectMarker = ({ project, onOpen, onClose, topicChoices }) => {
     >
       <Popup
         className="projects-map__popup"
-        offset={[0, 295]}
+        offset={[0, 225]}
         maxWidth={400}
         minWidth={400}
       >
diff --git a/meinberlin/react/projects/ProjectsMap.jsx b/meinberlin/react/projects/ProjectsMap.jsx
index 1469dcc5ab..1eca4bec9e 100644
--- a/meinberlin/react/projects/ProjectsMap.jsx
+++ b/meinberlin/react/projects/ProjectsMap.jsx
@@ -1,11 +1,14 @@
 import React, { useEffect, useMemo } from 'react'
+import { ZoomControl } from 'react-leaflet'
 import MarkerClusterLayer
   from 'adhocracy4/adhocracy4/maps_react/static/a4maps_react/MarkerClusterLayer'
 
 import { Map } from '../contrib/map/Map'
 import ProjectTile from './ProjectTile'
+import ProjectsMapSearch from './ProjectsMapSearch'
 import ControlWrapper from '../contrib/map/ControlWrapper'
 import ProjectMarker from './ProjectMarker'
+import ProjectsMapInfo from './ProjectsMapInfo'
 
 const Markers = ({ items, topicChoices }) => {
   const [activeProject, setActiveProject] = React.useState(null)
@@ -48,8 +51,9 @@ const Markers = ({ items, topicChoices }) => {
 const ProjectsMap = ({ items, topicChoices, ...props }) => {
   return (
     <div className="projects-map">
+      <ProjectsMapInfo className="projects-map-info--mobile" />
       <Map
-        zoomControl
+        zoomControl={false}
         maxZoom={18}
         {...props}
         id="project-map"
@@ -57,6 +61,13 @@ const ProjectsMap = ({ items, topicChoices, ...props }) => {
         style={{ minHeight: '100%', height: '100%' }}
         className="projects-map__map"
       >
+        <ControlWrapper position="topleft" className="projects-map__search">
+          <ProjectsMapSearch />
+        </ControlWrapper>
+        <ControlWrapper position="bottomleft" className="projects-map-info__wrapper">
+          <ProjectsMapInfo />
+        </ControlWrapper>
+        <ZoomControl position="topleft" />
         <Markers items={items} topicChoices={topicChoices} />
       </Map>
     </div>
diff --git a/meinberlin/react/projects/ProjectsMapInfo.jsx b/meinberlin/react/projects/ProjectsMapInfo.jsx
new file mode 100644
index 0000000000..4f89c45caa
--- /dev/null
+++ b/meinberlin/react/projects/ProjectsMapInfo.jsx
@@ -0,0 +1,37 @@
+import React, { useState } from 'react'
+import django from 'django'
+import Alert from 'adhocracy4/adhocracy4/static/Alert'
+import { classNames } from '../contrib/helpers'
+
+const translations = {
+  dontForget: django.gettext("Don't forget"),
+  projectsNotShown: django.gettext('Projects without spacial reference are not shown on the map. Please have a look at the project list.')
+}
+
+const ProjectsMapInfo = ({ className }) => {
+  const [shouldShow, setShouldShow] = useState(sessionStorage.getItem('hideProjectsMapInfo') !== 'true')
+  if (!shouldShow) {
+    return null
+  }
+
+  return (
+    <div className={classNames(className, 'projects-map-info')}>
+      <Alert
+        type="info"
+        alertAttribute="off"
+        onClick={() => {
+          setShouldShow(false)
+          sessionStorage.setItem('hideProjectsMapInfo', 'true')
+        }}
+        message={(
+          <p>
+            <strong>{translations.dontForget}</strong><br />
+            {translations.projectsNotShown}
+          </p>
+    )}
+      />
+    </div>
+  )
+}
+
+export default ProjectsMapInfo
diff --git a/meinberlin/react/projects/ProjectsMapSearch.jsx b/meinberlin/react/projects/ProjectsMapSearch.jsx
new file mode 100644
index 0000000000..b63a9a8c6d
--- /dev/null
+++ b/meinberlin/react/projects/ProjectsMapSearch.jsx
@@ -0,0 +1,98 @@
+import React, { useEffect, useState } from 'react'
+import django from 'django'
+import useDebounce from '../contrib/useDebounce'
+import { useMap } from 'react-leaflet'
+import { AutoComplete } from '../contrib/forms/AutoComplete'
+import {
+  makeIcon
+} from 'adhocracy4/adhocracy4/maps_react/static/a4maps_react/GeoJsonMarker'
+import L from 'leaflet'
+
+const addressSearchCapStr = django.gettext('Address Search')
+let activeMarker = null
+
+function fetchSuggestions (address) {
+  return fetch(apiUrl + '?address=' + address)
+    .then((response) => response.json())
+}
+
+function getSearchResultText (feature) {
+  return feature.properties.strname + ' ' + feature.properties.hsnr + ' in ' + feature.properties.plz + ' ' + feature.properties.bezirk_name
+}
+
+const apiUrl = 'https://bplan-prod.liqd.net/api/addresses/'
+
+const ProjectsMapSearch = ({
+  onSubmitHandler
+}) => {
+  const [geoJson, setGeoJson] = useState(null)
+  const [searchString, setSearchString] = useState('')
+  const map = useMap()
+
+  const debouncedOnChange = useDebounce(async () => {
+    const geoJson = await fetchSuggestions(searchString)
+    setGeoJson(geoJson)
+  })
+
+  const onAddressSelect = (val) => {
+    if (activeMarker) {
+      map.removeLayer(activeMarker)
+    }
+    const feature = geoJson.features[val[0]]
+    activeMarker = L.geoJSON(feature, {
+      pointToLayer: function (feature, latlng) {
+        return L.marker(latlng, { icon: makeIcon('/static/images/map_pin_active.svg') })
+      }
+    }).addTo(map)
+
+    map.flyToBounds(activeMarker.getBounds(), { maxZoom: 13 })
+  }
+
+  useEffect(() => {
+    debouncedOnChange()
+  }, [searchString])
+
+  return (
+    <div className="projects-map-search">
+      <form onSubmit={onSubmitHandler} data-embed-target="ignore">
+        <div className="searchform-slot">
+          <div className="form-group">
+            <AutoComplete
+              choices={geoJson
+                ? geoJson.features.map((feature, index) => ({
+                  name: getSearchResultText(feature),
+                  value: index
+                }))
+                : []}
+              // filtering is happening on the server
+              filterFn={() => true}
+              hideLabel
+              label={addressSearchCapStr}
+              placeholder={addressSearchCapStr}
+              onChangeInput={(val) => {
+                setSearchString(val)
+
+                if (val === '' && activeMarker) {
+                  map.removeLayer(activeMarker)
+                  activeMarker = null
+                }
+              }}
+              onChange={onAddressSelect}
+              inputValue={searchString}
+              before={
+                <i className="bicon bicon-search lens" aria-hidden="true" />
+              }
+              after={
+                <button className="submit " type="submit" title="Suchen">
+                  <span className="aural">Suchen</span><i className="bicon bicon-arrow-right icon" aria-hidden="true" />
+                </button>
+              }
+            />
+          </div>
+        </div>
+      </form>
+    </div>
+  )
+}
+
+export default ProjectsMapSearch
diff --git a/package.json b/package.json
index 4ac153d57a..fe8e96ed54 100644
--- a/package.json
+++ b/package.json
@@ -34,6 +34,7 @@
     "leaflet": "1.9.4",
     "leaflet-draw": "1.0.4",
     "leaflet.markercluster": "github:liqd/Leaflet.markercluster#liqd2212",
+    "lodash.debounce": "^4.0.8",
     "maplibre-gl": "2.4.0",
     "maplibregl-mapbox-request-transformer": "0.0.2",
     "mini-css-extract-plugin": "2.9.0",