chore: select values should be arrays Ref: LINK-1759

mikkojamG · mikkojamG · commit bd6655f33132 · 2025-09-05T13:08:34.000+03:00
diff --git a/src/common/components/eventSelector/EventSelector.tsx b/src/common/components/eventSelector/EventSelector.tsx
@@ -17,12 +17,12 @@ import { Language, OptionType } from '../../../types';
 import getPathBuilder from '../../../utils/getPathBuilder';
 import getValue from '../../../utils/getValue';
 import parseIdFromAtId from '../../../utils/parseIdFromAtId';
-import Select, { SingleSelectPropsWithValue } from '../select/Select';
+import Select, { SelectPropsWithValue } from '../select/Select';
 
 export type EventSelectorProps = {
   getOption: (event: EventFieldsFragment, locale: Language) => OptionType;
   variables: EventsQueryVariables;
-} & SingleSelectPropsWithValue<string | null>;
+} & SelectPropsWithValue<string | null>;
 
 const EventSelector: React.FC<EventSelectorProps> = ({
   getOption,
@@ -119,7 +119,7 @@ const EventSelector: React.FC<EventSelectorProps> = ({
   );
 
   const selectedEvent = React.useMemo(
-    () => (eventData?.event ? getOption(eventData.event, locale) : null),
+    () => (eventData?.event ? [getOption(eventData.event, locale)] : []),
     [eventData?.event, getOption, locale]
   );
 
@@ -136,7 +136,7 @@ const EventSelector: React.FC<EventSelectorProps> = ({
         clearButtonAriaLabel_one: t('common.combobox.clearEvents'),
       }}
       options={options}
-      value={selectedEvent?.value}
+      value={selectedEvent}
     />
   );
 };
diff --git a/src/common/components/formFields/placeSelectorField/PlaceSelectorField.tsx b/src/common/components/formFields/placeSelectorField/PlaceSelectorField.tsx
@@ -2,10 +2,10 @@ import { FieldProps } from 'formik';
 import React from 'react';
 
 import PlaceSelector from '../../placeSelector/PlaceSelector';
-import { SingleSelectPropsWithValue } from '../../select/Select';
+import { SelectPropsWithValue } from '../../select/Select';
 import useSingleSelectFieldProps from '../hooks/useSingleSelectFieldProps';
 
-type Props = SingleSelectPropsWithValue<string | null> & FieldProps;
+type Props = SelectPropsWithValue<string | null> & FieldProps;
 
 const PlaceSelectorField: React.FC<Props> = ({
   field: { name, onBlur, onChange, value, ...field },
diff --git a/src/common/components/formFields/publisherSelectorField/PublisherSelectorField.tsx b/src/common/components/formFields/publisherSelectorField/PublisherSelectorField.tsx
@@ -2,10 +2,10 @@ import { FieldProps } from 'formik';
 import React from 'react';
 
 import PublisherSelector from '../../publisherSelector/PublisherSelector';
-import { SingleSelectPropsWithValue } from '../../select/Select';
+import { SelectPropsWithValue } from '../../select/Select';
 import useSingleSelectFieldProps from '../hooks/useSingleSelectFieldProps';
 
-type Props = SingleSelectPropsWithValue<string | null> & FieldProps<string>;
+type Props = SelectPropsWithValue<string | null> & FieldProps<string>;
 
 const PublisherSelectorField: React.FC<Props> = ({
   field: { name, onBlur, onChange, value, ...field },
diff --git a/src/common/components/formFields/registrationEventSelectorField/RegistrationEventSelectorField.tsx b/src/common/components/formFields/registrationEventSelectorField/RegistrationEventSelectorField.tsx
@@ -16,13 +16,13 @@ import {
 import { Language, OptionType } from '../../../../types';
 import skipFalsyType from '../../../../utils/skipFalsyType';
 import EventSelector from '../../eventSelector/EventSelector';
-import { SingleSelectPropsWithValue } from '../../select/Select';
+import { SelectPropsWithValue } from '../../select/Select';
 import useSingleSelectFieldProps from '../hooks/useSingleSelectFieldProps';
 
 type Props = {
   onChangeCb?: (val: string | null) => void;
   variables: EventsQueryVariables;
-} & SingleSelectPropsWithValue<string | null> &
+} & SelectPropsWithValue<string | null> &
   FieldProps<string>;
 
 const RegistrationEventSelectorField: React.FC<Props> = ({
diff --git a/src/common/components/formFields/singleKeywordSelectorField/SingleKeywordSelectorField.tsx b/src/common/components/formFields/singleKeywordSelectorField/SingleKeywordSelectorField.tsx
@@ -1,11 +1,11 @@
 import { FieldProps } from 'formik';
 import React from 'react';
 
-import { SingleSelectPropsWithValue } from '../../select/Select';
+import { SelectPropsWithValue } from '../../select/Select';
 import SingleKeywordSelector from '../../singleKeywordSelector/SingleKeywordSelector';
 import useSingleSelectFieldProps from '../hooks/useSingleSelectFieldProps';
 
-type Props = SingleSelectPropsWithValue<string> & FieldProps<string>;
+type Props = SelectPropsWithValue<string> & FieldProps<string>;
 
 const SingleKeywordSelectorField: React.FC<Props> = ({
   field: { name, onBlur, onChange, value, ...field },
diff --git a/src/common/components/formFields/singleOrganizationClassSelectorField/SingleOrganizationClassSelectorField.tsx b/src/common/components/formFields/singleOrganizationClassSelectorField/SingleOrganizationClassSelectorField.tsx
@@ -1,11 +1,11 @@
 import { FieldProps } from 'formik';
 import React from 'react';
 
-import { SingleSelectPropsWithValue } from '../../select/Select';
+import { SelectPropsWithValue } from '../../select/Select';
 import SingleOrganizationClassSelector from '../../singleOrganizationClassSelector/SingleOrganizationClassSelector';
 import useSingleSelectFieldProps from '../hooks/useSingleSelectFieldProps';
 
-type Props = SingleSelectPropsWithValue<string | null> & FieldProps<string>;
+type Props = SelectPropsWithValue<string | null> & FieldProps<string>;
 
 const SingleOrganizationClassSelectorField: React.FC<Props> = ({
   field: { name, onBlur, onChange, value, ...field },
diff --git a/src/common/components/formFields/singleOrganizationSelectorField/SingleOrganizationSelectorField.tsx b/src/common/components/formFields/singleOrganizationSelectorField/SingleOrganizationSelectorField.tsx
@@ -1,11 +1,11 @@
 import { FieldProps } from 'formik';
 import React from 'react';
 
-import { SingleSelectPropsWithValue } from '../../select/Select';
+import { SelectPropsWithValue } from '../../select/Select';
 import SingleOrganizationSelector from '../../singleOrganizationSelector/SingleOrganizationSelector';
 import useSingleSelectFieldProps from '../hooks/useSingleSelectFieldProps';
 
-type Props = SingleSelectPropsWithValue<string | null> & FieldProps;
+type Props = SelectPropsWithValue<string | null> & FieldProps;
 
 const SingleOrganizationSelectorField: React.FC<Props> = ({
   field: { name, onBlur, onChange, value, ...field },
diff --git a/src/common/components/formFields/singleSelectField/SingleSelectField.tsx b/src/common/components/formFields/singleSelectField/SingleSelectField.tsx
@@ -1,5 +1,5 @@
 import { FieldProps } from 'formik';
-import React from 'react';
+import React, { useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
 
 import { OptionType } from '../../../../types';
@@ -28,10 +28,14 @@ const SingleSelectField: React.FC<Props> = ({
     value,
   });
 
-  const selected = options?.find(
-    (option): option is OptionType =>
-      typeof option !== 'string' && option.value === value
-  );
+  const selected = useMemo(() => {
+    const option = options?.find(
+      (option): option is OptionType =>
+        typeof option !== 'string' && option.value === value
+    );
+
+    return option ? [option] : [];
+  }, [options, value]);
 
   return (
     <SingleSelect
@@ -42,7 +46,7 @@ const SingleSelectField: React.FC<Props> = ({
       onBlur={handleBlur}
       onChange={handleChange}
       options={options}
-      value={selected?.value}
+      value={selected}
       texts={{
         ...texts,
         error: errorText,
diff --git a/src/common/components/formFields/umbrellaEventSelectorField/UmbrellaEventSelectorField.tsx b/src/common/components/formFields/umbrellaEventSelectorField/UmbrellaEventSelectorField.tsx
@@ -6,10 +6,10 @@ import { EVENT_SORT_OPTIONS } from '../../../../domain/events/constants';
 import { EventFieldsFragment } from '../../../../generated/graphql';
 import { Language, OptionType } from '../../../../types';
 import EventSelector from '../../eventSelector/EventSelector';
-import { SingleSelectPropsWithValue } from '../../select/Select';
+import { SelectPropsWithValue } from '../../select/Select';
 import useSingleSelectFieldProps from '../hooks/useSingleSelectFieldProps';
 
-type Props = SingleSelectPropsWithValue<string | null> & FieldProps<string>;
+type Props = SelectPropsWithValue<string | null> & FieldProps<string>;
 
 const getEventOption = (
   event: EventFieldsFragment,
diff --git a/src/common/components/placeSelector/PlaceSelector.tsx b/src/common/components/placeSelector/PlaceSelector.tsx
@@ -21,7 +21,7 @@ import getPathBuilder from '../../../utils/getPathBuilder';
 import getValue from '../../../utils/getValue';
 import parseIdFromAtId from '../../../utils/parseIdFromAtId';
 import skipFalsyType from '../../../utils/skipFalsyType';
-import Select, { SingleSelectPropsWithValue } from '../select/Select';
+import Select, { SelectPropsWithValue } from '../select/Select';
 import styles from './placeSelector.module.scss';
 
 export type GetOptionArgs = {
@@ -57,7 +57,7 @@ export const getOption = ({
   };
 };
 
-export type PlaceSelectorProps = SingleSelectPropsWithValue<string | null>;
+export type PlaceSelectorProps = SelectPropsWithValue<string | null>;
 
 const PlaceSelector: React.FC<PlaceSelectorProps> = ({
   texts,
@@ -154,13 +154,15 @@ const PlaceSelector: React.FC<PlaceSelectorProps> = ({
   const selectedPlace = React.useMemo(
     () =>
       placeData?.place
-        ? getOption({
-            locale,
-            place: placeData.place,
-            showEventAmount: false,
-            t,
-          })
-        : null,
+        ? [
+            getOption({
+              locale,
+              place: placeData.place,
+              showEventAmount: false,
+              t,
+            }),
+          ]
+        : [],
     [locale, placeData, t]
   );
 
@@ -179,7 +181,7 @@ const PlaceSelector: React.FC<PlaceSelectorProps> = ({
         ...texts,
         clearButtonAriaLabel_one: t('common.combobox.clearPlaces'),
       }}
-      value={selectedPlace?.label}
+      value={selectedPlace}
     />
   );
 };
diff --git a/src/common/components/publisherSelector/PublisherSelector.tsx b/src/common/components/publisherSelector/PublisherSelector.tsx
@@ -11,11 +11,11 @@ import { useOrganizationQuery } from '../../../generated/graphql';
 import useLocale from '../../../hooks/useLocale';
 import getPathBuilder from '../../../utils/getPathBuilder';
 import getValue from '../../../utils/getValue';
-import Select, { SingleSelectPropsWithValue } from '../select/Select';
+import Select, { SelectPropsWithValue } from '../select/Select';
 
 export type PublisherSelectorProps = {
   publisher?: string | null;
-} & SingleSelectPropsWithValue<string | null>;
+} & SelectPropsWithValue<string | null>;
 
 const PublisherSelector: React.FC<PublisherSelectorProps> = ({
   clearable = false,
@@ -42,19 +42,21 @@ const PublisherSelector: React.FC<PublisherSelectorProps> = ({
   const selectedOrganization = React.useMemo(
     () =>
       organizationData?.organization
-        ? getOrganizationOption({
-            idPath: 'id',
-            locale,
-            organization: organizationData.organization,
-            t,
-          })
-        : null,
+        ? [
+            getOrganizationOption({
+              idPath: 'id',
+              locale,
+              organization: organizationData.organization,
+              t,
+            }),
+          ]
+        : [],
     [locale, organizationData?.organization, t]
   );
 
   const options = useMemo(() => {
     if (publisher) {
-      return selectedOrganization ? [selectedOrganization] : [];
+      return selectedOrganization.length ? selectedOrganization : [];
     }
     return organizations.map((org) =>
       getOrganizationOption({
@@ -78,7 +80,7 @@ const PublisherSelector: React.FC<PublisherSelectorProps> = ({
         clearButtonAriaLabel_one: t('common.combobox.clearOrganizations'),
       }}
       options={options}
-      value={selectedOrganization?.value}
+      value={selectedOrganization}
     />
   );
 };
diff --git a/src/common/components/select/Select.tsx b/src/common/components/select/Select.tsx
@@ -9,7 +9,7 @@ import SelectLoadingSpinner from '../selectLoadingSpinner/SelectLoadingSpinner';
 import { SingleSelectProps } from '../singleSelect/SingleSelect';
 import styles from './select.module.scss';
 
-export type SingleSelectPropsWithValue<ValueType> = SingleSelectProps & {
+export type SelectPropsWithValue<ValueType> = SingleSelectProps & {
   name: string;
   value: ValueType;
 };
diff --git a/src/common/components/singleKeywordSelector/SingleKeywordSelector.tsx b/src/common/components/singleKeywordSelector/SingleKeywordSelector.tsx
@@ -19,7 +19,7 @@ import useLocale from '../../../hooks/useLocale';
 import { Language, OptionType } from '../../../types';
 import getPathBuilder from '../../../utils/getPathBuilder';
 import getValue from '../../../utils/getValue';
-import Select, { SingleSelectPropsWithValue } from '../select/Select';
+import Select, { SelectPropsWithValue } from '../select/Select';
 
 const getOption = ({
   keyword,
@@ -33,7 +33,7 @@ const getOption = ({
   return { label, value };
 };
 
-export type SingleKeywordSelectorProps = SingleSelectPropsWithValue<string>;
+export type SingleKeywordSelectorProps = SelectPropsWithValue<string>;
 
 const SingleKeywordSelector: React.FC<SingleKeywordSelectorProps> = ({
   texts,
@@ -133,8 +133,8 @@ const SingleKeywordSelector: React.FC<SingleKeywordSelectorProps> = ({
   const selectedKeyword = React.useMemo(
     () =>
       keywordData?.keyword
-        ? getOption({ keyword: keywordData.keyword, locale })
-        : null,
+        ? [getOption({ keyword: keywordData.keyword, locale })]
+        : [],
     [keywordData, locale]
   );
 
@@ -151,7 +151,7 @@ const SingleKeywordSelector: React.FC<SingleKeywordSelectorProps> = ({
         clearButtonAriaLabel_one: t('common.combobox.clearKeywords'),
       }}
       options={options}
-      value={selectedKeyword?.value}
+      value={selectedKeyword}
     />
   );
 };
diff --git a/src/common/components/singleOrganizationClassSelector/SingleOrganizationClassSelector.tsx b/src/common/components/singleOrganizationClassSelector/SingleOrganizationClassSelector.tsx
@@ -13,7 +13,7 @@ import {
 import { OptionType } from '../../../types';
 import getPathBuilder from '../../../utils/getPathBuilder';
 import getValue from '../../../utils/getValue';
-import Select, { SingleSelectPropsWithValue } from '../select/Select';
+import Select, { SelectPropsWithValue } from '../select/Select';
 
 const getOption = ({
   organizationClass,
@@ -26,9 +26,7 @@ const getOption = ({
   return { label, value };
 };
 
-type SingleOrganizationClassSelectorProps = SingleSelectPropsWithValue<
-  string | null
->;
+type SingleOrganizationClassSelectorProps = SelectPropsWithValue<string | null>;
 
 const SingleOrganizationClassSelector: React.FC<
   SingleOrganizationClassSelectorProps
@@ -58,7 +56,7 @@ const SingleOrganizationClassSelector: React.FC<
 
   const selectedOrganizationClass = React.useMemo(() => {
     const organizationClass = organizationClassData?.organizationClass;
-    return organizationClass ? getOption({ organizationClass }) : null;
+    return organizationClass ? [getOption({ organizationClass })] : [];
   }, [organizationClassData]);
 
   return (
@@ -72,7 +70,7 @@ const SingleOrganizationClassSelector: React.FC<
         clearButtonAriaLabel_one: t('common.combobox.clearOrganizations'),
       }}
       options={options}
-      value={selectedOrganizationClass?.value}
+      value={selectedOrganizationClass}
     />
   );
 };
diff --git a/src/common/components/singleOrganizationSelector/SingleOrganizationSelector.tsx b/src/common/components/singleOrganizationSelector/SingleOrganizationSelector.tsx
