wave-ui 3.4.3 → 3.4.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "wave-ui",
-  "version": "3.4.3",
+  "version": "3.4.4",
   "description": "An emerging UI framework for Vue.js (2 & 3) with only the bright side. :sunny:",
   "author": "Antoni Andre <antoniandre.web@gmail.com>",
   "homepage": "https://antoniandre.github.io/wave-ui",
@@ -47,7 +47,7 @@
     "build-bundle": "BUNDLE=true vite build && mv ./dist/style.css ./dist/wave-ui.css",
     "serve": "vite preview --base /wave-ui/",
     "lint": "vite lint",
-    "publish": "npm run build && npm run build-bundle && git add . && git commit -m 'Publish documentation on Github.' && git push && git push tags && npm publish --tag latest"
+    "publish": "npm run build && npm run build-bundle && git add . && git commit -m 'Publish documentation on Github.' && git push && git push --tag && npm publish --tag latest"
   },
   "devDependencies": {
     "@babel/core": "^7.21.3",

package/src/wave-ui/components/w-select.vue

@@ -2,7 +2,7 @@
 component(
   ref="formEl"
   :is="formRegister ? 'w-form-element' : 'div'"
-  v-bind="formRegister && { validators, inputValue: selectionString, disabled: isDisabled, readonly: isReadonly }"
+  v-bind="formRegister && { validators, inputValue: selectionString, disabled: isDisabled, readonly: isReadonly, isFocused }"
   v-model:valid="valid"
   @reset="onReset"
   :wrap="hasLabel && labelPosition !== 'inside'"
@@ -16,6 +16,7 @@ component(
 
   w-menu(
     v-model="showMenu"
+    @close="!$event && closeMenu()"
     :menu-class="`w-select__menu ${menuClass || ''}`"
     transition="slide-fade-down"
     :append-to="(menuProps || {}).appendTo !== undefined ? (menuProps || {}).appendTo : undefined"
@@ -26,7 +27,7 @@ component(
     template(#activator="{ on }")
       //- Input wrapper.
       .w-select__selection-wrap(
-        @click="!isDisabled && !isReadonly && (showMenu ? closeMenu : openMenu)()"
+        @click="!isDisabled && !isReadonly && onInputFieldClick()"
         role="button"
         aria-haspopup="listbox"
         :aria-expanded="showMenu ? 'true' : 'false'"
@@ -76,8 +77,8 @@ component(
       @update:model-value="onInput"
       @item-click="$emit('item-click', $event)"
       @item-select="onListItemSelect"
-      @keydown:enter="noUnselect && !multiple && closeMenu()"
-      @keydown:escape="closeMenu"
+      @keydown:enter="noUnselect && !multiple && closeMenu('la3')"
+      @keydown:escape="showMenu && (this.showMenu = false) /* Will call closeMenu() from w-menu(@close). */"
       :items="selectItems"
       :multiple="multiple"
       arrows-navigation
@@ -228,12 +229,18 @@ export default {
 
   methods: {
     onFocus (e) {
+      if (this.isFocused) return
+
       this.isFocused = true
       this.$emit('focus', e)
       return false
     },
 
     onBlur (e) {
+      // As long as the menu is open the focus is still on.
+      // When closing the menu, the focus is given back to the input (not blur yet).
+      if (this.showMenu) return
+
       this.isFocused = false
       this.$emit('blur', e)
     },
@@ -242,11 +249,10 @@ export default {
       // Forbid typing in contenteditable element.
       // Note: using contenteditable rather than input in order to be able to fit the select list
       // to its content with CSS. Only contenteditable divs/non-interactive elements can react to focus/blur ).
-      e.preventDefault()
+      // still allow meta key & ctrl key combinations and the tab key (9).
+      if (!e.metaKey && !e.ctrlKey && e.keyCode !== 9) e.preventDefault()
 
-      if ([13, 27, 38, 40].includes(e.keyCode)) e.preventDefault()
-
-      if (e.keyCode === 27) this.closeMenu() // Escape.
+      if (e.keyCode === 27 && this.showMenu) this.closeMenu('la5') // Escape.
       else if (e.keyCode === 13) this.openMenu() // Enter.
 
       // Up & down arrows.
@@ -285,12 +291,16 @@ export default {
       this.$emit('update:modelValue', selection)
       this.$emit('input', selection)
     },
+    onInputFieldClick () {
+      if (this.showMenu) this.showMenu = false // Will call `closeMenu()` from w-menu(@close).
+      else this.openMenu()
+    },
 
     // Called on item selection: on click & `enter` keydown.
     onListItemSelect (e) {
       this.$emit('item-select', e)
       // Close menu after selection on single select, but keep open if multiple.
-      if (!this.multiple) this.closeMenu()
+      if (!this.multiple) this.showMenu = false // Will call `closeMenu()` from w-menu(@close).
     },
 
     onReset () {
@@ -333,7 +343,7 @@ export default {
 
     // Close the dropdown selection list.
     closeMenu () {
-      if ((this.menuProps || {}).hideOnMenuClick === false) return
+      if (this.menuProps?.hideOnMenuClick === false) return
 
       this.showMenu = false
       // Set the focus back on the main w-select input.