Merge pull request #115 from bilelz/search-automatic_scroll_114

✨feat(search): scroll on focus #114

package.json

@@ -25,10 +25,12 @@
     "vite": "2.1.5"
   },
   "dependencies": {
+    "@types/smoothscroll-polyfill": "0.3.1",
     "bootstrap": "5.0.0-beta3",
     "leaflet": "1.7.1",
     "leaflet.markercluster": "1.4.1",
     "lit-element": "2.4.0",
-    "page": "1.11.6"
+    "page": "1.11.6",
+    "smoothscroll-polyfill": "0.4.4"
   }
-}
+}

src/components/vmd-commune-selector.component.ts

@@ -16,7 +16,6 @@ import {Strings} from "../utils/Strings";
 import {TemplateResult} from "lit-html";
 import {DirectiveFn} from "lit-html/lib/directive";
 
-
 export type AutocompleteTriggered = { value: string };
 export type CommuneSelected = { commune: Commune };
 export type DepartementSelected = { departement: Departement };
@@ -179,7 +178,7 @@ export class VmdCommuneSelectorComponent extends LitElement {
         return html`
           <div class="autocomplete ${classMap({'_open': this.showDropdown, '_withButton': this.filter || !this.inputModeFixedToText })}">
             <input type="text" class="autocomplete-input"
-                   @focusin="${() => { this.inputHasFocus = true; }}"
+                   @focusin="${() => { this.inputHasFocus = true; window.scroll({ top: this.offsetTop - 32, behavior: 'smooth' }); }}"
                    @focusout="${this.hideDropdownWhenInputHasNotFocus}"
                    @keyup="${this.valueChanged}" .value="${this.filter}"
                    inputmode="${this.inputMode}" placeholder="${this.inputModeFixedToText?'Commune, Code postal, Département...':this.inputMode==='numeric'?'Saisissez un code postal':'Saisissez un nom de commune'}" 

src/routing/Router.ts

@@ -108,13 +108,15 @@ class Routing {
                     Promise.resolve(slottedViewComponentFactoryResult)),
                 titlePromise(context.params).catch(() => Routing.DEFAULT_TITLE)
             ]).then(([slottedViewTemplateFactory, title]) => {
+                this.currentPath === '/' && window.scroll({ top: 0, behavior: 'smooth' })
+
                 this.currentPath = path;
                 this.currentTemplateResultCreator = slottedViewTemplateFactory;
 
                 document.title = title;
 
                 this._viewChangeCallbacks.forEach(callback => callback(slottedViewTemplateFactory, path));
-
+                
                 Analytics.INSTANCE.navigationSurNouvellePage(pageName);
             })
         });

src/vmd-app.component.ts

@@ -2,6 +2,7 @@ import {LitElement, html, customElement, property, css, unsafeCSS} from 'lit-ele
 import {Router, SlottedTemplateResultFactory} from "./routing/Router";
 import globalCss from './styles/global.scss'
 import {TemplateResult} from "lit-html";
+import smoothscroll from 'smoothscroll-polyfill';
 
 @customElement('vmd-app')
 export class VmdAppComponent extends LitElement {
@@ -21,6 +22,8 @@ export class VmdAppComponent extends LitElement {
 
     constructor() {
         super();
+
+        smoothscroll.polyfill();
 
         Router.installRoutes((viewTemplateResult, path) => {
             this.viewTemplateResult = viewTemplateResult;