fix dropdown on safari (ios)

1 files changed, 107 insertions, 0 deletions

diff --git a/static/utils.js b/static/utils.js
new file mode 100644
index 0000000..60ffd64
--- /dev/null
+++ b/static/utils.js
@@ -0,0 +1,107 @@
+document.addEventListener('DOMContentLoaded', () => {
+  initMaterializeHelper(window.materializeHelper || {})
+})
+
+function initMaterializeHelper(customOptions) {
+  const options = {
+    debug: true,
+    selectOptions: true,
+    selectTriggers: true,
+    autocompletedInputLabels: true,
+    ...customOptions
+  }
+
+  if (options.selectOptions)
+    fixSelectOptions(options.debug)
+    fixNavbarDropdown(options.debug)
+  if (options.selectTriggers)
+    fixSelectTriggers(options.debug)
+  if (options.autocompletedInputLabels)
+    fixAutocompletedInputLabels(options.debug)
+}
+
+/**
+ * Issue: Select element is misbehaving on iOS.
+ * When clicking one option, other one is being selected...
+ */
+function fixSelectOptions(debug) {
+  setTimeout(() => { // To be called after M.FormSelect.init()
+    let dragging = false
+    const opts = { passive: false }
+    const options = document.querySelectorAll('.select-wrapper ul.select-dropdown li')
+  
+    if (options.length && debug) {
+      console.info('[Materialize Helper] Fixed select options', { options })
+    }
+  
+    for (const option of options) {
+      option.addEventListener('touchmove', () => { dragging = true }, opts)
+      option.addEventListener('touchstart', () => { dragging = false }, opts)
+      option.addEventListener('touchend', (e) => {
+        if (dragging) return
+        else e.stopPropagation()
+      }, opts)
+    }
+  }, 0)
+}
+
+function fixNavbarDropdown(debug) {
+  setTimeout(() => { // To be called after M.FormSelect.init()
+    let dragging = false
+    const opts = { passive: false }
+    const options = document.querySelectorAll('ul.dropdown-content li')
+  
+    if (options.length && debug) {
+      console.info('[Materialize Helper] Fixed navbar dropdown', { options })
+    }
+  
+    for (const option of options) {
+      option.addEventListener('touchmove', () => { dragging = true }, opts)
+      option.addEventListener('touchstart', () => { dragging = false }, opts)
+      option.addEventListener('touchend', (e) => {
+        if (dragging) return
+        else e.stopPropagation()
+      }, opts)
+    }
+  }, 0)
+}
+
+/**
+ * Issue: Select triggers are causing Lighthouse warnings.
+ */
+function fixSelectTriggers(debug) {
+  setTimeout(() => { // To be called after M.FormSelect.init()
+    const triggers = document.querySelectorAll('input.select-dropdown.dropdown-trigger')
+
+    for (const trigger of triggers) {
+      const wrapper = trigger.closest('.select-wrapper')
+      const select = wrapper.querySelector('select')
+      const option = select.options[select.selectedIndex]
+      trigger.placeholder = option.text
+    }
+
+    if (triggers.length && debug) {
+      console.info('[Materialize Helper] Fixed select triggers', { triggers })
+    }
+  }, 0)
+}
+
+/**
+ * Issue: Input label is covering an input when it's autocompleted.
+ */
+function fixAutocompletedInputLabels(debug) {
+  document.addEventListener('onautocomplete', function(e) {
+    const input = e.target
+    const label = input.parentNode.querySelector(`label[for="${input.id}"]`)
+    const autocompleted = input.hasAttribute('autocompleted')
+    
+    if (autocompleted && label) {
+      label.classList.add('active')
+      input.classList.add('valid')
+
+      if (debug) {
+        console.info('[Materialize Helper] Fixed autocompleted input label', { input, label })
+      }
+    }
+  })
+}