@lemonadejs/dropdown 5.0.0 → 5.8.0

package/dist/index.js

@@ -1,8 +1,8 @@
 /**
- * Implementar o page up and down
- * botao reset e done
- * traducoes
+ * Implement page up and down navigation
+ * Implement color attribute for items
  */
+
 if (!lemonade && typeof (require) === 'function') {
     var lemonade = require('lemonadejs');
 }
@@ -17,36 +17,80 @@ if (!Modal && typeof (require) === 'function') {
     global.Dropdown = factory();
 }(this, (function () {
 
+    class CustomEvents extends Event {
+        constructor(type, props, options) {
+            super(type, {
+                bubbles: true,
+                composed: true,
+                ...options,
+            });
+
+            if (props) {
+                for (const key in props) {
+                    // Avoid assigning if property already exists anywhere on `this`
+                    if (! (key in this)) {
+                        this[key] = props[key];
+                    }
+                }
+            }
+        }
+    }
+
+    // Dispatcher
+    const Dispatch = function(method, type, options) {
+        // Try calling the method directly if provided
+        if (typeof method === 'function') {
+            let a = Object.values(options);
+            return method(...a);
+        } else if (this.tagName) {
+            return this.dispatchEvent(new CustomEvents(type, options));
+        }
+    }
+
     // Default row height
     let defaultRowHeight = 24;
 
+    // Translations
+    const T = function(t) {
+        if (typeof(document) !== "undefined" && document.dictionary) {
+            return document.dictionary[t] || t;
+        } else {
+            return t;
+        }
+    }
+
+    const isEmpty = function(v) {
+        return v === '' || v === null || v === undefined || (Array.isArray(v) && v.length === 0);
+    }
+
     /**
-     * Compare two arrays to see if contains exact the same elements
-     * @param {number|number[]} a1
-     * @param {number|number[]} a2
+     * Compare two values (arrays, strings, numbers, etc.)
+     * Returns true if both are equal or empty
+     * @param {*} a1
+     * @param {*} a2
      */
-    const compareValues = function (a1, a2) {
+    const compareValues = function(a1, a2) {
+        if (a1 === a2 || (isEmpty(a1) && isEmpty(a2))) {
+            return true;
+        }
+
         if (!a1 || !a2) {
             return false;
         }
-        if (!Array.isArray(a1) || !Array.isArray(a2)) {
-            if (a1 === a2) {
-                return true;
-            } else {
-                return false;
-            }
-        } else {
-            let i = a1.length;
-            if (i !== a2.length) {
+
+        if (Array.isArray(a1) && Array.isArray(a2)) {
+            if (a1.length !== a2.length) {
                 return false;
             }
-            while (i--) {
+            for (let i = 0; i < a1.length; i++) {
                 if (a1[i] !== a2[i]) {
                     return false;
                 }
             }
+            return true;
         }
-        return true;
+
+        return a1 === a2;
     }
 
     const lazyLoading = function (self) {
@@ -303,7 +347,11 @@ if (!Modal && typeof (require) === 'function') {
         return data;
     }
 
-    const Dropdown = function (children) {
+    const isDOM = function(o) {
+        return (o instanceof Element || o instanceof HTMLDocument || o instanceof DocumentFragment);
+    }
+
+    const Dropdown = function (children, { onchange, onload }) {
         let self = this;
         // Data
         let data = [];
@@ -313,12 +361,12 @@ if (!Modal && typeof (require) === 'function') {
         let cursor = null;
         // Control events
         let ignoreEvents = false;
-        // Default width
-        if (! self.width) {
-            self.width = 260;
-        }
         // Lazy loading global instance
         let lazyloading = null;
+        // Tracking changes
+        let changesDetected = false;
+        // Debounce timer for search
+        let searchTimeout = null;
 
         // Data
         if (! Array.isArray(self.data)) {
@@ -332,16 +380,25 @@ if (!Modal && typeof (require) === 'function') {
             })
         }
 
+        // Decide the type based on the size of the screen
+        let autoType = self.type === 'auto';
+
         // Custom events defined by the user
-        let onload = self.onload;
-        let onchange = self.onchange;
+        let load = self.onload;
+        self.onload = null;
+        let change = self.onchange;
+        self.onchange = null;
+
+        // Compatibility
+        if (typeof self.newOptions !== 'undefined') {
+            self.insert = self.newOptions;
+        }
 
         // Cursor controllers
         const setCursor = function (index, force) {
             let item = self.rows[index];
-
             if (typeof (item) !== 'undefined') {
-                // Set cursor number
+                // Set the cursor number
                 cursor = index;
                 // Set visual indication
                 item.cursor = true;
@@ -407,9 +464,9 @@ if (!Modal && typeof (require) === 'function') {
 
         const adjustDimensions = function(data) {
             // Estimate width
-            let width = self.width;
+            let width = self.width ?? 0;
             // Adjust the width
-            let w = self.input.offsetWidth;
+            let w = getInput().offsetWidth;
             if (width < w) {
                 width = w;
             }
@@ -425,13 +482,6 @@ if (!Modal && typeof (require) === 'function') {
             });
             // Min width for the container
             self.container.parentNode.style.width = (width - 2) + 'px';
-            // Height
-            self.height = 400;
-
-            // Animation for mobile
-            if (document.documentElement.clientWidth < 800) {
-                self.animation = true;
-            }
         }
 
         const setData = function () {
@@ -465,18 +515,18 @@ if (!Modal && typeof (require) === 'function') {
 
         const updateLabel = function () {
             if (value && value.length) {
-                self.input.textContent = value.filter(v => v.selected).map(i => i.text).join('; ');
+                getInput().textContent = value.filter(v => v.selected).map(i => i.text).join('; ');
             } else {
-                self.input.textContent = '';
+                getInput().textContent = '';
             }
         }
 
         const setValue = function (v, ignoreEvent) {
             // Values
             let newValue;
-            if (!Array.isArray(v)) {
-                if (typeof (v) === 'string') {
-                    newValue = v.split(';');
+            if (! Array.isArray(v)) {
+                if (typeof(v) === 'string') {
+                    newValue = v.split(self.divisor ?? ';');
                 } else {
                     newValue = [v];
                 }
@@ -489,22 +539,24 @@ if (!Modal && typeof (require) === 'function') {
 
             if (Array.isArray(data)) {
                 data.map(function (s) {
-                    // Select values
-                    if (newValue.indexOf(s.value) !== -1) {
-                        s.selected = true;
+                    s.selected = newValue.some(v => v == s.value);
+                    if (s.selected) {
                         value.push(s);
-                    } else {
-                        s.selected = false;
                     }
                 });
             }
 
             // Update label
-            updateLabel();
+            if (self.isClosed()) {
+                updateLabel();
+            }
 
             // Component onchange
-            if (! ignoreEvent && typeof(onchange) === 'function') {
-                onchange.call(self, self, getValue());
+            if (! ignoreEvent) {
+                Dispatch.call(self, change, 'change', {
+                    instance: self,
+                    value: getValue(),
+                });
             }
         }
 
@@ -513,46 +565,13 @@ if (!Modal && typeof (require) === 'function') {
                 if (value && value.length) {
                     return value.filter(v => v.selected).map(i => i.value);
                 }
-                return [];
             } else {
                 if (value && value.length) {
                     return value[0].value;
-                } else {
-                    return '';
                 }
             }
-        }
 
-        const onclose = function () {
-            // Cursor
-            removeCursor(true);
-            // Reset search
-            if (self.autocomplete) {
-                // Go to begin of the data
-                self.rows = data;
-                // Remove editable attribute
-                self.input.removeAttribute('contenteditable');
-                // Clear input
-                self.input.textContent = '';
-            }
-
-            // Current value
-            let newValue = getValue();
-
-            // If that is different from the component value
-            if (!compareValues(newValue, self.value)) {
-                self.value = newValue;
-            } else {
-                // Update label
-                updateLabel();
-            }
-
-            // Identify the new state of the dropdown
-            self.state = false;
-
-            if (typeof (self.onclose) === 'function') {
-                self.onclose(self);
-            }
+            return null;
         }
 
         const onopen = function () {
@@ -570,20 +589,82 @@ if (!Modal && typeof (require) === 'function') {
             }
             // Prepare search field
             if (self.autocomplete) {
-                // Clear input
-                self.input.textContent = '';
+                // Get the input
+                let input = getInput();
                 // Editable
-                self.input.setAttribute('contenteditable', true);
+                input.setAttribute('contenteditable', true);
+                // Clear input
+                input.textContent = '';
                 // Focus on the item
-                self.input.focus();
+                input.focus();
             }
+            // Adjust width and height
+            adjustDimensions(self.data);
+            // Open event
+            Dispatch.call(self, self.onopen, 'open', {
+                instance: self
+            });
+        }
 
-            if (typeof (self.onopen) === 'function') {
-                self.onopen(self);
+        const onclose = function (options, origin) {
+            // Cursor
+            removeCursor(true);
+            // Reset search
+            if (self.autocomplete) {
+                // Go to begin of the data
+                self.rows = data;
+                // Get the input
+                let input = getInput();
+                if (input) {
+                    // Remove editable attribute
+                    input.removeAttribute('contenteditable');
+                    // Clear input
+                    input.textContent = '';
+                }
+            }
+
+            if (origin === 'escape') {
+                // Cancel operation and keep the same previous value
+                setValue(self.value, true);
+            } else {
+                // Current value
+                let newValue = getValue();
+
+                // If that is different from the component value
+                if (changesDetected === true && ! compareValues(newValue, self.value)) {
+                    self.value = newValue;
+                } else {
+                    // Update label
+                    updateLabel();
+                }
+            }
+
+            // Identify the new state of the dropdown
+            self.state = false;
+
+            // Close event
+            Dispatch.call(self, self.onclose, 'close', {
+                instance: self,
+                ...options
+            });
+        }
+
+        const normalizeData = function(result) {
+            if (result && result.length) {
+                return result.map((v) => {
+                    if (typeof v === 'string' || typeof v === 'number') {
+                        return { value: v, text: v };
+                    } else if (typeof v === 'object' && v.hasOwnProperty('name')) {
+                        return { value: v.id, text: v.name };
+                    } else {
+                        return v;
+                    }
+                });
             }
         }
 
         const loadData = function(result) {
+            result = normalizeData(result);
             // Loading controls
             lazyloading = lazyLoading(self);
             // Loading new data from a remote source
@@ -598,152 +679,376 @@ if (!Modal && typeof (require) === 'function') {
             if (typeof(self.value) !== 'undefined') {
                 setValue(self.value, true);
             }
-            // Custom event by the developer
-            if (typeof(onload) === 'function') {
-                onload(self);
-            }
+            // Onload method
+            Dispatch.call(self, load, 'load', {
+                instance: self
+            });
+            // Remove loading spin
+            self.input.classList.remove('lm-dropdown-loading');
         }
 
-        self.add = async function (e) {
-            if (!self.input.textContent) {
-                return false;
+        const resetData = function(result) {
+            result = normalizeData(result);
+            // Reset cursor
+            removeCursor(true);
+            let r = data.filter(item => {
+                return item.selected === true;
+            });
+            // Loading new data from a remote source
+            if (result) {
+                result.forEach((v) => {
+                    r.push(v);
+                });
             }
+            self.rows = r;
+            // Remove loading spin
+            self.input.classList.remove('lm-dropdown-loading');
 
-            e.preventDefault();
+            // Event
+            Dispatch.call(self, self.onsearch, 'search', {
+                instance: self,
+                result: result,
+            });
+        }
 
-            // New item
-            let s = {
-                text: self.input.textContent,
-                value: self.input.textContent,
-            }
+        const getInput = function() {
+            return self.input;
+        }
 
-            // Event
-            if (typeof (self.onbeforeinsert) === 'function') {
-                let elClass = self.el.classList;
-                elClass.add('lm-dropdown-loading');
-                let ret = await self.onbeforeinsert(self, s);
-                elClass.remove('lm-dropdown-loading');
-                if (ret === false) {
-                    return;
-                } else if (ret) {
-                    s = ret;
+        const search = function(query) {
+            if (! self.isClosed() && self.autocomplete) {
+
+                // Remote or normal search
+                if (self.remote === true) {
+                    // Clear existing timeout
+                    if (searchTimeout) {
+                        clearTimeout(searchTimeout);
+                    }
+                    // Loading spin
+                    self.input.classList.add('lm-dropdown-loading');
+                    // Headers
+                    let http = {
+                        headers: {
+                            'Content-Type': 'text/json',
+                        }
+                    }
+                    let ret = Dispatch.call(self, self.onbeforesearch, 'beforesearch', {
+                        instance: self,
+                        http: http,
+                        query: query,
+                    });
+
+                    if (ret === false) {
+                        return;
+                    }
+
+                    // Debounce the search with 300ms delay
+                    searchTimeout = setTimeout(() => {
+                        fetch(`${self.url}?q=${query}`, http).then(r => r.json()).then(resetData).catch((error) => {
+                            resetData([]);
+                        });
+                    }, 300);
+                } else {
+                    // Filter options
+                    let temp;
+
+                    const find = (prop) => {
+                        if (prop) {
+                            if (Array.isArray(prop)) {
+                                // match if ANY element contains the query (case-insensitive)
+                                return prop.some(v => v != null && v.toString().toLowerCase().includes(query));
+                            }
+                            // handle strings/numbers/others
+                            return prop.toString().toLowerCase().includes(query);
+                        }
+                        return false;
+                    };
+
+                    if (! query) {
+                        temp = data;
+                    } else {
+                        temp = data.filter(item => {
+                            return item.selected === true || find(item.text) || find(item.group) || find(item.keywords) || find(item.synonym);
+                        });
+                    }
+
+                    // Cursor
+                    removeCursor(true);
+                    // Update the data from the dropdown
+                    self.rows = temp;
                 }
             }
+        }
 
-            // Process the data
-            data.unshift(s);
-            // Select the new item
-            self.select(e, s);
-            // Close dropdown
-            self.search();
+        const events = {
+            focusout: (e) => {
+                if (self.modal) {
+                    if (! (e.relatedTarget && self.el.contains(e.relatedTarget))) {
+                        if (! self.isClosed()) {
+                            self.close({ origin: 'focusout '});
+                        }
+                    }
+                }
+            },
+            keydown: (e) => {
+                if (! self.isClosed()) {
+                    let prevent = false;
+                    if (e.code === 'ArrowUp') {
+                        moveCursor(-1);
+                        prevent = true;
+                    } else if (e.code === 'ArrowDown') {
+                        moveCursor(1);
+                        prevent = true;
+                    } else if (e.code === 'Home') {
+                        moveCursor(-1, true);
+                        if (!self.autocomplete) {
+                            prevent = true;
+                        }
+                    } else if (e.code === 'End') {
+                        moveCursor(1, true);
+                        if (!self.autocomplete) {
+                            prevent = true;
+                        }
+                    } else if (e.code === 'Enter') {
+                        if (e.target.tagName === 'BUTTON') {
+                            e.target.click();
+                            let input = getInput();
+                            input.focus();
+                        } else {
+                            select(e, self.rows[cursor]);
+                        }
+                        prevent = true;
+                    } else if (e.code === 'Escape') {
+                        self.close({ origin: 'escape'});
+                        prevent = true;
+                    } else {
+                        if (e.keyCode === 32 && !self.autocomplete) {
+                            select(e, self.rows[cursor]);
+                        }
+                    }
 
-            // Event
-            if (typeof (self.oninsert) === 'function') {
-                self.oninsert(self, s);
-            }
+                    if (prevent) {
+                        e.preventDefault();
+                        e.stopImmediatePropagation();
+                    }
+                } else {
+                    if (e.code === 'ArrowUp' || e.code === 'ArrowDown' || e.code === 'Enter') {
+                        self.open();
+                        e.preventDefault();
+                        e.stopImmediatePropagation();
+                    }
+                }
+            },
+            mousedown: (e) => {
+                if (e.target.classList.contains('lm-dropdown-input')) {
+                    if (self.autocomplete) {
+                        let x;
+                        if (e.changedTouches && e.changedTouches[0]) {
+                            x = e.changedTouches[0].clientX;
+                        } else {
+                            x = e.clientX;
+                        }
+                        if (e.target.offsetWidth - (x - e.target.offsetLeft) < 20) {
+                            toggle();
+                        } else {
+                            self.open();
+                        }
+                    } else {
+                        toggle();
+                    }
+                }
+            },
+            paste: (e) => {
+                if (e.target.classList.contains('lm-dropdown-input')) {
+                    let text;
+                    if (e.clipboardData || e.originalEvent.clipboardData) {
+                        text = (e.originalEvent || e).clipboardData.getData('text/plain');
+                    } else if (window.clipboardData) {
+                        text = window.clipboardData.getData('Text');
+                    }
+                    text = text.replace(/(\r\n|\n|\r)/gm, "");
+                    document.execCommand('insertText', false, text)
+                    e.preventDefault();
+                }
+            },
+            input: (e) => {
+                if (e.target.classList.contains('lm-dropdown-input')) {
+                    search(e.target.textContent.toLowerCase());
+                }
+            },
         }
 
-        self.search = function () {
-            if (self.state && self.autocomplete) {
-                // Filter options
-                let temp;
-                let value = self.input.textContent.toLowerCase()
-                if (! value) {
-                    temp = data;
+        const selectItem = function(s) {
+            if (self.remote === true) {
+                if (data.indexOf(s) === -1) {
+                    self.data.push(s);
+                    data.push(s);
+                }
+            }
+
+            if (self.multiple === true) {
+                let position = value.indexOf(s);
+                if (position === -1) {
+                    value.push(s);
+                    s.selected = true;
                 } else {
-                    temp = data.filter(item => {
-                        return item.selected === true ||
-                            (item.text.toLowerCase().includes(value)) ||
-                            (item.group && item.group.toLowerCase().includes(value)) ||
-                            (item.keywords.toLowerCase().includes(value));
-                    });
+                    value.splice(position, 1);
+                    s.selected = false;
+                }
+            } else {
+                if (value[0] === s) {
+                    if (self.allowEmpty === false) {
+                        s.selected = true;
+                    } else {
+                        s.selected = !s.selected;
+                    }
+                } else {
+                    if (value[0]) {
+                        value[0].selected = false;
+                    }
+                    s.selected = true;
+                }
+                if (s.selected) {
+                    value = [s];
+                } else {
+                    value = [];
                 }
-                // Cursor
-                removeCursor(true);
-                // Update the data from the dropdown
-                self.rows = temp;
             }
+
+            changesDetected = true;
         }
 
-        self.open = function () {
-            if (self.modal && self.modal.closed) {
-                // Open the modal
-                self.modal.closed = false;
+        const add = async function (e) {
+            let input = getInput();
+            let text = input.textContent;
+            if (! text) {
+                return false;
+            }
+
+            // New item
+            let s = {
+                text: text,
+                value: text,
             }
+
+            self.add(s);
+
+            e.preventDefault();
         }
 
-        self.close = function () {
-            // Close the modal
-            if (self.modal) {
-                self.modal.closed = true;
+        const select = function (e, s) {
+            if (s && s.disabled !== true) {
+                selectItem(s);
+                // Close the modal
+                if (self.multiple !== true) {
+                    self.close({ origin: 'button' });
+                }
             }
         }
 
-        self.toggle = function () {
+        const toggle = function () {
             if (self.modal) {
-                if (self.modal.closed) {
+                if (self.isClosed()) {
                     self.open();
                 } else {
-                    self.close();
+                    self.close({ origin: 'button' });
                 }
             }
         }
 
-        self.click = function (e) {
-            if (self.autocomplete) {
-                let x;
-                if (e.changedTouches && e.changedTouches[0]) {
-                    x = e.changedTouches[0].clientX;
-                } else {
-                    x = e.clientX;
-                }
-                if (e.target.offsetWidth - (x - e.target.offsetLeft) < 20) {
-                    self.toggle();
-                } else {
-                    self.open();
+        self.add = async function (newItem) {
+            // Event
+            if (typeof(self.onbeforeinsert) === 'function') {
+                self.input.classList.add('lm-dropdown-loading');
+                let ret = await self.onbeforeinsert(self, newItem);
+                self.input.classList.remove('lm-dropdown-loading');
+                if (ret === false) {
+                    return;
+                } else if (ret) {
+                    newItem = ret;
                 }
-            } else {
-                self.toggle();
             }
+            // Process the data
+            data.push(newItem);
+            self.data.push(newItem);
+            // Refresh screen
+            self.result.unshift(newItem);
+            self.rows.unshift(newItem);
+            self.refresh('result');
+
+            Dispatch.call(self, self.oninsert, 'insert', {
+                instance: self,
+                item: newItem,
+            });
         }
 
-        self.select = function (e, s) {
-            if (s) {
-                if (self.multiple === true) {
-                    let position = value.indexOf(s);
-                    if (position === -1) {
-                        value.push(s);
-                        s.selected = true;
-                    } else {
-                        value.splice(position, 1);
-                        s.selected = false;
+        self.open = function () {
+            if (self.modal && ! self.disabled) {
+                if (self.isClosed()) {
+                    if (autoType) {
+                        self.type = window.innerWidth > 640 ? self.type = 'default' : (self.autocomplete ? 'searchbar' : 'picker');
                     }
+                    // Track
+                    changesDetected = false;
+                    // Open the modal
+                    self.modal.open();
+                }
+            }
+        }
+
+        self.close = function (options) {
+            if (self.modal) {
+                if (options?.origin) {
+                    self.modal.close(options)
                 } else {
-                    if (value[0] === s) {
-                        if (self.allowempty === false) {
-                            s.selected = true;
-                        } else {
-                            s.selected = !s.selected;
-                        }
-                    } else {
-                        if (value[0]) {
-                            value[0].selected = false;
-                        }
-                        s.selected = true;
-                    }
-                    if (s.selected) {
-                        value = [s];
-                    } else {
-                        value = [];
-                    }
-                    // Close the modal
-                    self.close();
+                    self.modal.close({ origin: 'button' })
                 }
             }
         }
 
-        self.onload = function () {
-            if (self.type !== "inline") {
+        self.isClosed = function() {
+            if (self.modal) {
+                return self.modal.isClosed();
+            }
+        }
+
+        self.setData = function(data) {
+            self.data = data;
+        }
+
+        self.getData = function() {
+            return self.data;
+        }
+
+        self.getValue = function() {
+            return self.value;
+        }
+
+        self.setValue = function(v) {
+            self.value = v;
+        }
+
+        self.reset = function() {
+            self.value = null;
+            self.close({ origin: 'button' });
+        }
+
+        self.onevent = function(e) {
+            if (events[e.type]) {
+                events[e.type](e);
+            }
+        }
+
+        // Init with a
+        let input = self.input;
+
+        onload(() => {
+            if (self.type === "inline") {
+                // For inline dropdown
+                self.el.setAttribute('tabindex', 0);
+                // Remove search
+                self.input.remove();
+            } else {
                 // Create modal instance
                 self.modal = {
                     closed: true,
@@ -756,11 +1061,40 @@ if (!Modal && typeof (require) === 'function') {
                 };
                 // Generate modal
                 Modal(self.el.children[1], self.modal);
-            } else {
-                // For inline dropdown
-                self.el.setAttribute('tabindex', 0);
+            }
+
+            if (self.remote === 'true') {
+                self.remote = true;
+            }
+
+            if (self.autocomplete === 'true') {
+                self.autocomplete = true;
+            }
+
+            if (self.multiple === 'true') {
+                self.multiple = true;
+            }
+
+            if (self.insert === 'true') {
+                self.insert = true;
+            }
+
+            // Autocomplete will be forced to be true when insert action is active
+            if ((self.insert === true || self.type === 'searchbar' || self.remote === true) && ! self.autocomplete) {
+                self.autocomplete = true;
+            }
+
+            if (typeof(input) !== 'undefined') {
+                // Remove the native element
+                if (isDOM(input)) {
+                    input.classList.add('lm-dropdown-input');
+                }
                 // Remove search
                 self.input.remove();
+                // New input
+                self.input = input;
+            } else {
+                self.el.children[0].style.position = 'relative';
             }
 
             // Default width
@@ -768,76 +1102,44 @@ if (!Modal && typeof (require) === 'function') {
                 // Dropdown
                 self.el.style.width = self.width + 'px';
             }
-            // Adjust width and height
-            adjustDimensions(self.data);
 
-            // Focus out of the component
-            self.el.addEventListener('focusout', function (e) {
-                if (self.modal) {
-                    if (!(e.relatedTarget && self.el.contains(e.relatedTarget)) && !self.el.contains(e.relatedTarget)) {
-                        if (!self.modal.closed) {
-                            self.modal.closed = true;
-                        }
-                    }
-                }
-            });
+            // Height
+            self.height = 400;
 
-            // Key events
-            self.el.addEventListener('keydown', function (e) {
-                if (! self.modal.closed) {
-                    let prevent = false;
-                    if (e.key === 'ArrowUp') {
-                        moveCursor(-1);
-                        prevent = true;
-                    } else if (e.key === 'ArrowDown') {
-                        moveCursor(1);
-                        prevent = true;
-                    } else if (e.key === 'Home') {
-                        moveCursor(-1, true);
-                        if (!self.autocomplete) {
-                            prevent = true;
-                        }
-                    } else if (e.key === 'End') {
-                        moveCursor(1, true);
-                        if (!self.autocomplete) {
-                            prevent = true;
-                        }
-                    } else if (e.key === 'Enter') {
-                        self.select(e, self.rows[cursor]);
-                        prevent = true;
-                    } else if (e.key === 'Escape') {
-                        self.modal.closed = true;
-                        prevent = true;
-                    } else {
-                        if (e.keyCode === 32 && !self.autocomplete) {
-                            self.select(e, self.rows[cursor]);
-                        }
-                    }
+            // Animation for mobile
+            if (document.documentElement.clientWidth < 800) {
+                self.animation = true;
+            }
 
-                    if (prevent) {
-                        e.preventDefault();
-                        e.stopImmediatePropagation();
-                    }
-                } else {
-                    if (e.key === 'ArrowUp' || e.key === 'ArrowDown' || e.key === 'Enter') {
-                        self.modal.closed = false;
-                    }
-                }
-            });
+            // Events
+            self.el.addEventListener('focusout', events.focusout);
+            self.el.addEventListener('keydown', events.keydown);
+            self.el.addEventListener('mousedown', events.mousedown);
+            self.el.addEventListener('paste', events.paste);
+            self.el.addEventListener('input', events.input);
 
             // Load remote data
             if (self.url) {
-                fetch(self.url, {
-                    headers: {
-                        'Content-Type': 'text/json',
-                    }
-                }).then(r => r.json()).then(loadData);
+                if (self.remote === true) {
+                    loadData();
+                } else {
+                    // Loading spin
+                    self.input.classList.add('lm-dropdown-loading');
+                    // Load remote data
+                    fetch(self.url, {
+                        headers: {
+                            'Content-Type': 'text/json',
+                        }
+                    }).then(r => r.json()).then(loadData).catch(() => {
+                        loadData();
+                    });
+                }
             } else {
                 loadData();
             }
-        }
+        });
 
-        self.onchange = function (prop) {
+        onchange(prop => {
             if (prop === 'value') {
                 setValue(self.value);
             } else if (prop === 'data') {
@@ -848,36 +1150,21 @@ if (!Modal && typeof (require) === 'function') {
             if (typeof (lazyloading) === 'function') {
                 lazyloading(prop);
             }
-        }
-
-        /**
-         * Sanitize any HTML from be paste on the search
-         * @param e
-         */
-        self.onpaste = function (e) {
-            let text;
-            if (e.clipboardData || e.originalEvent.clipboardData) {
-                text = (e.originalEvent || e).clipboardData.getData('text/plain');
-            } else if (window.clipboardData) {
-                text = window.clipboardData.getData('Text');
-            }
-            text = text.replace(/(\r\n|\n|\r)/gm, "");
-            document.execCommand('insertText', false, text)
-            e.preventDefault();
-        }
+        });
 
-        return `<div class="lm-dropdown" data-insert="{{self.insert}}" data-type="{{self.type}}" data-state="{{self.state}}" :value="self.value" :data="self.data">
+        return render => render`<div class="lm-dropdown" data-state="{{self.state}}" data-insert="{{self.insert}}" data-type="{{self.type}}" data-disabled="{{self.disabled}}" :value="self.value" :data="self.data">
             <div class="lm-dropdown-header">
-                <div class="lm-dropdown-input" onpaste="self.onpaste" oninput="self.search" onmousedown="self.click" placeholder="{{self.placeholder}}" :ref="self.input" tabindex="0"></div>
-                <div class="lm-dropdown-add" onmousedown="self.add"></div>
+                <div class="lm-dropdown-input" placeholder="{{self.placeholder}}" :ref="self.input" tabindex="0"></div>
+                <button class="lm-dropdown-add" onclick="${add}" tabindex="0"></button>
                 <div class="lm-dropdown-header-controls">
-                    <button onclick="self.close" class="lm-dropdown-done">Done</button>
+                    <button onclick="self.reset" class="lm-dropdown-done">${T('Reset')}</button>
+                    <button onclick="self.close" class="lm-dropdown-done">${T('Done')}</button>
                 </div>
             </div>
             <div class="lm-dropdown-content">
                 <div>
                     <div :loop="self.result" :ref="self.container" :rows="self.rows">
-                        <div class="lm-dropdown-item" onclick="self.parent.select" data-cursor="{{self.cursor}}" data-selected="{{self.selected}}" data-group="{{self.header}}">
+                        <div class="lm-dropdown-item" onclick="${select}" data-cursor="{{self.cursor}}" data-disabled="{{self.disabled}}" data-selected="{{self.selected}}" data-group="{{self.header}}">
                             <div><img :src="self.image" /> <div>{{self.text}}</div></div>
                         </div>
                     </div>