SHARED(Frontend): More intuitive autocomplete behaviour.

Author: pkoivisto

frontend/packages/shared/CHANGELOG.MD

@@ -9,6 +9,12 @@ and this project adheres to [Semantic Versioning](http://semver.org/).
 
 ## [Released]
 
+## [1.9.29] - 2023-10-20
+
+### Changed
+
+- Changed behaviour of ComboBox autocomplete: spaces are trimmed from search input and matching is only performed against the start of option labels
+
 ## [1.9.28] - 2023-10-05
 
 ### Changed

frontend/packages/shared/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@opetushallitus/kieli-ja-kaantajatutkinnot.shared",
-  "version": "1.9.28",
+  "version": "1.9.29",
   "description": "Shared Frontend Package",
   "exports": {
     "./components": "./src/components/index.tsx",

frontend/packages/shared/src/components/ComboBox/ComboBox.tsx

@@ -1,6 +1,7 @@
 import {
   Autocomplete,
   AutocompleteProps,
+  createFilterOptions,
   FormControl,
   FormHelperText,
   TextField,
@@ -47,6 +48,8 @@ const isOptionEqualToValue = (
   }
 };
 
+const filterOptions = createFilterOptions({ matchFrom: 'start', trim: true });
+
 export const valueAsOption = (value: string) => ({
   value: value,
   label: value,
@@ -74,6 +77,7 @@ export const ComboBox = ({
         getOptionLabel={getOptionLabel}
         isOptionEqualToValue={isOptionEqualToValue}
         options={values}
+        filterOptions={filterOptions}
         renderInput={(params) => (
           <TextField
             {...params}
@@ -119,6 +123,7 @@ export const LabeledComboBox = ({
         getOptionLabel={getOptionLabel}
         isOptionEqualToValue={isOptionEqualToValue}
         options={values}
+        filterOptions={filterOptions}
         renderInput={(params) => (
           <TextField
             {...params}