feat(sports): replace multiselect filters with HDS selects

nikomakela · nikomakela · commit cac670c42c81 · 2025-11-24T12:29:50.000+02:00
HCRC-178
diff --git a/apps/sports-helsinki/src/domain/search/combinedSearch/SearchForm.tsx b/apps/sports-helsinki/src/domain/search/combinedSearch/SearchForm.tsx
@@ -1,19 +1,18 @@
 import {
   useSearchTranslation,
-  MultiSelectDropdown,
   useAppSportsTranslation,
   IconPersonRunning,
-  SearchSelect,
   AdvancedSearchTextInput,
 } from '@events-helsinki/components';
 import classNames from 'classnames';
-import type { SelectCustomTheme, Option } from 'hds-react';
+import type { Option } from 'hds-react';
 import {
   Button,
   ButtonVariant,
   IconGroup,
   IconPersonWheelchair,
   IconSearch,
+  Select,
 } from 'hds-react';
 import React from 'react';
 import AppConfig from '../../app/AppConfig';
@@ -43,13 +42,9 @@ export const SimpleSearchForm: React.FC<SearchComponentType> = ({
     setTextSearchInput,
     selectedSportsCategories,
     setSelectedSportsCategories,
-    sportsCategoryInput,
-    setSportsCategoryInput,
     sportsCategories,
     selectedTargetGroups,
     setSelectedTargetGroups,
-    targetGroupInput,
-    setTargetGroupInput,
     targetGroups,
     accessibilityProfiles,
     selectedAccessibilityProfile,
@@ -100,7 +95,7 @@ export const SimpleSearchForm: React.FC<SearchComponentType> = ({
           <p className={styles.searchDescription}>{description}</p>
         )}
         <div className={styles.rowWrapper}>
-          <div>
+          <div className={classNames(styles.textSearchRow)}>
             <AdvancedSearchTextInput
               id="search"
               name="search"
@@ -115,53 +110,83 @@ export const SimpleSearchForm: React.FC<SearchComponentType> = ({
           </div>
           <div className={styles.rowWrapper}>
             <div
-              className={
+              className={classNames(
                 AppConfig.showTargetGroupFilter
                   ? styles.rowWithTargetGroupFilter
                   : styles.rowWithoutTargetGroupFilter
-              }
+              )}
             >
               <div>
-                <MultiSelectDropdown
-                  checkboxName="sportsCategoryOptions"
+                <Select
+                  className={styles.categoriesSelector}
+                  id="sportsCategory"
                   icon={<IconPersonRunning aria-hidden />}
-                  inputValue={sportsCategoryInput}
-                  name="sportsCategory"
-                  onChange={setSelectedSportsCategories}
+                  onChange={(selectedOptions: Option[]) =>
+                    setSelectedSportsCategories(
+                      selectedOptions.map((option) => option.value)
+                    )
+                  }
                   options={sportsCategories}
-                  setInputValue={setSportsCategoryInput}
-                  showSearch={false}
-                  title={t('search.titleDropdownSportsCategory')}
+                  visibleOptions={5.97} // use decimal to make scrollable content visible
+                  texts={{
+                    placeholder: t('search.titleDropdownSportsCategory'),
+                  }}
                   value={selectedSportsCategories}
+                  theme={{
+                    '--checkbox-background-selected': 'var(--color-input-dark)',
+                    '--checkbox-background-hover': 'var(--color-input-dark)',
+                    '--menu-item-background-color-hover':
+                      'var(--color-input-light)',
+                    '--menu-item-background-color-selected-hover':
+                      'var(--color-input-light)',
+                  }}
+                  multiSelect
+                  noTags
                 />
               </div>
               {AppConfig.showTargetGroupFilter && (
                 <div>
-                  <MultiSelectDropdown
-                    checkboxName="targetGroupOptions"
+                  <Select
+                    className={styles.targetGroupSelector}
                     icon={<IconGroup aria-hidden />}
-                    inputValue={targetGroupInput}
-                    name="targetGroup"
-                    onChange={setSelectedTargetGroups}
+                    id="targetGroup"
                     options={targetGroups}
-                    setInputValue={setTargetGroupInput}
-                    showSearch={false}
-                    title={t('search.titleDropdownTargetGroup')}
+                    visibleOptions={5.97} // use decimal to make scrollable content visible
+                    texts={{
+                      placeholder: t('search.titleDropdownTargetGroup'),
+                    }}
                     value={selectedTargetGroups}
+                    onChange={(selectedOptions: Option[]) =>
+                      setSelectedTargetGroups(
+                        selectedOptions.map((option) => option.value)
+                      )
+                    }
+                    theme={{
+                      '--checkbox-background-selected':
+                        'var(--color-input-dark)',
+                      '--checkbox-background-hover': 'var(--color-input-dark)',
+                      '--menu-item-background-color-hover':
+                        'var(--color-input-light)',
+                      '--menu-item-background-color-selected-hover':
+                        'var(--color-input-light)',
+                    }}
+                    multiSelect
+                    noTags
                   />
                 </div>
               )}
               <div>
-                <SearchSelect
+                <Select
                   id="accessibilityProfile"
+                  className={styles.accessibilityProfileSelector}
                   texts={{
-                    label: t('search:search.labelAccessibilityProfile'),
                     placeholder: t('search:search.labelAccessibilityProfile'),
                     clearButtonAriaLabel_one: t(
                       'search:search.ariaLabelClearAccessibilityProfile'
                     ),
                   }}
                   options={accessibilityProfiles}
+                  visibleOptions={5.97} // use decimal to make scrollable content visible
                   value={selectedAccessibilityProfile ?? undefined}
                   onChange={handleAccessibilityProfileOnChange}
                   icon={<IconPersonWheelchair aria-hidden />}
@@ -174,17 +199,8 @@ export const SimpleSearchForm: React.FC<SearchComponentType> = ({
                       'var(--color-input-dark)',
                     '--menu-item-color-selected-hover': 'var(--color-white)',
                   }}
-                  // FIXME: how to handle no outline?
-                  // noOutline
-                  // FIXME: Using the clearable could be a better solution than offering an empty option,
-                  // but the HDS has a bug or unfinished feature in the clearable
-                  // and the controlled state of the input value, does not work when it's used.
-                  // A following error could be thrown:
-                  // "downshift: A component has changed the uncontrolled prop "selectedItem" to be controlled.
-                  // This prop should not switch from controlled to uncontrolled (or vice versa).
-                  // Decide between using a controlled or uncontrolled Downshift element for the lifetime of
-                  // the component. More info: https://github.com/downshift-js/downshift#control-props".
-                  // clearable
+                  multiSelect={false}
+                  noTags
                 />
               </div>
               <div
diff --git a/apps/sports-helsinki/src/domain/search/combinedSearch/hooks/useFormValues.tsx b/apps/sports-helsinki/src/domain/search/combinedSearch/hooks/useFormValues.tsx
@@ -28,14 +28,19 @@ export function useFormValues() {
   const [selectedSportsCategories, setSelectedSportsCategories] =
     React.useState<string[]>(formValues.sportsCategories);
   const [sportsCategoryInput, setSportsCategoryInput] = React.useState('');
-  const sportsCategories = getSportsCategoryOptions(t).sort(
-    sortExtendedCategoryOptions
-  );
+  const sportsCategories = getSportsCategoryOptions(t)
+    .sort(sortExtendedCategoryOptions)
+    .map((option) => ({
+      ...option,
+      label: option.text,
+    }));
   const [selectedTargetGroups, setSelectedTargetGroups] = React.useState<
     string[]
   >(formValues.targetGroups);
-  const [targetGroupInput, setTargetGroupInput] = React.useState('');
-  const targetGroups = getTargetGroupOptions(t);
+  const targetGroups = getTargetGroupOptions(t).map((option) => ({
+    ...option,
+    label: option.text,
+  }));
   const accessibilityProfiles = [
     // Empty option is needed with the HDS-select because of a bug in it.
     // Otherwise a following error is thrown and the value handling does not work properly,
@@ -74,8 +79,6 @@ export function useFormValues() {
     sportsCategories,
     selectedTargetGroups,
     setSelectedTargetGroups,
-    targetGroupInput,
-    setTargetGroupInput,
     targetGroups,
     accessibilityProfiles,
     selectedAccessibilityProfile,
diff --git a/apps/sports-helsinki/src/domain/search/combinedSearch/search.module.scss b/apps/sports-helsinki/src/domain/search/combinedSearch/search.module.scss
@@ -47,22 +47,6 @@ $buttonWidth: 180px;
       margin-bottom: var(--spacing-xl);
     }
   }
-
-  .checkbox {
-    margin-top: var(--spacing-xs);
-    label {
-      display: flex;
-      align-items: center;
-      color: var(--color-primary-black);
-    }
-    @include breakpoints.respond-above(s) {
-      margin-top: 0;
-    }
-  }
-
-  .dateSelectorWrapper {
-    align-self: flex-end;
-  }
 }
 
 .buttonWrapperWithTargetGroupFilter {
@@ -116,13 +100,13 @@ $buttonWidth: 180px;
   align-items: center;
 
   grid-template-columns: 1fr;
-  grid-gap: var(--spacing-m);
+  grid-gap: var(--spacing-s);
 
   margin-bottom: var(--spacing-xs);
 
   @include breakpoints.respond-above(s) {
     grid-template-columns: 1fr;
-    grid-gap: var(--spacing-xs);
+    grid-gap: var(--spacing-s);
 
     margin-bottom: var(--spacing-xs);
   }
@@ -142,3 +126,50 @@ $buttonWidth: 180px;
   padding: 0 0 var(--spacing-xs) 0;
   position: relative;
 }
+
+.textSearchRow {
+  align-items: flex-end;
+  margin-bottom: var(--spacing-2-xs);
+
+  @include breakpoints.respond-above(m) {
+    grid-template-columns: repeat(4, minmax(0, 1fr));
+  }
+
+  & > :first-child {
+    @include breakpoints.respond-above(s) {
+      grid-column: 1 / 5;
+    }
+    padding: var(--spacing-xs);
+
+    svg {
+      margin-right: var(--spacing-xs);
+    }
+  }
+
+  .searchInputWrapper {
+    padding-left: var(--spacing-2-xs);
+  }
+}
+.categoriesSelector,
+.targetGroupSelector,
+.accessibilityProfileSelector {
+  --icon-size: var(--spacing-layout-xs);
+  --border-width: 0;
+  ---dropdown-height: var(--spacing-3-xl);
+  --menu-item-height: var(---dropdown-height);
+
+  max-width: unset !important;
+  height: var(--dropdown-height);
+
+  span {
+    margin-right: 0;
+    margin-left: var(--spacing-4-xs);
+    font-size: var(--fontsize-body-m);
+    line-height: 1.5rem;
+  }
+
+  /* Icon on start of button */
+  svg {
+    width: var(--icon-size);
+  }
+}
diff --git a/apps/sports-helsinki/src/domain/search/combinedSearch/searchTabs/SearchTabs.tsx b/apps/sports-helsinki/src/domain/search/combinedSearch/searchTabs/SearchTabs.tsx
@@ -1,10 +1,13 @@
-import { EventTypeId, Select } from '@events-helsinki/components';
+import {
+  EventTypeId,
+  Select,
+  useSearchTranslation,
+} from '@events-helsinki/components';
 import classnames from 'classnames';
 import type {
   ButtonPresetTheme,
   ButtonProps,
   ButtonTheme,
-  SelectCustomTheme,
   Option,
 } from 'hds-react';
 import { Button, ButtonVariant } from 'hds-react';
@@ -73,6 +76,7 @@ type SearchTabListMobileProps = {
 function SearchTabListMobile({ data }: SearchTabListMobileProps) {
   const router = useRouter();
   const { resultCounts, activeTab, setActiveTab } = useTabsContext();
+  const { t } = useSearchTranslation();
 
   const options = useMemo(
     (): Option[] =>
@@ -105,17 +109,19 @@ function SearchTabListMobile({ data }: SearchTabListMobileProps) {
   return (
     <div className={styles.tabsMobile}>
       <Select
-        theme={
-          {
-            '--menu-item-background': 'var(--color-input-dark)',
-            '--menu-item-background-hover': 'var(--color-input-dark)',
-            '--menu-item-background-selected-hover': 'var(--color-input-dark)',
-          } as SelectCustomTheme
-        }
-        texts={{ label: 'venues-search-tabs-mobile' }}
+        className={styles.tabsMobileSelect}
+        theme={{
+          '--menu-item-background-color-hover': 'var(--color-input-light)',
+          '--menu-item-background-color-selected': 'var(--color-input-dark)',
+          '--menu-item-background-color-selected-hover':
+            'var(--color-input-dark)',
+          '--menu-item-color-selected-hover': 'var(--color-white)',
+        }}
+        texts={{ label: t('appSports:search.descriptionSearchTabs') }}
         value={activeTab}
         onChange={handleSearchTabChange}
         options={options}
+        visibleOptions={5.97} // use decimal to make scrollable content visible
       />
     </div>
   );
diff --git a/apps/sports-helsinki/src/domain/search/combinedSearch/searchTabs/searchTabs.module.scss b/apps/sports-helsinki/src/domain/search/combinedSearch/searchTabs/searchTabs.module.scss
@@ -6,6 +6,30 @@
   }
 }
 
+.tabsMobileSelect {
+  --icon-size: var(--spacing-layout-xs);
+  --border-width: 2px;
+  --dropdown-border-color-default: var(--color-black);
+
+  ---dropdown-height: var(--spacing-3-xl);
+  --menu-item-height: var(---dropdown-height);
+
+  max-width: unset !important;
+  height: var(--dropdown-height);
+
+  span {
+    margin-right: 0;
+    margin-left: var(--spacing-4-xs);
+    font-size: var(--fontsize-body-m);
+    line-height: 1.5rem;
+  }
+
+  /* Icon on start of button */
+  svg {
+    width: var(--icon-size);
+  }
+}
+
 .tabs {
   display: flex;
   justify-content: flex-start;
diff --git a/apps/sports-helsinki/src/domain/search/eventSearch/searchResultList/unifiedSearchOrderBySelect.module.scss b/apps/sports-helsinki/src/domain/search/eventSearch/searchResultList/unifiedSearchOrderBySelect.module.scss
@@ -6,5 +6,6 @@
   @include breakpoints.respond-below(s) {
     margin: 0;
     width: 100%;
+    max-width: unset !important;
   }
 }
diff --git a/packages/components/src/components/index.ts b/packages/components/src/components/index.ts
@@ -29,7 +29,6 @@ export { default as ScrollIntoViewWithFocus } from './scrollIntoViewWithFocus/Sc
 export * from './search';
 export { default as Section } from './section/Section';
 export { default as Select } from './select/Select';
-export { default as SearchSelect } from './select/SearchSelect';
 export * from './shareLinks';
 export { default as SkeletonLoader } from './skeletonLoader/SkeletonLoader';
 export { default as LoadingSpinner } from './spinner/LoadingSpinner';
diff --git a/packages/components/src/components/orderBySelect/eventsOrderBySelect.module.scss b/packages/components/src/components/orderBySelect/eventsOrderBySelect.module.scss
@@ -6,5 +6,6 @@
   @include breakpoints.respond-below(s) {
     margin: 0;
     width: 100%;
+    max-width: unset !important;
   }
 }
diff --git a/packages/components/src/components/select/SearchSelect.tsx b/packages/components/src/components/select/SearchSelect.tsx
diff --git a/packages/components/src/components/select/__tests__/SearchSelect.test.tsx b/packages/components/src/components/select/__tests__/SearchSelect.test.tsx
diff --git a/packages/components/src/components/select/__tests__/__snapshots__/SearchSelect.test.tsx.snap b/packages/components/src/components/select/__tests__/__snapshots__/SearchSelect.test.tsx.snap
diff --git a/packages/components/src/components/select/searchSelect.module.scss b/packages/components/src/components/select/searchSelect.module.scss

Original file line number	Diff line number	Diff line change
`@@ -6,5 +6,6 @@`
`6`	`6`	`@include breakpoints.respond-below(s) {`
`7`	`7`	`margin: 0;`
`8`	`8`	`width: 100%;`
	`9`	`+ max-width: unset !important;`
`9`	`10`	`}`
`10`	`11`	`}`