chore: multiselect field use onClose

Author: mikkojamG

package.json

@@ -48,8 +48,8 @@
     "focus-visible": "^5.2.0",
     "formik": "2.4.5",
     "gzipper": "^7.2.0",
-    "hds-core": "^4.2.0",
-    "hds-react": "^4.2.0",
+    "hds-core": "^4.4.0",
+    "hds-react": "^4.4.0",
     "history": "^5.3.0",
     "html-tags": "^3.3.1",
     "i18next": "^23.10.1",
@@ -59,8 +59,8 @@
     "object-keys-normalizer": "^1.0.1",
     "pretty": "^2.0.0",
     "qs": "^6.12.1",
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
     "react-helmet": "^6.1.0",
     "react-i18next": "^14.1.0",
     "react-image-crop": "^11.0.5",

src/common/components/formFields/hooks/useMultiSelectFieldProps.ts

@@ -7,7 +7,7 @@ import { getErrorText } from '../../../../utils/validationUtils';
 type UseMultiSelectFieldPropsState = {
   errorText: string;
   handleBlur: () => void;
-  handleChange: (selectedOptions: OptionType[]) => void;
+  handleClose: (selectedOptions: OptionType[]) => void;
 };
 
 export type UseMultiSelectFieldPropsProps = {
@@ -31,7 +31,7 @@ const useMultiSelectFieldProps = ({
     onBlur({ target: { id: name, value } });
   };
 
-  const handleChange = (selectedOptions: OptionType[]) => {
+  const handleClose = (selectedOptions: OptionType[]) => {
     // TODO: HDS Combobox component allowes to remove value even if component
     // is disabled. Remove if statement when that behaviour is fixed to HDS
 
@@ -46,7 +46,7 @@ const useMultiSelectFieldProps = ({
     }, 5);
   };
 
-  return { errorText, handleBlur, handleChange };
+  return { errorText, handleBlur, handleClose };
 };
 
 export default useMultiSelectFieldProps;

src/common/components/formFields/keywordSelectorField/KeywordSelectorField.tsx

@@ -14,7 +14,7 @@ const KeywordSelectorField: React.FC<Props> = ({
   disabled,
   ...rest
 }) => {
-  const { errorText, handleBlur, handleChange } = useMultiSelectFieldProps({
+  const { errorText, handleBlur, handleClose } = useMultiSelectFieldProps({
     name,
     onBlur,
     onChange,
@@ -28,7 +28,7 @@ const KeywordSelectorField: React.FC<Props> = ({
       disabled={disabled}
       name={name}
       onBlur={handleBlur}
-      onChange={handleChange}
+      onClose={handleClose}
       value={value}
       texts={{ ...texts, error: errorText }}
       invalid={!!errorText}

src/common/components/formFields/userSelectorField/UserSelectorField.tsx

@@ -14,7 +14,7 @@ const UserSelectorField: React.FC<Props> = ({
   disabled,
   ...rest
 }) => {
-  const { errorText, handleBlur, handleChange } = useMultiSelectFieldProps({
+  const { errorText, handleBlur, handleClose } = useMultiSelectFieldProps({
     name,
     onBlur,
     onChange,
@@ -28,7 +28,7 @@ const UserSelectorField: React.FC<Props> = ({
       disabled={disabled}
       name={name}
       onBlur={handleBlur}
-      onChange={handleChange}
+      onClose={handleClose}
       value={value}
       texts={{ ...texts, error: errorText }}
       invalid={!!errorText}

src/common/components/keywordSelector/KeywordSelector.tsx

@@ -6,7 +6,7 @@ import {
   useApolloClient,
 } from '@apollo/client';
 import { SearchFunction, SearchResult } from 'hds-react';
-import React, { useCallback } from 'react';
+import React from 'react';
 import { useTranslation } from 'react-i18next';
 
 import {
@@ -17,7 +17,6 @@ import {
 import {
   Keyword,
   KeywordFieldsFragment,
-  KeywordsQuery,
   useKeywordsQuery,
 } from '../../../generated/graphql';
 import useLocale from '../../../hooks/useLocale';
@@ -56,50 +55,46 @@ const KeywordSelector: React.FC<KeywordSelectorProps> = ({
     []
   );
 
-  const QUERY_VARIABLES = {
-    createPath: getPathBuilder(keywordsPathBuilder),
-    dataSource: ['yso', 'helsinki'],
-    showAllKeywords: true,
-  };
-
   const {
     data: keywordsData,
     loading,
+    previousData: previousKeywordsData,
     refetch,
   } = useKeywordsQuery({
-    variables: QUERY_VARIABLES,
+    variables: {
+      createPath: getPathBuilder(keywordsPathBuilder),
+      dataSource: ['yso', 'helsinki'],
+      showAllKeywords: true,
+      freeText: '',
+    },
   });
 
-  const getKeywordsData = useCallback(
-    (data: KeywordsQuery | undefined) =>
+  const getKeywordsData = React.useCallback(
+    () =>
       getValue(
-        data?.keywords.data.map((keyword) =>
+        (keywordsData || previousKeywordsData)?.keywords.data.map((keyword) =>
           getOption({ keyword: keyword as KeywordFieldsFragment, locale })
         ),
         []
       ),
-    [locale]
+    [keywordsData, locale, previousKeywordsData]
   );
 
-  const options = React.useMemo(
-    () => getKeywordsData(keywordsData),
-    [getKeywordsData, keywordsData]
-  );
+  const options = React.useMemo(() => getKeywordsData(), [getKeywordsData]);
 
   const handleSearch: SearchFunction = async (
     searchValue: string
   ): Promise<SearchResult> => {
     try {
-      const { data: searchKeywordsData, error } = await refetch({
-        ...QUERY_VARIABLES,
+      const { error } = await refetch({
         freeText: searchValue,
       });
 
       if (error) {
         throw error;
       }
 
-      return { options: getKeywordsData(searchKeywordsData) };
+      return Promise.resolve({ options: getKeywordsData() });
     } catch (error) {
       return Promise.reject(error as ApolloError);
     }

src/domain/event/eventForm/EventForm.tsx

@@ -657,7 +657,7 @@ const EventFormWrapper: React.FC<EventFormWrapperProps> = (props) => {
       validationSchema={validationSchema}
       validateOnMount
       validateOnBlur={true}
-      validateOnChange={false}
+      validateOnChange={true}
     >
       {({ setErrors, setTouched, values }) => {
         return (

yarn.lock

@@ -6880,15 +6880,15 @@ hasown@^2.0.0, hasown@^2.0.1, hasown@^2.0.2:
   dependencies:
     function-bind "^1.1.2"
 
-hds-core@4.2.0, hds-core@^4.2.0:
-  version "4.2.0"
-  resolved "https://registry.yarnpkg.com/hds-core/-/hds-core-4.2.0.tgz#2b7bbd94b48a5246c1abdc109d0c4dfdbfed7f32"
-  integrity sha512-D9GqQ/CdIrJp2ypQRB2FEbkfT/D4s/ehjwSWVQ/7pc5bZ8plOEvUTaIf2Kfl46/7U8QrQ6+N9BUd8nSl9TE0hA==
+hds-core@4.4.0, hds-core@^4.4.0:
+  version "4.4.0"
+  resolved "https://registry.yarnpkg.com/hds-core/-/hds-core-4.4.0.tgz#6f17eaa1db94294fd8708395f759ffe350f84709"
+  integrity sha512-2CRkUGyOLSVLCLOE9bfOe/Ed75qxizPyZaSFuA+hCqb/67TB2H662v9LJ5ZTfMIIn90dPd3fAocepZeUiM3stQ==
 
-hds-react@^4.2.0:
-  version "4.2.0"
-  resolved "https://registry.yarnpkg.com/hds-react/-/hds-react-4.2.0.tgz#5d8318f5883ea528bc8c30163ccfa0593fa93393"
-  integrity sha512-Tj1TzAb2Ov+JO/WSllcEvD3vlxEkSjJznTBcF1ScrAV/ZNwPDsIix+cs7bVFY/uNB8Kl2qoESf9vcd88cN0HSQ==
+hds-react@^4.4.0:
+  version "4.4.0"
+  resolved "https://registry.yarnpkg.com/hds-react/-/hds-react-4.4.0.tgz#d66da099bf15f146436858e28cfe128b578654c4"
+  integrity sha512-VSUCiP5CSfw94V+Hb1AWVjZW/wXQGeNHSrTzM+ro6uZ+4pL/TLNK4+WONkLvPzzSmI5my837w9fLAKKVCf409A==
   dependencies:
     "@apollo/client" "^3.10.1"
     "@babel/runtime" "7.17.9"
@@ -6906,7 +6906,7 @@ hds-react@^4.2.0:
     date-fns "2.16.1"
     downshift "6.0.6"
     graphql "^16.8.1"
-    hds-core "4.2.0"
+    hds-core "4.4.0"
     jwt-decode "^3.1.2"
     kashe "1.0.4"
     lodash "^4.17.21"
@@ -8732,13 +8732,13 @@ quotemeta@0.0.0:
   resolved "https://registry.yarnpkg.com/quotemeta/-/quotemeta-0.0.0.tgz#51d3a06ee0fcd6e3b501dbd28904351ad7a5a38c"
   integrity sha512-1XGObUh7RN5b58vKuAsrlfqT+Rc4vmw8N4pP9gFCq1GFlTdV0Ex/D2Ro1Drvrqj++HPi3ig0Np17XPslELeMRA==
 
-react-dom@^18.2.0:
-  version "18.2.0"
-  resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-18.2.0.tgz#22aaf38708db2674ed9ada224ca4aa708d821e3d"
-  integrity sha512-6IMTriUmvsjHUjNtEDudZfuDQUoWXVxKHhlEGSk81n4YFS+r/Kl99wXiwlVXtPBtJenozv2P+hxDsw9eA7Xo6g==
+react-dom@^18.3.1:
+  version "18.3.1"
+  resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-18.3.1.tgz#c2265d79511b57d479b3dd3fdfa51536494c5cb4"
+  integrity sha512-5m4nQKp+rZRb09LNH59GM4BxTh9251/ylbKIbpe7TpGxfJ+9kv6BLkLBXIjjspbgbnIBNqlI23tRnTWT0snUIw==
   dependencies:
     loose-envify "^1.1.0"
-    scheduler "^0.23.0"
+    scheduler "^0.23.2"
 
 react-fast-compare@^2.0.1:
   version "2.0.4"
@@ -8865,10 +8865,10 @@ react-virtual@2.10.4:
   dependencies:
     "@reach/observe-rect" "^1.1.0"
 
-react@^18.2.0:
-  version "18.2.0"
-  resolved "https://registry.yarnpkg.com/react/-/react-18.2.0.tgz#555bd98592883255fa00de14f1151a917b5d77d5"
-  integrity sha512-/3IjMdb2L9QbBdWiW5e3P2/npwMBaU9mHCSCUzNln0ZCYbcfTsGbTJrU/kGemdH2IWmB2ioZ+zkxtmq6g09fGQ==
+react@^18.3.1:
+  version "18.3.1"
+  resolved "https://registry.yarnpkg.com/react/-/react-18.3.1.tgz#49ab892009c53933625bd16b2533fc754cab2891"
+  integrity sha512-wS+hAgJShR0KhEvPJArfuPVN1+Hz1t0Y6n5jLrGQbkb4urgPE/0Rve+1kMB1v/oWgHgm4WIcV+i7F2pTVj+2iQ==
   dependencies:
     loose-envify "^1.1.0"
 
@@ -9221,10 +9221,10 @@ saxes@^6.0.0:
   dependencies:
     xmlchars "^2.2.0"
 
-scheduler@^0.23.0:
-  version "0.23.0"
-  resolved "https://registry.yarnpkg.com/scheduler/-/scheduler-0.23.0.tgz#ba8041afc3d30eb206a487b6b384002e4e61fdfe"
-  integrity sha512-CtuThmgHNg7zIZWAXi3AsyIzA3n4xx7aNyjwC2VJldO2LMVDhFK+63xGqq6CsJH4rTAt6/M+N4GhZiDYPx9eUw==
+scheduler@^0.23.2:
+  version "0.23.2"
+  resolved "https://registry.yarnpkg.com/scheduler/-/scheduler-0.23.2.tgz#414ba64a3b282892e944cf2108ecc078d115cdc3"
+  integrity sha512-UOShsPwz7NrMUqhR6t0hWjFduvOzbtv7toDH1/hIrfRNIDBnnBWd0CwJTGvTpngVlmwGCdP9/Zl/tVrDqcuYzQ==
   dependencies:
     loose-envify "^1.1.0"