Merge pull request #5447 from HSLdevcom/digitransit-component-autosuggest-fixes

DT-6861 - Change digitransit-component-autosuggest

Author: vesameskanen

digitransit-component/packages/digitransit-component-autosuggest-panel/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@digitransit-component/digitransit-component-autosuggest-panel",
-  "version": "5.0.0",
+  "version": "5.1.0",
   "description": "digitransit-component autosuggest-panel module",
   "main": "index.js",
   "files": [
@@ -28,7 +28,7 @@
   "author": "Digitransit Authors",
   "license": "(AGPL-3.0 OR EUPL-1.2)",
   "peerDependencies": {
-    "@digitransit-component/digitransit-component-autosuggest": "^4.0.0",
+    "@digitransit-component/digitransit-component-autosuggest": "^4.1.0",
     "@digitransit-component/digitransit-component-icon": "^1.0.2",
     "@hsl-fi/sass": "^0.2.0",
     "classnames": "2.5.1",

digitransit-component/packages/digitransit-component-autosuggest/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@digitransit-component/digitransit-component-autosuggest",
-  "version": "4.0.0",
+  "version": "4.1.0",
   "description": "digitransit-component autosuggest module",
   "main": "index.js",
   "files": [

digitransit-component/packages/digitransit-component-autosuggest/src/helpers/MobileSearch.js

@@ -188,6 +188,8 @@ const MobileSearch = ({
       </div>
     );
   };
+  // This does not seem to do anything.
+  // When doing quick testing on this it looked like inputRef.current is always undefined.
   if (focusInput && inputRef.current?.input) {
     inputRef.current.input.focus();
   }

digitransit-component/packages/digitransit-component-autosuggest/src/index.js

@@ -428,9 +428,6 @@ class DTAutosuggest extends React.Component {
   };
 
   onBlur = () => {
-    if (this.state.renderMobileSearch) {
-      return;
-    }
     if (this.state.editing) {
       this.input.focus();
     }
@@ -439,6 +436,9 @@ class DTAutosuggest extends React.Component {
       renderMobileSearch: false,
       value: this.props.value,
     });
+    if (this.props.isMobile && this.state.renderMobileSearch) {
+      this.closeMobileSearch();
+    }
   };
 
   onSelected = (e, ref) => {
@@ -504,7 +504,7 @@ class DTAutosuggest extends React.Component {
           ) {
             this.props.focusChange();
           }
-          if (this.props.isMobile) {
+          if (this.props.isMobile && this.state.renderMobileSearch) {
             this.closeMobileSearch();
           }
         },
@@ -561,7 +561,7 @@ class DTAutosuggest extends React.Component {
                 this.props.id,
               );
             }
-            if (this.props.isMobile) {
+            if (this.props.isMobile && this.state.renderMobileSearch) {
               this.closeMobileSearch();
             }
             if (
@@ -821,15 +821,21 @@ class DTAutosuggest extends React.Component {
         this.onSuggestionsClearRequested();
       },
     );
+    this.input.focus();
   };
 
   keyDown = event => {
     if (this.selectionDone) {
       return;
     }
     const keyCode = event.key;
+    if (keyCode === 'Shift') {
+      // This enables shift + tab to be used
+      return;
+    }
     if (keyCode === 'Escape') {
-      this.setState({ editing: false });
+      // Using onBlur makes 'Escape' act similarly to using 'Tab'
+      this.onBlur();
     }
     if (this.state.editing) {
       if (keyCode === 'Enter' && this.state.value !== '') {
@@ -861,6 +867,7 @@ class DTAutosuggest extends React.Component {
     }
     if (!this.state.editing) {
       this.setState({ editing: true });
+      this.clearLocationText();
     }
 
     if (keyCode === 'Tab') {
@@ -918,8 +925,6 @@ class DTAutosuggest extends React.Component {
   };
 
   onFocus = () => {
-    this.clearLocationText();
-
     const scrollY = window.pageYOffset;
     return this.setState({ scrollY });
   };

digitransit-component/packages/digitransit-component/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@digitransit-component/digitransit-component",
-  "version": "2.0.0",
+  "version": "2.1.0",
   "description": "a JavaScript library for Digitransit",
   "main": "digitransit-component",
   "module": "digitransit-component.mjs",
@@ -14,8 +14,8 @@
     "docs": "node -r esm ../../scripts/generate-readmes"
   },
   "dependencies": {
-    "@digitransit-component/digitransit-component-autosuggest": "^4.0.0",
-    "@digitransit-component/digitransit-component-autosuggest-panel": "^5.0.0",
+    "@digitransit-component/digitransit-component-autosuggest": "^4.1.0",
+    "@digitransit-component/digitransit-component-autosuggest-panel": "^5.1.0",
     "@digitransit-component/digitransit-component-control-panel": "^2.0.1",
     "@digitransit-component/digitransit-component-favourite-bar": "2.0.8",
     "@digitransit-component/digitransit-component-favourite-editing-modal": "^2.0.4",

yarn.lock

@@ -1996,11 +1996,11 @@ __metadata:
   languageName: unknown
   linkType: soft
 
-"@digitransit-component/digitransit-component-autosuggest-panel@^5.0.0, @digitransit-component/digitransit-component-autosuggest-panel@workspace:digitransit-component/packages/digitransit-component-autosuggest-panel":
+"@digitransit-component/digitransit-component-autosuggest-panel@^5.1.0, @digitransit-component/digitransit-component-autosuggest-panel@workspace:digitransit-component/packages/digitransit-component-autosuggest-panel":
   version: 0.0.0-use.local
   resolution: "@digitransit-component/digitransit-component-autosuggest-panel@workspace:digitransit-component/packages/digitransit-component-autosuggest-panel"
   peerDependencies:
-    "@digitransit-component/digitransit-component-autosuggest": ^4.0.0
+    "@digitransit-component/digitransit-component-autosuggest": ^4.1.0
     "@digitransit-component/digitransit-component-icon": ^1.0.2
     "@hsl-fi/sass": ^0.2.0
     classnames: 2.5.1
@@ -2016,7 +2016,7 @@ __metadata:
   languageName: unknown
   linkType: soft
 
-"@digitransit-component/digitransit-component-autosuggest@^4.0.0, @digitransit-component/digitransit-component-autosuggest@workspace:digitransit-component/packages/digitransit-component-autosuggest":
+"@digitransit-component/digitransit-component-autosuggest@^4.1.0, @digitransit-component/digitransit-component-autosuggest@workspace:digitransit-component/packages/digitransit-component-autosuggest":
   version: 0.0.0-use.local
   resolution: "@digitransit-component/digitransit-component-autosuggest@workspace:digitransit-component/packages/digitransit-component-autosuggest"
   dependencies:
@@ -2206,8 +2206,8 @@ __metadata:
   version: 0.0.0-use.local
   resolution: "@digitransit-component/digitransit-component@workspace:digitransit-component/packages/digitransit-component"
   dependencies:
-    "@digitransit-component/digitransit-component-autosuggest": ^4.0.0
-    "@digitransit-component/digitransit-component-autosuggest-panel": ^5.0.0
+    "@digitransit-component/digitransit-component-autosuggest": ^4.1.0
+    "@digitransit-component/digitransit-component-autosuggest-panel": ^5.1.0
     "@digitransit-component/digitransit-component-control-panel": ^2.0.1
     "@digitransit-component/digitransit-component-favourite-bar": 2.0.8
     "@digitransit-component/digitransit-component-favourite-editing-modal": ^2.0.4