add various fixes, see below

alert/scss: fix wrong classname base/scss: fix style being overriden multi-select/scss: prevent line wrap for any multi-select combobox multi-select/react: add isMultiple flag combobox: add comboboxref to handle focus
liqd · Jan 15, 2025 · dfc79c4 · dfc79c4
1 parent 2dddb9b
commit dfc79c4
Show file tree

Hide file tree

Showing 6 changed files with 19 additions and 9 deletions.
diff --git 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;
 }
 
-.a4-alert__content {
+.alert__content {
     padding: 1.125rem 2rem 1.125rem 1.125rem;
     margin: 0 auto;
     max-width: 81rem;

diff --git a/meinberlin/assets/scss/components_user_facing/_multi-select.scss b/meinberlin/assets/scss/components_user_facing/_multi-select.scss
@@ -5,6 +5,12 @@
         font-weight: bold;
     }
 
+    &__combobox {
+        text-overflow: ellipsis;
+        white-space: nowrap;
+        overflow: hidden;
+    }
+
     &:not(.multi-select--autocomplete) {
         .multi-select__combobox {
             background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA1MTIgNTEyIj48cGF0aCBkPSJNMjMzLjQgNDA2LjZjMTIuNSAxMi41IDMyLjggMTIuNSA0NS4zIDBsMTkyLTE5MmMxMi41LTEyLjUgMTIuNS0zMi44IDAtNDUuM3MtMzIuOC0xMi41LTQ1LjMgMEwyNTYgMzM4LjcgODYuNiAxNjkuNGMtMTIuNS0xMi41LTMyLjgtMTIuNS00NS4zIDBzLTEyLjUgMzIuOCAwIDQ1LjNsMTkyIDE5MnoiLz48L3N2Zz4=") !important;
@@ -20,9 +26,6 @@
 input.multi-select__combobox {
     border: 0;
     line-height: normal;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-    overflow: hidden;
     min-height: 0;
     padding: 0;
 

diff --git a/meinberlin/assets/scss/styles_user_facing/_base.scss b/meinberlin/assets/scss/styles_user_facing/_base.scss
@@ -1,5 +1,10 @@
 // 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 {
+
+// Also need to increase specificity because there is a landesfooter.css being loaded
+// at the foot of the page which includes some css that would otherwise override this
+
+// stylelint-disable-next-line
+body:not(_)  {
     overflow: clip;
 }
diff --git a/meinberlin/react/contrib/forms/MultiSelect.jsx b/meinberlin/react/contrib/forms/MultiSelect.jsx
@@ -24,7 +24,8 @@ export const MultiSelect = ({
     choices,
     values,
     defaultValue,
-    onChange
+    onChange,
+    isMultiple: true
   })
   const classes = classNames(
     'form-control input__element multi-select__container',

diff --git a/meinberlin/react/contrib/forms/useCombobox.js b/meinberlin/react/contrib/forms/useCombobox.js
@@ -31,6 +31,7 @@ const useCombobox = ({
   const defaultValueArray = Array.isArray(defaultValue) ? defaultValue : [defaultValue]
 
   const listboxRef = useRef(null)
+  const comboboxRef = useRef(null)
   const typed = useRef('')
 
   const [internalValue, setInternalValue] = useState(defaultValueArray)
@@ -64,7 +65,7 @@ const useCombobox = ({
 
   const onBlur = useCallback((e) => {
     if (listboxRef.current?.contains(e.relatedTarget)) {
-      listboxRef.current?.focus()
+      setTimeout(() => comboboxRef.current?.focus(), 10)
       return
     }
     setOpened(false)
@@ -159,7 +160,8 @@ const useCombobox = ({
       'aria-activedescendant': focusedItem?.value,
       'aria-labelledby': labelId,
       'aria-controls': containerId,
-      role: 'combobox'
+      role: 'combobox',
+      ref: comboboxRef
     },
     listboxAttrs: {
       role: 'listbox',

diff --git a/meinberlin/react/projects/ProjectTile.jsx b/meinberlin/react/projects/ProjectTile.jsx
@@ -35,7 +35,6 @@ const ProjectTile = ({ project, isHorizontal, topicChoices, isMapTile }) => {
   } else if (project.future_phase) {
     state = 'future'
   }
-  console.log(project)
 
   return (
     <a