Merge pull request #591 from Opetushallitus/feature/OPHOTRKEH-224

SHARED:AKR:OTR:VKT:YKI(Frontend): OPHOTRKEH-224 Comboboxin näppäimistökäyttö
Opetushallitus · Oct 24, 2023 · 6af85fb · 6af85fb
2 parents b82c28b + b73ca8a
commit 6af85fb
Show file tree

Hide file tree

Showing 8 changed files with 33 additions and 11 deletions.
diff --git a/frontend/packages/akr/package.json b/frontend/packages/akr/package.json
@@ -22,6 +22,6 @@
     "akr:tslint": "yarn g:tsc --pretty --noEmit"
   },
   "dependencies": {
-    "shared": "npm:@opetushallitus/[email protected].28"
+    "shared": "npm:@opetushallitus/[email protected].29"
   }
 }
diff --git a/frontend/packages/otr/package.json b/frontend/packages/otr/package.json
@@ -25,6 +25,6 @@
     "otr:tslint": "yarn g:tsc --pretty --noEmit"
   },
   "dependencies": {
-    "shared": "npm:@opetushallitus/[email protected].28"
+    "shared": "npm:@opetushallitus/[email protected].29"
   }
 }
diff --git a/frontend/packages/shared/CHANGELOG.MD b/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

diff --git a/frontend/packages/shared/package.json b/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",

diff --git a/frontend/packages/shared/src/components/ComboBox/ComboBox.tsx b/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}

diff --git a/frontend/packages/vkt/package.json b/frontend/packages/vkt/package.json
@@ -26,6 +26,6 @@
   },
   "dependencies": {
     "reduxjs-toolkit-persist": "^7.2.1",
-    "shared": "npm:@opetushallitus/[email protected].28"
+    "shared": "npm:@opetushallitus/[email protected].29"
   }
 }
diff --git a/frontend/packages/yki/package.json b/frontend/packages/yki/package.json
@@ -26,7 +26,7 @@
     "yki:tslint": "yarn g:tsc --pretty --noEmit"
   },
   "dependencies": {
-    "shared": "npm:@opetushallitus/[email protected].28"
+    "shared": "npm:@opetushallitus/[email protected].29"
   },
   "devDependencies": {
     "multer": "^1.4.5-lts.1"

diff --git a/frontend/yarn.lock b/frontend/yarn.lock
@@ -2890,15 +2890,15 @@ __metadata:
   version: 0.0.0-use.local
   resolution: "@opetushallitus/kieli-ja-kaantajatutkinnot.akr@workspace:packages/akr"
   dependencies:
-    shared: "npm:@opetushallitus/[email protected].28"
+    shared: "npm:@opetushallitus/[email protected].29"
   languageName: unknown
   linkType: soft
 
 "@opetushallitus/kieli-ja-kaantajatutkinnot.otr@workspace:packages/otr":
   version: 0.0.0-use.local
   resolution: "@opetushallitus/kieli-ja-kaantajatutkinnot.otr@workspace:packages/otr"
   dependencies:
-    shared: "npm:@opetushallitus/[email protected].28"
+    shared: "npm:@opetushallitus/[email protected].29"
   languageName: unknown
   linkType: soft
 
@@ -2990,7 +2990,7 @@ __metadata:
   languageName: unknown
   linkType: soft
 
-"@opetushallitus/kieli-ja-kaantajatutkinnot.shared@workspace:packages/shared, shared@npm:@opetushallitus/[email protected].28":
+"@opetushallitus/kieli-ja-kaantajatutkinnot.shared@workspace:packages/shared, shared@npm:@opetushallitus/[email protected].29":
   version: 0.0.0-use.local
   resolution: "@opetushallitus/kieli-ja-kaantajatutkinnot.shared@workspace:packages/shared"
   languageName: unknown
@@ -3001,7 +3001,7 @@ __metadata:
   resolution: "@opetushallitus/kieli-ja-kaantajatutkinnot.vkt@workspace:packages/vkt"
   dependencies:
     reduxjs-toolkit-persist: ^7.2.1
-    shared: "npm:@opetushallitus/[email protected].28"
+    shared: "npm:@opetushallitus/[email protected].29"
   languageName: unknown
   linkType: soft
 
@@ -3010,7 +3010,7 @@ __metadata:
   resolution: "@opetushallitus/kieli-ja-kaantajatutkinnot.yki@workspace:packages/yki"
   dependencies:
     multer: ^1.4.5-lts.1
-    shared: "npm:@opetushallitus/[email protected].28"
+    shared: "npm:@opetushallitus/[email protected].29"
   languageName: unknown
   linkType: soft