fix: focus on search input after opening it, even when already open

fix #2395

Co-authored-by: David Larlet <david@larlet.fr>

Author: yohanboniface

umap/static/umap/js/modules/rendering/controls.js

@@ -242,13 +242,13 @@ export const SearchControl = BaseButton.extend({
     const [container, { input, resultsContainer }] =
       Utils.loadTemplateWithRefs(template)
     const id = Math.random()
+    this.search = new U.Search(
+      this._umap._leafletMap,
+      input,
+      this.layer,
+      this.photonOptions
+    )
     this._umap.panel.open({ content: container }).then(() => {
-      this.search = new U.Search(
-        this._umap._leafletMap,
-        input,
-        this.layer,
-        this.photonOptions
-      )
       this.search.on('ajax:send', () => {
         this._umap.fire('dataloading', { id: id })
       })

umap/static/umap/js/modules/ui/panel.js

@@ -26,12 +26,12 @@ export class Panel {
   }
 
   open({ content, className, highlight, actions = [] } = {}) {
+    let isOpen = false
     if (this.isOpen()) {
+      isOpen = true
       this.onClose()
     }
-    this.container.className = `with-transition panel window ${this.className} ${
-      this.mode || ''
-    }`
+    this.container.className = `with-transition panel window ${this.className} ${this.mode || ''} ${isOpen ? 'on' : ''}`
     if (highlight) {
       this.container.dataset.highlight = highlight
     }
@@ -56,8 +56,18 @@ export class Panel {
     }
     if (className) DomUtil.addClass(body, className)
     const promise = new Promise((resolve, reject) => {
-      DomUtil.addClass(this.container, 'on')
-      resolve(this)
+      if (isOpen) {
+        resolve(this)
+      } else {
+        this.container.addEventListener(
+          'transitionend',
+          () => {
+            resolve(this)
+          },
+          { once: true }
+        )
+        this.container.classList.add('on')
+      }
     })
     DomEvent.on(closeButton, 'click', this.close, this)
     DomEvent.on(resizeButton, 'click', this.resize, this)
@@ -83,8 +93,8 @@ export class Panel {
   }
 
   onClose() {
-    if (DomUtil.hasClass(this.container, 'on')) {
-      DomUtil.removeClass(this.container, 'on')
+    if (this.container.classList.contains('on')) {
+      this.container.classList.remove('on')
       this._leafletMap.invalidateSize({ pan: false })
     }
   }