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,8 @@
 import {
   Autocomplete,
   AutocompleteProps,
+  createFilterOptions,
+  FilterOptionsState,
   FormControl,
   FormHelperText,
   TextField,
@@ -23,7 +25,11 @@ interface ComboBoxProps {
 
 type AutoCompleteComboBox = Omit<
   AutocompleteProps<AutocompleteValue, false, false, false>,
-  'options' | 'renderInput'
+  | 'options'
+  | 'renderInput'
+  | 'getOptionLabel'
+  | 'isOptionEqualToValue'
+  | 'filterOptions'
 >;
 
 const compareOptionLabels = (a: ComboBoxOption, b: ComboBoxOption) => {
@@ -47,6 +53,14 @@ const isOptionEqualToValue = (
   }
 };
 
+const filterOptions: (
+  options: Array<AutocompleteValue>,
+  state: FilterOptionsState<AutocompleteValue>
+) => Array<AutocompleteValue> = createFilterOptions({
+  matchFrom: 'start',
+  trim: true,
+});
+
 export const valueAsOption = (value: string) => ({
   value: value,
   label: value,
@@ -74,6 +88,7 @@ export const ComboBox = ({
         getOptionLabel={getOptionLabel}
         isOptionEqualToValue={isOptionEqualToValue}
         options={values}
+        filterOptions={filterOptions}
         renderInput={(params) => (
           <TextField
             {...params}
@@ -119,6 +134,7 @@ export const LabeledComboBox = ({
         getOptionLabel={getOptionLabel}
         isOptionEqualToValue={isOptionEqualToValue}
         options={values}
+        filterOptions={filterOptions}
         renderInput={(params) => (
           <TextField
             {...params}