umap-project 2.2.0__tar.gz → 2.2.0b0__tar.gz

{umap_project-2.2.0 → umap_project-2.2.0b0}/PKG-INFO

@@ -1,6 +1,6 @@
-Metadata-Version: 2.3
+Metadata-Version: 2.1
 Name: umap-project
-Version: 2.2.0
+Version: 2.2.0b0
 Summary: Create maps with OpenStreetMap layers in a minute and embed them in your site.
 Author-email: Yohan Boniface <yb@enix.org>
 Maintainer-email: David Larlet <david@larlet.fr>
@@ -26,15 +26,15 @@ Requires-Dist: rcssmin==1.1.2
 Requires-Dist: requests==2.31.0
 Requires-Dist: rjsmin==1.2.2
 Requires-Dist: social-auth-app-django==5.4.1
-Requires-Dist: social-auth-core==4.5.4
+Requires-Dist: social-auth-core==4.5.3
 Provides-Extra: dev
 Requires-Dist: djlint==1.34.1; extra == 'dev'
-Requires-Dist: hatch==1.9.7; extra == 'dev'
+Requires-Dist: hatch==1.9.4; extra == 'dev'
 Requires-Dist: isort==5.13.2; extra == 'dev'
 Requires-Dist: mkdocs-material==9.5.18; extra == 'dev'
 Requires-Dist: mkdocs==1.5.3; extra == 'dev'
-Requires-Dist: pymdown-extensions==10.8.1; extra == 'dev'
-Requires-Dist: ruff==0.4.2; extra == 'dev'
+Requires-Dist: pymdown-extensions==10.8; extra == 'dev'
+Requires-Dist: ruff==0.4.1; extra == 'dev'
 Requires-Dist: vermin==1.6.0; extra == 'dev'
 Provides-Extra: docker
 Requires-Dist: uwsgi==2.0.25.1; extra == 'docker'
@@ -44,7 +44,7 @@ Requires-Dist: playwright>=1.39; extra == 'test'
 Requires-Dist: pytest-django==4.8.0; extra == 'test'
 Requires-Dist: pytest-playwright==0.4.4; extra == 'test'
 Requires-Dist: pytest-xdist<4,>=3.5.0; extra == 'test'
-Requires-Dist: pytest==8.2.0; extra == 'test'
+Requires-Dist: pytest==8.1.1; extra == 'test'
 Description-Content-Type: text/markdown
 
 # uMap project

{umap_project-2.2.0 → umap_project-2.2.0b0}/pyproject.toml

@@ -37,25 +37,25 @@ dependencies = [
   "requests==2.31.0",
   "rcssmin==1.1.2",
   "rjsmin==1.2.2",
-  "social-auth-core==4.5.4",
+  "social-auth-core==4.5.3",
   "social-auth-app-django==5.4.1",
 ]
 
 [project.optional-dependencies]
 dev = [
-  "hatch==1.9.7",
-  "ruff==0.4.2",
+  "hatch==1.9.4",
+  "ruff==0.4.1",
   "djlint==1.34.1",
   "mkdocs==1.5.3",
   "mkdocs-material==9.5.18",
   "vermin==1.6.0",
-  "pymdown-extensions==10.8.1",
+  "pymdown-extensions==10.8",
   "isort==5.13.2",
 ]
 test = [
   "factory-boy==3.2.1",
   "playwright>=1.39",
-  "pytest==8.2.0",
+  "pytest==8.1.1",
   "pytest-django==4.8.0",
   "pytest-playwright==0.4.4",
   "pytest-xdist>=3.5.0,<4",

umap_project-2.2.0b0/umap/__init__.py

@@ -0,0 +1 @@
+VERSION = "2.2.0b0"

{umap_project-2.2.0 → umap_project-2.2.0b0}/umap/static/umap/base.css

@@ -580,29 +580,20 @@ i.info {
     margin-top: -8px;
     padding: 0 5px;
 }
-.flat-tabs {
+.pictogram-tabs {
     display: flex;
     justify-content: space-around;
     font-size: 1.2em;
-    margin-bottom: 20px;
-    border-bottom: 1px solid #bebebe;
+    padding-bottom: 20px;
 }
-.flat-tabs button {
+.pictogram-tabs button {
     padding: 10px;
+    color: #fff;
     text-decoration: none;
     cursor: pointer;
-    border-bottom: 1px solid transparent;
 }
-.flat-tabs button:hover,
-.flat-tabs .on {
+.pictogram-tabs .on {
     font-weight: bold;
-    border-bottom: 1px solid #444;
-}
-.dark .flat-tabs button {
-    color: #fff;
-}
-.dark .flat-tabs button:hover,
-.dark .flat-tabs .on {
     border-bottom: 1px solid #fff;
 }
 .umap-pictogram-category h6 {

{umap_project-2.2.0 → umap_project-2.2.0b0}/umap/static/umap/js/modules/browser.js

@@ -44,7 +44,7 @@ export default class Browser {
       U.Icon.setIconContrast(icon, colorBox, symbol, bgcolor)
     }
     const viewFeature = (e) => {
-      feature.zoomTo({ ...e, callback: feature.view })
+      feature.zoomTo({...e, callback: feature.view})
     }
     DomEvent.on(zoom_to, 'click', viewFeature)
     DomEvent.on(title, 'click', viewFeature)
@@ -135,7 +135,6 @@ export default class Browser {
     DomEvent.disableClickPropagation(container)
 
     DomUtil.createTitle(container, translate('Browse data'), 'icon-layers')
-    this.tabsMenu(container, 'browse')
     const formContainer = DomUtil.create('div', '', container)
     this.dataContainer = DomUtil.create('div', '', container)
 
@@ -166,18 +165,4 @@ export default class Browser {
     DomEvent.on(button, 'click', map.openBrowser, map)
     return button
   }
-
-  tabsMenu(container, active) {
-    const tabs = L.DomUtil.create('div', 'flat-tabs', container)
-    const browse = L.DomUtil.add('button', 'flat tab-browse', tabs, L._('Data'))
-    DomEvent.on(browse, 'click', this.open, this)
-    if (this.map.options.facetKey) {
-      const facets = L.DomUtil.add('button', 'flat tab-facets', tabs, L._('Filters'))
-      DomEvent.on(facets, 'click', this.map.facets.open, this.map.facets)
-    }
-    const info = L.DomUtil.add('button', 'flat tab-info', tabs, L._('About'))
-    DomEvent.on(info, 'click', this.map.displayCaption, this.map)
-    let el = tabs.querySelector(`.tab-${active}`)
-    L.DomUtil.addClass(el, 'on')
-  }
 }

{umap_project-2.2.0 → umap_project-2.2.0b0}/umap/static/umap/js/modules/facets.js

@@ -69,7 +69,6 @@ export default class Facets {
       container,
       translate('Facet search')
     )
-    this.map.browser.tabsMenu(container, 'facets')
     const defined = this.getDefined()
     const names = Object.keys(defined)
     const facetProperties = this.compute(names, defined)

{umap_project-2.2.0 → umap_project-2.2.0b0}/umap/static/umap/js/modules/utils.js

@@ -70,6 +70,7 @@ export default function getPurify() {
 export function escapeHTML(s) {
   s = s ? s.toString() : ''
   s = getPurify().sanitize(s, {
+    USE_PROFILES: { html: true },
     ADD_TAGS: ['iframe'],
     ALLOWED_TAGS: [
       'h3',
@@ -85,10 +86,9 @@ export function escapeHTML(s) {
       'iframe',
       'img',
       'br',
-      'span',
     ],
     ADD_ATTR: ['target', 'allow', 'allowfullscreen', 'frameborder', 'scrolling'],
-    ALLOWED_ATTR: ['href', 'src', 'width', 'height', 'style'],
+    ALLOWED_ATTR: ['href', 'src', 'width', 'height'],
     // Added: `geo:` URL scheme as defined in RFC5870:
     // https://www.rfc-editor.org/rfc/rfc5870.html
     // The base RegExp comes from:

{umap_project-2.2.0 → umap_project-2.2.0b0}/umap/static/umap/js/umap.autocomplete.js

@@ -35,25 +35,27 @@ U.AutoComplete = L.Class.extend({
   },
 
   createInput: function () {
-    this.input = L.DomUtil.element({
-      tagName: 'input',
-      type: 'text',
-      parent: this.el,
-      placeholder: this.options.placeholder,
-      autocomplete: 'off',
-      className: this.options.className,
-    })
+    this.input = L.DomUtil.element(
+      'input',
+      {
+        type: 'text',
+        placeholder: this.options.placeholder,
+        autocomplete: 'off',
+        className: this.options.className,
+      },
+      this.el
+    )
     L.DomEvent.on(this.input, 'keydown', this.onKeyDown, this)
     L.DomEvent.on(this.input, 'keyup', this.onKeyUp, this)
     L.DomEvent.on(this.input, 'blur', this.onBlur, this)
   },
 
   createContainer: function () {
-    this.container = L.DomUtil.element({
-      tagName: 'ul',
-      parent: document.body,
-      className: 'umap-autocomplete',
-    })
+    this.container = L.DomUtil.element(
+      'ul',
+      { className: 'umap-autocomplete' },
+      document.body
+    )
   },
 
   resizeContainer: function () {
@@ -172,11 +174,8 @@ U.AutoComplete = L.Class.extend({
   },
 
   createResult: function (item) {
-    const el = L.DomUtil.element({
-      tagName: 'li',
-      parent: this.container,
-      textContent: item.label,
-    })
+    const el = L.DomUtil.element('li', {}, this.container)
+    el.textContent = item.label
     const result = {
       item: item,
       el: el,
@@ -277,22 +276,15 @@ U.AutoComplete.Ajax.SelectMultiple = U.AutoComplete.Ajax.extend({
   initSelectedContainer: function () {
     return L.DomUtil.after(
       this.input,
-      L.DomUtil.element({ tagName: 'ul', className: 'umap-multiresult' })
+      L.DomUtil.element('ul', { className: 'umap-multiresult' })
     )
   },
 
   displaySelected: function (result) {
-    const result_el = L.DomUtil.element({
-      tagName: 'li',
-      parent: this.selected_container,
-    })
+    const result_el = L.DomUtil.element('li', {}, this.selected_container)
     result_el.textContent = result.item.label
-    const close = L.DomUtil.element({
-      tagName: 'span',
-      parent: result_el,
-      className: 'close',
-      textContent: '×',
-    })
+    const close = L.DomUtil.element('span', { className: 'close' }, result_el)
+    close.textContent = '×'
     L.DomEvent.on(
       close,
       'click',
@@ -310,22 +302,15 @@ U.AutoComplete.Ajax.Select = U.AutoComplete.Ajax.extend({
   initSelectedContainer: function () {
     return L.DomUtil.after(
       this.input,
-      L.DomUtil.element({ tagName: 'div', className: 'umap-singleresult' })
+      L.DomUtil.element('div', { className: 'umap-singleresult' })
     )
   },
 
   displaySelected: function (result) {
-    const result_el = L.DomUtil.element({
-      tagName: 'div',
-      parent: this.selected_container,
-    })
+    const result_el = L.DomUtil.element('div', {}, this.selected_container)
     result_el.textContent = result.item.label
-    const close = L.DomUtil.element({
-      tagName: 'span',
-      parent: result_el,
-      className: 'close',
-      textContent: '×',
-    })
+    const close = L.DomUtil.element('span', { className: 'close' }, result_el)
+    close.textContent = '×'
     this.input.style.display = 'none'
     L.DomEvent.on(
       close,

{umap_project-2.2.0 → umap_project-2.2.0b0}/umap/static/umap/js/umap.controls.js

@@ -392,7 +392,7 @@ U.EditControl = L.Control.extend({
       'mouseover',
       function () {
         map.ui.tooltip({
-          content: map.help.displayLabel('TOGGLE_EDIT'),
+          content: `${L._('Switch to edit mode')} (<kbd>Ctrl+E</kbd>)`,
           anchor: enableEditing,
           position: 'bottom',
           delay: 750,
@@ -668,29 +668,21 @@ const ControlsMixin = {
     const container = L.DomUtil.create('div', 'umap-caption')
     L.DomUtil.createTitle(container, this.options.name, 'icon-caption')
     this.permissions.addOwnerLink('h5', container)
-    this.browser.tabsMenu(container, 'info')
     if (this.options.description) {
-      const description = L.DomUtil.element({
-        tagName: 'div',
-        className: 'umap-map-description',
-        safeHTML: U.Utils.toHTML(this.options.description),
-        parent: container,
-      })
+      const description = L.DomUtil.create('div', 'umap-map-description', container)
+      description.innerHTML = U.Utils.toHTML(this.options.description)
     }
     const datalayerContainer = L.DomUtil.create('div', 'datalayer-container', container)
     this.eachVisibleDataLayer((datalayer) => {
       if (!datalayer.options.inCaption) return
       const p = L.DomUtil.create('p', 'datalayer-legend', datalayerContainer),
         legend = L.DomUtil.create('span', '', p),
-        headline = L.DomUtil.create('strong', '', p)
+        headline = L.DomUtil.create('strong', '', p),
+        description = L.DomUtil.create('span', '', p)
       datalayer.onceLoaded(function () {
         datalayer.renderLegend(legend)
         if (datalayer.options.description) {
-          L.DomUtil.element({
-            tagName: 'span',
-            parent: p,
-            safeHTML: U.Utils.toHTML(datalayer.options.description),
-          })
+          description.innerHTML = U.Utils.toHTML(datalayer.options.description)
         }
       })
       datalayer.renderToolbox(headline)
@@ -700,11 +692,12 @@ const ControlsMixin = {
       credits = L.DomUtil.createFieldset(creditsContainer, L._('Credits'))
     title = L.DomUtil.add('h5', '', credits, L._('User content credits'))
     if (this.options.shortCredit || this.options.longCredit) {
-      L.DomUtil.element({
-        tagName: 'p',
-        parent: credits,
-        safeHTML: U.Utils.toHTML(this.options.longCredit || this.options.shortCredit),
-      })
+      L.DomUtil.add(
+        'p',
+        '',
+        credits,
+        U.Utils.toHTML(this.options.longCredit || this.options.shortCredit)
+      )
     }
     if (this.options.licence) {
       const licence = L.DomUtil.add(
@@ -722,27 +715,24 @@ const ControlsMixin = {
     } else {
       L.DomUtil.add('p', '', credits, L._('No licence has been set'))
     }
+    L.DomUtil.create('hr', '', credits)
     title = L.DomUtil.create('h5', '', credits)
     title.textContent = L._('Map background credits')
-    const tilelayerCredit = L.DomUtil.create('p', '', credits)
-    L.DomUtil.element({
-      tagName: 'strong',
-      parent: tilelayerCredit,
-      textContent: `${this.selected_tilelayer.options.name} `,
-    })
-    L.DomUtil.element({
-      tagName: 'span',
-      parent: tilelayerCredit,
-      safeHTML: this.selected_tilelayer.getAttribution(),
-    })
-    const urls = {
-      leaflet: 'http://leafletjs.com',
-      django: 'https://www.djangoproject.com',
-      umap: 'http://wiki.openstreetmap.org/wiki/UMap',
-      changelog: 'https://umap-project.readthedocs.io/en/master/changelog/',
-      version: this.options.umap_version,
-    }
-    const creditHTML = L._(
+    const tilelayerCredit = L.DomUtil.create('p', '', credits),
+      name = L.DomUtil.create('strong', '', tilelayerCredit),
+      attribution = L.DomUtil.create('span', '', tilelayerCredit)
+    name.textContent = `${this.selected_tilelayer.options.name} `
+    attribution.innerHTML = this.selected_tilelayer.getAttribution()
+    L.DomUtil.create('hr', '', credits)
+    const umapCredit = L.DomUtil.create('p', '', credits),
+      urls = {
+        leaflet: 'http://leafletjs.com',
+        django: 'https://www.djangoproject.com',
+        umap: 'http://wiki.openstreetmap.org/wiki/UMap',
+        changelog: 'https://umap-project.readthedocs.io/en/master/changelog/',
+        version: this.options.umap_version,
+      }
+    umapCredit.innerHTML = L._(
       `
       Powered by <a href="{leaflet}">Leaflet</a> and
       <a href="{django}">Django</a>,
@@ -751,7 +741,6 @@ const ControlsMixin = {
       `,
       urls
     )
-    L.DomUtil.element({ tagName: 'p', innerHTML: creditHTML, parent: credits })
     this.panel.open({ content: container })
   },
 
@@ -765,7 +754,13 @@ const ControlsMixin = {
     const rightContainer = L.DomUtil.create('div', 'umap-right-edit-toolbox', container)
     const logo = L.DomUtil.create('div', 'logo', leftContainer)
     L.DomUtil.createLink('', logo, 'uMap', '/', null, L._('Go to the homepage'))
-    const nameButton = L.DomUtil.createButton('map-name', leftContainer, '')
+    const nameButton = L.DomUtil.createButton(
+      'map-name',
+      leftContainer,
+      '',
+      this.edit,
+      this
+    )
     L.DomEvent.on(
       nameButton,
       'mouseover',
@@ -814,7 +809,7 @@ const ControlsMixin = {
     update()
     this.once('saved', L.bind(update, this))
     if (this.options.editMode === 'advanced') {
-      L.DomEvent.on(nameButton, 'click', this.editCaption, this)
+      L.DomEvent.on(nameButton, 'click', this.edit, this)
       L.DomEvent.on(shareStatusButton, 'click', this.permissions.edit, this.permissions)
     }
     this.on('postsync', L.bind(update, this))
@@ -1057,16 +1052,16 @@ U.AttributionControl = L.Control.Attribution.extend({
     // Use our own container, so we can hide/show on small screens
     const credits = this._container.innerHTML
     this._container.innerHTML = ''
-    const container = L.DomUtil.create('div', 'attribution-container', this._container)
-    container.innerHTML = credits
+    const container = L.DomUtil.add(
+      'div',
+      'attribution-container',
+      this._container,
+      credits
+    )
     const shortCredit = this._map.getOption('shortCredit'),
       captionMenus = this._map.getOption('captionMenus')
     if (shortCredit) {
-      L.DomUtil.element({
-        tagName: 'span',
-        parent: container,
-        safeHTML: ` — ${U.Utils.toHTML(shortCredit)}`,
-      })
+      L.DomUtil.add('span', '', container, ` — ${U.Utils.toHTML(shortCredit)}`)
     }
     if (captionMenus) {
       const link = L.DomUtil.add('a', '', container, ` — ${L._('About')}`)

{umap_project-2.2.0 → umap_project-2.2.0b0}/umap/static/umap/js/umap.core.js

@@ -118,21 +118,19 @@ L.DomUtil.createLink = (className, container, content, url, target, title) => {
 }
 
 L.DomUtil.createIcon = (parent, className, title, size = 16) => {
-  return L.DomUtil.element({
-    tagName: 'i',
-    parent: parent,
-    className: `icon icon-${size} ${className}`,
-    title: title || '',
-  })
+  return L.DomUtil.element(
+    'i',
+    { className: `icon icon-${size} ${className}`, title: title || '' },
+    parent
+  )
 }
 
 L.DomUtil.createButtonIcon = (parent, className, title, size = 16) => {
-  return L.DomUtil.element({
-    tagName: 'button',
-    parent: parent,
-    className: `icon icon-${size} ${className}`,
-    title: title || '',
-  })
+  return L.DomUtil.element(
+    'button',
+    { className: `icon icon-${size} ${className}`, title: title || '' },
+    parent
+  )
 }
 
 L.DomUtil.createTitle = (parent, text, className, tag = 'h3') => {
@@ -165,13 +163,8 @@ L.DomUtil.classIf = (el, className, bool) => {
   else L.DomUtil.removeClass(el, className)
 }
 
-L.DomUtil.element = ({ tagName, parent, ...attrs }) => {
-  const el = document.createElement(tagName)
-  if (attrs.innerHTML) {
-    attrs.innerHTML = U.Utils.escapeHTML(attrs.innerHTML)
-  } else if (attrs.safeHTML) {
-    attrs.innerHTML = attrs.safeHTML
-  }
+L.DomUtil.element = (what, attrs, parent) => {
+  const el = document.createElement(what)
   for (const attr in attrs) {
     el[attr] = attrs[attr]
   }
@@ -321,14 +314,6 @@ U.Help = L.Class.extend({
       shortcut: 'Modifier+S',
       label: L._('Save current edits'),
     },
-    EDIT_FEATURE_LAYER: {
-      shortcut: 'Modifier+⇧+Click',
-      label: L._("Edit feature's layer"),
-    },
-    CONTINUE_LINE: {
-      shortcut: 'Modifier+Click',
-      label: L._('Continue line'),
-    },
   },
 
   displayLabel: function (action, withKbdTag = true) {

{umap_project-2.2.0 → umap_project-2.2.0b0}/umap/static/umap/js/umap.features.js

@@ -448,7 +448,7 @@ U.FeatureMixin = {
     }
     items = items.concat(
       {
-        text: this.map.help.displayLabel('EDIT_FEATURE_LAYER'),
+        text: L._("Edit feature's layer") + ' (Ctrl+⇧+Click)',
         callback: this.datalayer.edit,
         context: this.datalayer,
         iconCls: 'umap-edit',
@@ -1055,7 +1055,7 @@ U.Polyline = L.Polyline.extend({
         })
       } else if (index === 0 || index === e.vertex.getLastIndex()) {
         items.push({
-          text: this.map.help.displayLabel('CONTINUE_LINE'),
+          text: L._('Continue line (Ctrl+Click)'),
           callback: e.vertex.continue,
           context: e.vertex.continue,
         })

{umap_project-2.2.0 → umap_project-2.2.0b0}/umap/static/umap/js/umap.forms.js

@@ -475,7 +475,7 @@ L.FormBuilder.IconUrl = L.FormBuilder.BlurInput.extend({
   build: function () {
     L.FormBuilder.BlurInput.prototype.build.call(this)
     this.buttons = L.DomUtil.create('div', '', this.parentNode)
-    this.tabs = L.DomUtil.create('div', 'flat-tabs', this.parentNode)
+    this.tabs = L.DomUtil.create('div', 'pictogram-tabs', this.parentNode)
     this.body = L.DomUtil.create('div', 'umap-pictogram-body', this.parentNode)
     this.footer = L.DomUtil.create('div', '', this.parentNode)
     this.updatePreview()
@@ -757,15 +757,12 @@ L.FormBuilder.FacetSearchChoices = L.FormBuilder.Element.extend({
   },
 
   buildLabel: function () {
-    this.label = L.DomUtil.element({
-      tagName: 'legend',
-      textContent: this.options.label,
-    })
+    this.label = L.DomUtil.element('legend', {textContent: this.options.label})
   },
 
   buildLi: function (value) {
     const property_li = L.DomUtil.create('li', '', this.ul)
-    const label = L.DomUtil.create('label', '', property_li)
+    const label = L.DomUtil.add('label', '', property_li)
     const input = L.DomUtil.create('input', '', label)
     L.DomUtil.add('span', '', label, value)
 
@@ -803,14 +800,14 @@ L.FormBuilder.MinMaxBase = L.FormBuilder.Element.extend({
   build: function () {
     this.container = L.DomUtil.create('fieldset', 'umap-facet', this.parentNode)
     this.container.appendChild(this.label)
-    const { min, max, type } = this.options.criteria
+    const {min, max, type} = this.options.criteria
     this.type = type
     this.inputType = this.getInputType(this.type)
 
     const [minLabel, maxLabel] = this.getLabels()
 
     this.minLabel = L.DomUtil.create('label', '', this.container)
-    this.minLabel.textContent = minLabel
+    this.minLabel.innerHTML = minLabel
 
     this.minInput = L.DomUtil.create('input', '', this.minLabel)
     this.minInput.type = this.inputType
@@ -820,8 +817,9 @@ L.FormBuilder.MinMaxBase = L.FormBuilder.Element.extend({
       this.minInput.dataset.value = min
     }
 
+
     this.maxLabel = L.DomUtil.create('label', '', this.container)
-    this.maxLabel.textContent = maxLabel
+    this.maxLabel.innerHTML = maxLabel
 
     this.maxInput = L.DomUtil.create('input', '', this.maxLabel)
     this.maxInput.type = this.inputType
@@ -836,10 +834,7 @@ L.FormBuilder.MinMaxBase = L.FormBuilder.Element.extend({
   },
 
   buildLabel: function () {
-    this.label = L.DomUtil.element({
-      tagName: 'legend',
-      textContent: this.options.label,
-    })
+    this.label = L.DomUtil.element('legend', {textContent: this.options.label})
   },
 
   toJS: function () {
@@ -979,23 +974,22 @@ L.FormBuilder.Range = L.FormBuilder.FloatInput.extend({
   },
 
   buildHelpText: function () {
+    const datalist = L.DomUtil.create(
+      'datalist',
+      'umap-field-datalist',
+      this.getHelpTextParent()
+    )
+    datalist.id = `range-${this.options.label || this.name}`
+    this.input.setAttribute('list', datalist.id)
     let options = ''
-    const step = this.options.step || 1
-    const digits = step < 1 ? 1 : 0
-    const id = `range-${this.options.label || this.name}`
+    const step = this.options.step || 1,
+      digits = step < 1 ? 1 : 0
     for (let i = this.options.min; i <= this.options.max; i += this.options.step) {
       options += `<option value="${i.toFixed(digits)}" label="${i.toFixed(
         digits
       )}"></option>`
     }
-    const datalist = L.DomUtil.element({
-      tagName: 'datalist',
-      parent: this.getHelpTextParent(),
-      className: 'umap-field-datalist',
-      safeHTML: options,
-      id: id,
-    })
-    this.input.setAttribute('list', id)
+    datalist.innerHTML = options
     L.FormBuilder.Input.prototype.buildHelpText.call(this)
   },
 })