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 }) } } }) }