butane-combobox - npm Package Compare versions

Comparing version 1.0.0-4 to 1.0.0-5

dist/butane-combobox.cjs.js

@@ -34,3 +34,3 @@ 'use strict';
       ...{
-        openOnFocus: false,
+        showOnClick: false,
         onSelectedOption: () => {},
@@ -44,41 +44,69 @@ onShowMenu: () => {},
     this.select = this.container.querySelector('select');
-    if (!this.select)
-      throw new Error('ButaneCombobox requires a label element');
-    if (!this.select)
-      throw new Error('ButaneCombobox requires a select element');
-    this.init();
-  }
-
-  init() {
-    visuallyHide(this.select);
-    this.select.removeAttribute('id');
     this.id = this.label.getAttribute('for');
     this.wrapper = document.createElement('div');
     this.wrapper.setAttribute('data-butane-combobox', '');
-    this.getDefaultOptions();
+    this.container.appendChild(this.wrapper);
+    this.hideSelect();
     this.createInput();
     this.createList();
     this.createStatus();
-    this.container.appendChild(this.wrapper);
-    this.wrapper.appendChild(this.input);
-    this.wrapper.appendChild(this.list);
-    this.wrapper.appendChild(this.status);
     this.handleClicks = this.handleClicks.bind(this);
     this.handleKeydown = this.handleKeydown.bind(this);
     this.handleInput = this.handleInput.bind(this);
+    this.getDefaultOptions();
     this.addEventListeners();
   }
 
-  dispose() {
-    this.removeEventListeners();
-    this.wrapper.removeChild(this.input);
-    this.wrapper.removeChild(this.list);
-    this.wrapper.removeChild(this.status);
-    this.container.removeChild(this.wrapper);
-    this.select.removeAttribute('style');
-    this.select.removeAttribute('aria-hidden');
-    this.select.removeAttribute('tabindex');
-    this.select.setAttribute('id', this.id);
+  get menuIsVisible() {
+    return this.list.getAttribute('hidden') ? false : true;
   }
 
+  hideSelect() {
+    visuallyHide(this.select);
+    this.select.removeAttribute('id');
+  }
+
+  createInput() {
+    this.input = document.createElement('input');
+    setAttributes(this.input, {
+      'data-butane-combobox-input': '',
+      'id': this.id,
+      'type': 'text',
+      'autocapitalize': 'none',
+      'autocomplete': 'off',
+      'role': 'combobox',
+      'aria-autocomplete': 'list',
+      'aria-owns': `butane-combobox-${this.id}`,
+    });
+    const selectedIndex = this.select.options[this.select.selectedIndex];
+    if (selectedIndex.hasAttribute('selected')) {
+      this.input.value = selectedIndex.innerText;
+    } else {
+      this.select.value = '';
+    }
+    this.wrapper.appendChild(this.input);
+  }
+
+  createList() {
+    this.list = document.createElement('ul');
+    setAttributes(this.list, {
+      'data-butane-combobox-list': '',
+      'role': 'listbox',
+      'id': `butane-combobox-${this.id}`,
+    });
+    this.list.setAttribute('hidden', 'true');
+    this.wrapper.appendChild(this.list);
+  }
+
+  createStatus() {
+    this.status = document.createElement('div');
+    setAttributes(this.status, {
+      'data-butane-combobox-status': '',
+      'aria-live': 'polite',
+      'role': 'status',
+    });
+    this.wrapper.appendChild(this.status);
+    visuallyHide(this.status);
+  }
+
   addEventListeners() {
@@ -101,6 +129,3 @@ document.addEventListener('click', this.handleClicks, false);
 
-    if (
-      e.target.closest('[data-butane-combobox-input]') &&
-      this.config.openOnFocus
-    ) {
+    if (e.target.closest('[data-butane-combobox-input]') && this.config.showOnClick) {
       this.showMenu();
@@ -116,40 +141,58 @@ }
 
+  handleInput() {
+    if (this.menuIsVisible) {
+      this.renderMenuItems();
+    } else {
+      this.showMenu();
+    }
+  }
+
   handleKeydown(e) {
-    if (e.code === 'Escape' && this.menuIsVisible) {
+    switch (e.code) {
+      case 'Escape':
+        this.onOptionEscape();
+        break;
+      case 'ArrowDown':
+        this.onOptionArrowDown(e);
+        break;
+      case 'ArrowUp':
+        this.onOptionArrowUp(e);
+        break;
+      case 'Space':
+      case 'Enter':
+        this.onOptionSelect(e);
+        break;
+      case 'Tab':
+        this.onOptionTab();
+        break;
+      default:
+    }
+  }
+
+  onOptionEscape() {
+    if (this.menuIsVisible) {
       this.hideMenu();
       this.input.focus();
     }
+  }
 
-    if (
-      e.target.closest('[data-butane-combobox-input]') &&
-      e.code === 'ArrowDown'
-    ) {
+  onOptionArrowDown(e) {
+    if (e.target.closest('[data-butane-combobox-input]')) {
       e.preventDefault();
       if (!this.menuIsVisible) this.showMenu();
       this.focusFirstOption();
-    }
-
-    if (
-      e.target.closest('[data-butane-combobox-option]') &&
-      e.code === 'ArrowDown' &&
-      this.menuIsVisible
-    ) {
+    } else if (e.target.closest('[data-butane-combobox-option]')) {
       e.preventDefault();
       this.focusNextOption(e.target);
     }
+  }
 
-    if (
-      e.target.closest('[data-butane-combobox-option]') &&
-      e.code === 'ArrowUp' &&
-      this.menuIsVisible
-    ) {
-      e.preventDefault();
+  onOptionArrowUp(e) {
+    if (e.target.closest('[data-butane-combobox-option]') && this.menuIsVisible) {
       this.focusPreviousOption(e.target);
     }
+  }
 
-    if (
-      e.target.closest('[data-butane-combobox-option]') &&
-      (e.code === 'Enter' || e.code === 'Space') &&
-      this.menuIsVisible
-    ) {
+  onOptionSelect(e) {
+    if (e.target.closest('[data-butane-combobox-option]') && this.menuIsVisible) {
       e.preventDefault();
@@ -160,56 +203,10 @@ this.setSelectedOption(e.target);
     }
-
-    if (e.code === 'Tab' && this.menuIsVisible) {
-      this.hideMenu();
-    }
   }
 
-  handleInput(e) {
+  onOptionTab() {
     if (this.menuIsVisible) {
-      this.renderMenuItems();
-    } else {
-      this.showMenu();
+      this.hideMenu();
     }
   }
 
-  createInput() {
-    this.input = document.createElement('input');
-    setAttributes(this.input, {
-      'data-butane-combobox-input': '',
-      id: this.id,
-      type: 'text',
-      autocapitalize: 'none',
-      autocomplete: 'off',
-      role: 'combobox',
-      'aria-autocomplete': 'list',
-      'aria-owns': `butane-combobox-${this.id}`,
-    });
-    const selectedIndex = this.select.options[this.select.selectedIndex];
-    if (selectedIndex.hasAttribute('selected')) {
-      this.input.value = selectedIndex.innerText;
-    } else {
-      this.select.value = '';
-    }
-  }
-
-  createList() {
-    this.list = document.createElement('ul');
-    setAttributes(this.list, {
-      'data-butane-combobox-list': '',
-      role: 'listbox',
-      id: `butane-combobox-${this.id}`,
-    });
-    this.list.setAttribute('hidden', 'true');
-  }
-
-  createStatus() {
-    this.status = document.createElement('div');
-    setAttributes(this.status, {
-      'data-butane-combobox-status': '',
-      'aria-live': 'polite',
-      role: 'status',
-    });
-    visuallyHide(this.status);
-  }
-
   showMenu() {
@@ -219,5 +216,3 @@ this.renderMenuItems();
     this.list.removeAttribute('hidden');
-    if (this.config.onShowMenu) {
-      this.config.onShowMenu();
-    }
+    if (this.config.onShowMenu) this.config.onShowMenu();
   }
@@ -228,5 +223,3 @@
     this.list.setAttribute('hidden', 'true');
-    if (this.config.onHideMenu) {
-      this.config.onHideMenu();
-    }
+    if (this.config.onHideMenu) this.config.onHideMenu();
   }
@@ -239,11 +232,6 @@
     this.input.value = option.innerText;
-    this.select.value = option.innerText;
     this.select
-      .querySelector(
-        `[value="${option.getAttribute('data-butane-combobox-option-value')}"]`,
-      )
+      .querySelector(`[value="${option.getAttribute('data-butane-combobox-option-value')}"]`)
       .setAttribute('selected', 'true');
-    if (this.config.onSelectedOption) {
-      this.config.onSelectedOption(option);
-    }
+    if (this.config.onSelectedOption) this.config.onSelectedOption(option);
   }
@@ -275,7 +263,3 @@
 
-  setInputValue(value) {
-    this.input.value = value;
-  }
-
-  updateStatus() {
+  updateStatusText() {
     if (this.filteredOptions.length === 0) {
@@ -302,5 +286,3 @@ this.status.innerText = 'No results.';
       this.input.value === option.innerText ? true : false
-    }" role="option" data-butane-combobox-option-value="${option.value}">${
-      option.label
-    }</li>`;
+    }" role="option" data-butane-combobox-option-value="${option.value}">${option.label}</li>`;
   }
@@ -320,7 +302,15 @@
     }
-    this.updateStatus();
+    this.updateStatusText();
   }
 
-  get menuIsVisible() {
-    return this.list.getAttribute('hidden') ? false : true;
+  dispose() {
+    this.removeEventListeners();
+    this.wrapper.removeChild(this.input);
+    this.wrapper.removeChild(this.list);
+    this.wrapper.removeChild(this.status);
+    this.container.removeChild(this.wrapper);
+    this.select.removeAttribute('style');
+    this.select.removeAttribute('aria-hidden');
+    this.select.removeAttribute('tabindex');
+    this.select.setAttribute('id', this.id);
   }
@@ -327,0 +317,0 @@ }

dist/butane-combobox.esm.js

@@ -30,3 +30,3 @@ import matchSorter from 'match-sorter';
       ...{
-        openOnFocus: false,
+        showOnClick: false,
         onSelectedOption: () => {},
@@ -40,41 +40,69 @@ onShowMenu: () => {},
     this.select = this.container.querySelector('select');
-    if (!this.select)
-      throw new Error('ButaneCombobox requires a label element');
-    if (!this.select)
-      throw new Error('ButaneCombobox requires a select element');
-    this.init();
-  }
-
-  init() {
-    visuallyHide(this.select);
-    this.select.removeAttribute('id');
     this.id = this.label.getAttribute('for');
     this.wrapper = document.createElement('div');
     this.wrapper.setAttribute('data-butane-combobox', '');
-    this.getDefaultOptions();
+    this.container.appendChild(this.wrapper);
+    this.hideSelect();
     this.createInput();
     this.createList();
     this.createStatus();
-    this.container.appendChild(this.wrapper);
-    this.wrapper.appendChild(this.input);
-    this.wrapper.appendChild(this.list);
-    this.wrapper.appendChild(this.status);
     this.handleClicks = this.handleClicks.bind(this);
     this.handleKeydown = this.handleKeydown.bind(this);
     this.handleInput = this.handleInput.bind(this);
+    this.getDefaultOptions();
     this.addEventListeners();
   }
 
-  dispose() {
-    this.removeEventListeners();
-    this.wrapper.removeChild(this.input);
-    this.wrapper.removeChild(this.list);
-    this.wrapper.removeChild(this.status);
-    this.container.removeChild(this.wrapper);
-    this.select.removeAttribute('style');
-    this.select.removeAttribute('aria-hidden');
-    this.select.removeAttribute('tabindex');
-    this.select.setAttribute('id', this.id);
+  get menuIsVisible() {
+    return this.list.getAttribute('hidden') ? false : true;
   }
 
+  hideSelect() {
+    visuallyHide(this.select);
+    this.select.removeAttribute('id');
+  }
+
+  createInput() {
+    this.input = document.createElement('input');
+    setAttributes(this.input, {
+      'data-butane-combobox-input': '',
+      'id': this.id,
+      'type': 'text',
+      'autocapitalize': 'none',
+      'autocomplete': 'off',
+      'role': 'combobox',
+      'aria-autocomplete': 'list',
+      'aria-owns': `butane-combobox-${this.id}`,
+    });
+    const selectedIndex = this.select.options[this.select.selectedIndex];
+    if (selectedIndex.hasAttribute('selected')) {
+      this.input.value = selectedIndex.innerText;
+    } else {
+      this.select.value = '';
+    }
+    this.wrapper.appendChild(this.input);
+  }
+
+  createList() {
+    this.list = document.createElement('ul');
+    setAttributes(this.list, {
+      'data-butane-combobox-list': '',
+      'role': 'listbox',
+      'id': `butane-combobox-${this.id}`,
+    });
+    this.list.setAttribute('hidden', 'true');
+    this.wrapper.appendChild(this.list);
+  }
+
+  createStatus() {
+    this.status = document.createElement('div');
+    setAttributes(this.status, {
+      'data-butane-combobox-status': '',
+      'aria-live': 'polite',
+      'role': 'status',
+    });
+    this.wrapper.appendChild(this.status);
+    visuallyHide(this.status);
+  }
+
   addEventListeners() {
@@ -97,6 +125,3 @@ document.addEventListener('click', this.handleClicks, false);
 
-    if (
-      e.target.closest('[data-butane-combobox-input]') &&
-      this.config.openOnFocus
-    ) {
+    if (e.target.closest('[data-butane-combobox-input]') && this.config.showOnClick) {
       this.showMenu();
@@ -112,40 +137,58 @@ }
 
+  handleInput() {
+    if (this.menuIsVisible) {
+      this.renderMenuItems();
+    } else {
+      this.showMenu();
+    }
+  }
+
   handleKeydown(e) {
-    if (e.code === 'Escape' && this.menuIsVisible) {
+    switch (e.code) {
+      case 'Escape':
+        this.onOptionEscape();
+        break;
+      case 'ArrowDown':
+        this.onOptionArrowDown(e);
+        break;
+      case 'ArrowUp':
+        this.onOptionArrowUp(e);
+        break;
+      case 'Space':
+      case 'Enter':
+        this.onOptionSelect(e);
+        break;
+      case 'Tab':
+        this.onOptionTab();
+        break;
+      default:
+    }
+  }
+
+  onOptionEscape() {
+    if (this.menuIsVisible) {
       this.hideMenu();
       this.input.focus();
     }
+  }
 
-    if (
-      e.target.closest('[data-butane-combobox-input]') &&
-      e.code === 'ArrowDown'
-    ) {
+  onOptionArrowDown(e) {
+    if (e.target.closest('[data-butane-combobox-input]')) {
       e.preventDefault();
       if (!this.menuIsVisible) this.showMenu();
       this.focusFirstOption();
-    }
-
-    if (
-      e.target.closest('[data-butane-combobox-option]') &&
-      e.code === 'ArrowDown' &&
-      this.menuIsVisible
-    ) {
+    } else if (e.target.closest('[data-butane-combobox-option]')) {
       e.preventDefault();
       this.focusNextOption(e.target);
     }
+  }
 
-    if (
-      e.target.closest('[data-butane-combobox-option]') &&
-      e.code === 'ArrowUp' &&
-      this.menuIsVisible
-    ) {
-      e.preventDefault();
+  onOptionArrowUp(e) {
+    if (e.target.closest('[data-butane-combobox-option]') && this.menuIsVisible) {
       this.focusPreviousOption(e.target);
     }
+  }
 
-    if (
-      e.target.closest('[data-butane-combobox-option]') &&
-      (e.code === 'Enter' || e.code === 'Space') &&
-      this.menuIsVisible
-    ) {
+  onOptionSelect(e) {
+    if (e.target.closest('[data-butane-combobox-option]') && this.menuIsVisible) {
       e.preventDefault();
@@ -156,56 +199,10 @@ this.setSelectedOption(e.target);
     }
-
-    if (e.code === 'Tab' && this.menuIsVisible) {
-      this.hideMenu();
-    }
   }
 
-  handleInput(e) {
+  onOptionTab() {
     if (this.menuIsVisible) {
-      this.renderMenuItems();
-    } else {
-      this.showMenu();
+      this.hideMenu();
     }
   }
 
-  createInput() {
-    this.input = document.createElement('input');
-    setAttributes(this.input, {
-      'data-butane-combobox-input': '',
-      id: this.id,
-      type: 'text',
-      autocapitalize: 'none',
-      autocomplete: 'off',
-      role: 'combobox',
-      'aria-autocomplete': 'list',
-      'aria-owns': `butane-combobox-${this.id}`,
-    });
-    const selectedIndex = this.select.options[this.select.selectedIndex];
-    if (selectedIndex.hasAttribute('selected')) {
-      this.input.value = selectedIndex.innerText;
-    } else {
-      this.select.value = '';
-    }
-  }
-
-  createList() {
-    this.list = document.createElement('ul');
-    setAttributes(this.list, {
-      'data-butane-combobox-list': '',
-      role: 'listbox',
-      id: `butane-combobox-${this.id}`,
-    });
-    this.list.setAttribute('hidden', 'true');
-  }
-
-  createStatus() {
-    this.status = document.createElement('div');
-    setAttributes(this.status, {
-      'data-butane-combobox-status': '',
-      'aria-live': 'polite',
-      role: 'status',
-    });
-    visuallyHide(this.status);
-  }
-
   showMenu() {
@@ -215,5 +212,3 @@ this.renderMenuItems();
     this.list.removeAttribute('hidden');
-    if (this.config.onShowMenu) {
-      this.config.onShowMenu();
-    }
+    if (this.config.onShowMenu) this.config.onShowMenu();
   }
@@ -224,5 +219,3 @@
     this.list.setAttribute('hidden', 'true');
-    if (this.config.onHideMenu) {
-      this.config.onHideMenu();
-    }
+    if (this.config.onHideMenu) this.config.onHideMenu();
   }
@@ -235,11 +228,6 @@
     this.input.value = option.innerText;
-    this.select.value = option.innerText;
     this.select
-      .querySelector(
-        `[value="${option.getAttribute('data-butane-combobox-option-value')}"]`,
-      )
+      .querySelector(`[value="${option.getAttribute('data-butane-combobox-option-value')}"]`)
       .setAttribute('selected', 'true');
-    if (this.config.onSelectedOption) {
-      this.config.onSelectedOption(option);
-    }
+    if (this.config.onSelectedOption) this.config.onSelectedOption(option);
   }
@@ -271,7 +259,3 @@
 
-  setInputValue(value) {
-    this.input.value = value;
-  }
-
-  updateStatus() {
+  updateStatusText() {
     if (this.filteredOptions.length === 0) {
@@ -298,5 +282,3 @@ this.status.innerText = 'No results.';
       this.input.value === option.innerText ? true : false
-    }" role="option" data-butane-combobox-option-value="${option.value}">${
-      option.label
-    }</li>`;
+    }" role="option" data-butane-combobox-option-value="${option.value}">${option.label}</li>`;
   }
@@ -316,7 +298,15 @@
     }
-    this.updateStatus();
+    this.updateStatusText();
   }
 
-  get menuIsVisible() {
-    return this.list.getAttribute('hidden') ? false : true;
+  dispose() {
+    this.removeEventListeners();
+    this.wrapper.removeChild(this.input);
+    this.wrapper.removeChild(this.list);
+    this.wrapper.removeChild(this.status);
+    this.container.removeChild(this.wrapper);
+    this.select.removeAttribute('style');
+    this.select.removeAttribute('aria-hidden');
+    this.select.removeAttribute('tabindex');
+    this.select.setAttribute('id', this.id);
   }
@@ -323,0 +313,0 @@ }

dist/butane-combobox.umd.js

@@ -977,3 +977,3 @@ (function (global, factory) {
         ...{
-          openOnFocus: false,
+          showOnClick: false,
           onSelectedOption: () => {},
@@ -987,41 +987,69 @@ onShowMenu: () => {},
       this.select = this.container.querySelector('select');
-      if (!this.select)
-        throw new Error('ButaneCombobox requires a label element');
-      if (!this.select)
-        throw new Error('ButaneCombobox requires a select element');
-      this.init();
-    }
-
-    init() {
-      visuallyHide(this.select);
-      this.select.removeAttribute('id');
       this.id = this.label.getAttribute('for');
       this.wrapper = document.createElement('div');
       this.wrapper.setAttribute('data-butane-combobox', '');
-      this.getDefaultOptions();
+      this.container.appendChild(this.wrapper);
+      this.hideSelect();
       this.createInput();
       this.createList();
       this.createStatus();
-      this.container.appendChild(this.wrapper);
-      this.wrapper.appendChild(this.input);
-      this.wrapper.appendChild(this.list);
-      this.wrapper.appendChild(this.status);
       this.handleClicks = this.handleClicks.bind(this);
       this.handleKeydown = this.handleKeydown.bind(this);
       this.handleInput = this.handleInput.bind(this);
+      this.getDefaultOptions();
       this.addEventListeners();
     }
 
-    dispose() {
-      this.removeEventListeners();
-      this.wrapper.removeChild(this.input);
-      this.wrapper.removeChild(this.list);
-      this.wrapper.removeChild(this.status);
-      this.container.removeChild(this.wrapper);
-      this.select.removeAttribute('style');
-      this.select.removeAttribute('aria-hidden');
-      this.select.removeAttribute('tabindex');
-      this.select.setAttribute('id', this.id);
+    get menuIsVisible() {
+      return this.list.getAttribute('hidden') ? false : true;
     }
 
+    hideSelect() {
+      visuallyHide(this.select);
+      this.select.removeAttribute('id');
+    }
+
+    createInput() {
+      this.input = document.createElement('input');
+      setAttributes(this.input, {
+        'data-butane-combobox-input': '',
+        'id': this.id,
+        'type': 'text',
+        'autocapitalize': 'none',
+        'autocomplete': 'off',
+        'role': 'combobox',
+        'aria-autocomplete': 'list',
+        'aria-owns': `butane-combobox-${this.id}`,
+      });
+      const selectedIndex = this.select.options[this.select.selectedIndex];
+      if (selectedIndex.hasAttribute('selected')) {
+        this.input.value = selectedIndex.innerText;
+      } else {
+        this.select.value = '';
+      }
+      this.wrapper.appendChild(this.input);
+    }
+
+    createList() {
+      this.list = document.createElement('ul');
+      setAttributes(this.list, {
+        'data-butane-combobox-list': '',
+        'role': 'listbox',
+        'id': `butane-combobox-${this.id}`,
+      });
+      this.list.setAttribute('hidden', 'true');
+      this.wrapper.appendChild(this.list);
+    }
+
+    createStatus() {
+      this.status = document.createElement('div');
+      setAttributes(this.status, {
+        'data-butane-combobox-status': '',
+        'aria-live': 'polite',
+        'role': 'status',
+      });
+      this.wrapper.appendChild(this.status);
+      visuallyHide(this.status);
+    }
+
     addEventListeners() {
@@ -1044,6 +1072,3 @@ document.addEventListener('click', this.handleClicks, false);
 
-      if (
-        e.target.closest('[data-butane-combobox-input]') &&
-        this.config.openOnFocus
-      ) {
+      if (e.target.closest('[data-butane-combobox-input]') && this.config.showOnClick) {
         this.showMenu();
@@ -1059,40 +1084,58 @@ }
 
+    handleInput() {
+      if (this.menuIsVisible) {
+        this.renderMenuItems();
+      } else {
+        this.showMenu();
+      }
+    }
+
     handleKeydown(e) {
-      if (e.code === 'Escape' && this.menuIsVisible) {
+      switch (e.code) {
+        case 'Escape':
+          this.onOptionEscape();
+          break;
+        case 'ArrowDown':
+          this.onOptionArrowDown(e);
+          break;
+        case 'ArrowUp':
+          this.onOptionArrowUp(e);
+          break;
+        case 'Space':
+        case 'Enter':
+          this.onOptionSelect(e);
+          break;
+        case 'Tab':
+          this.onOptionTab();
+          break;
+        default:
+      }
+    }
+
+    onOptionEscape() {
+      if (this.menuIsVisible) {
         this.hideMenu();
         this.input.focus();
       }
+    }
 
-      if (
-        e.target.closest('[data-butane-combobox-input]') &&
-        e.code === 'ArrowDown'
-      ) {
+    onOptionArrowDown(e) {
+      if (e.target.closest('[data-butane-combobox-input]')) {
         e.preventDefault();
         if (!this.menuIsVisible) this.showMenu();
         this.focusFirstOption();
-      }
-
-      if (
-        e.target.closest('[data-butane-combobox-option]') &&
-        e.code === 'ArrowDown' &&
-        this.menuIsVisible
-      ) {
+      } else if (e.target.closest('[data-butane-combobox-option]')) {
         e.preventDefault();
         this.focusNextOption(e.target);
       }
+    }
 
-      if (
-        e.target.closest('[data-butane-combobox-option]') &&
-        e.code === 'ArrowUp' &&
-        this.menuIsVisible
-      ) {
-        e.preventDefault();
+    onOptionArrowUp(e) {
+      if (e.target.closest('[data-butane-combobox-option]') && this.menuIsVisible) {
         this.focusPreviousOption(e.target);
       }
+    }
 
-      if (
-        e.target.closest('[data-butane-combobox-option]') &&
-        (e.code === 'Enter' || e.code === 'Space') &&
-        this.menuIsVisible
-      ) {
+    onOptionSelect(e) {
+      if (e.target.closest('[data-butane-combobox-option]') && this.menuIsVisible) {
         e.preventDefault();
@@ -1103,56 +1146,10 @@ this.setSelectedOption(e.target);
       }
-
-      if (e.code === 'Tab' && this.menuIsVisible) {
-        this.hideMenu();
-      }
     }
 
-    handleInput(e) {
+    onOptionTab() {
       if (this.menuIsVisible) {
-        this.renderMenuItems();
-      } else {
-        this.showMenu();
+        this.hideMenu();
       }
     }
 
-    createInput() {
-      this.input = document.createElement('input');
-      setAttributes(this.input, {
-        'data-butane-combobox-input': '',
-        id: this.id,
-        type: 'text',
-        autocapitalize: 'none',
-        autocomplete: 'off',
-        role: 'combobox',
-        'aria-autocomplete': 'list',
-        'aria-owns': `butane-combobox-${this.id}`,
-      });
-      const selectedIndex = this.select.options[this.select.selectedIndex];
-      if (selectedIndex.hasAttribute('selected')) {
-        this.input.value = selectedIndex.innerText;
-      } else {
-        this.select.value = '';
-      }
-    }
-
-    createList() {
-      this.list = document.createElement('ul');
-      setAttributes(this.list, {
-        'data-butane-combobox-list': '',
-        role: 'listbox',
-        id: `butane-combobox-${this.id}`,
-      });
-      this.list.setAttribute('hidden', 'true');
-    }
-
-    createStatus() {
-      this.status = document.createElement('div');
-      setAttributes(this.status, {
-        'data-butane-combobox-status': '',
-        'aria-live': 'polite',
-        role: 'status',
-      });
-      visuallyHide(this.status);
-    }
-
     showMenu() {
@@ -1162,5 +1159,3 @@ this.renderMenuItems();
       this.list.removeAttribute('hidden');
-      if (this.config.onShowMenu) {
-        this.config.onShowMenu();
-      }
+      if (this.config.onShowMenu) this.config.onShowMenu();
     }
@@ -1171,5 +1166,3 @@
       this.list.setAttribute('hidden', 'true');
-      if (this.config.onHideMenu) {
-        this.config.onHideMenu();
-      }
+      if (this.config.onHideMenu) this.config.onHideMenu();
     }
@@ -1182,11 +1175,6 @@
       this.input.value = option.innerText;
-      this.select.value = option.innerText;
       this.select
-        .querySelector(
-          `[value="${option.getAttribute('data-butane-combobox-option-value')}"]`,
-        )
+        .querySelector(`[value="${option.getAttribute('data-butane-combobox-option-value')}"]`)
         .setAttribute('selected', 'true');
-      if (this.config.onSelectedOption) {
-        this.config.onSelectedOption(option);
-      }
+      if (this.config.onSelectedOption) this.config.onSelectedOption(option);
     }
@@ -1218,7 +1206,3 @@
 
-    setInputValue(value) {
-      this.input.value = value;
-    }
-
-    updateStatus() {
+    updateStatusText() {
       if (this.filteredOptions.length === 0) {
@@ -1245,5 +1229,3 @@ this.status.innerText = 'No results.';
       this.input.value === option.innerText ? true : false
-    }" role="option" data-butane-combobox-option-value="${option.value}">${
-      option.label
-    }</li>`;
+    }" role="option" data-butane-combobox-option-value="${option.value}">${option.label}</li>`;
     }
@@ -1263,7 +1245,15 @@
       }
-      this.updateStatus();
+      this.updateStatusText();
     }
 
-    get menuIsVisible() {
-      return this.list.getAttribute('hidden') ? false : true;
+    dispose() {
+      this.removeEventListeners();
+      this.wrapper.removeChild(this.input);
+      this.wrapper.removeChild(this.list);
+      this.wrapper.removeChild(this.status);
+      this.container.removeChild(this.wrapper);
+      this.select.removeAttribute('style');
+      this.select.removeAttribute('aria-hidden');
+      this.select.removeAttribute('tabindex');
+      this.select.setAttribute('id', this.id);
     }
@@ -1270,0 +1260,0 @@ }

package.json

 {
   "name": "butane-combobox",
-  "version": "1.0.0-4",
+  "version": "1.0.0-5",
   "description": "An accessible combobox/autocomplete library",
@@ -5,0 +5,0 @@ "main": "dist/butane-combobox.cjs.js",

README.md

@@ -33,9 +33,9 @@ # butane-combobox
 
-### openOnFocus
+### showOnClick
 
-When the input is focused, show options list immediately.
+When the input is clicked, show options list immediately.
 
 ```js
 new ButaneCombobox(element, {
-  openOnFocus: true,
+  showOnClick: true,
 });
@@ -42,0 +42,0 @@ ```

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Worsened metrics

Total package byte prevSize

91398

decreased by-0.36%

Lines of code

3094

decreased by-0.87%

No dependency changes