element-pe 2.2.94 → 2.2.96

package/lib/components/select/src/select.js

@@ -32,6 +32,7 @@ var event = require('../../../constants/event.js');
 var useGlobalConfig = require('../../config-provider/src/hooks/use-global-config.js');
 var index$6 = require('../../../hooks/use-namespace/index.js');
 var index$7 = require('../../../hooks/use-locale/index.js');
+var index$8 = require('../../../hooks/use-id/index.js');
 
 const COMPONENT_NAME = "ElSelect";
 const _sfc_main = vue.defineComponent({
@@ -171,10 +172,12 @@ const _sfc_main = vue.defineComponent({
     const nsSelect = index$6.useNamespace("select");
     const nsInput = index$6.useNamespace("input");
     const { t } = index$7.useLocale();
+    const contentId = index$8.useId();
     const states = useSelect.useSelectStates(props);
     const {
       optionList,
       optionsArray,
+      hoverOption,
       selectSize,
       readonly,
       handleResize,
@@ -426,11 +429,13 @@ const _sfc_main = vue.defineComponent({
       handleMouseLeave,
       showTagList,
       collapseTagList,
-      tagTooltipRef
+      tagTooltipRef,
+      contentId,
+      hoverOption
     };
   }
 });
-const _hoisted_1 = ["disabled", "autocomplete", "aria-label"];
+const _hoisted_1 = ["disabled", "autocomplete", "aria-activedescendant", "aria-controls", "aria-expanded", "aria-label"];
 const _hoisted_2 = ["disabled"];
 const _hoisted_3 = { style: { "height": "100%", "display": "flex", "justify-content": "center", "align-items": "center" } };
 function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
@@ -469,262 +474,280 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
       persistent: _ctx.persistent,
       onShow: _ctx.handleMenuEnter
     }, {
-      default: vue.withCtx(() => [
-        vue.createElementVNode("div", {
-          class: "select-trigger",
-          onMouseenter: _cache[20] || (_cache[20] = ($event) => _ctx.inputHovering = true),
-          onMouseleave: _cache[21] || (_cache[21] = ($event) => _ctx.inputHovering = false)
-        }, [
-          _ctx.multiple ? (vue.openBlock(), vue.createElementBlock("div", {
-            key: 0,
-            ref: "tags",
-            tabindex: "-1",
-            class: vue.normalizeClass(_ctx.tagsKls),
-            style: vue.normalizeStyle(_ctx.selectTagsStyle),
-            onClick: _cache[15] || (_cache[15] = (...args) => _ctx.focus && _ctx.focus(...args))
+      default: vue.withCtx(() => {
+        var _a, _b;
+        return [
+          vue.createElementVNode("div", {
+            class: "select-trigger",
+            onMouseenter: _cache[20] || (_cache[20] = ($event) => _ctx.inputHovering = true),
+            onMouseleave: _cache[21] || (_cache[21] = ($event) => _ctx.inputHovering = false)
           }, [
-            _ctx.collapseTags && _ctx.selected.length ? (vue.openBlock(), vue.createBlock(vue.Transition, {
+            _ctx.multiple ? (vue.openBlock(), vue.createElementBlock("div", {
               key: 0,
-              onAfterLeave: _ctx.resetInputHeight,
-              duration: _ctx.forEditor ? -1 : 0
-            }, {
-              default: vue.withCtx(() => [
-                vue.createElementVNode("span", {
-                  class: vue.normalizeClass(_ctx.tagWrapperKls)
-                }, [
-                  (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(_ctx.showTagList, (item) => {
-                    return vue.openBlock(), vue.createBlock(_component_el_tag, {
-                      key: _ctx.getValueKey(item),
-                      closable: !_ctx.selectDisabled && !_ctx.selectViewMode && !item.isDisabled,
-                      size: _ctx.collapseTagSize,
-                      hit: item.hitState,
-                      type: _ctx.tagType,
-                      "disable-transitions": "",
-                      onClose: ($event) => _ctx.deleteTag($event, item)
-                    }, {
-                      default: vue.withCtx(() => [
-                        vue.createElementVNode("span", {
-                          class: vue.normalizeClass(_ctx.nsSelect.e("tags-text")),
-                          style: vue.normalizeStyle(_ctx.tagTextStyle)
-                        }, vue.toDisplayString(item.currentLabel), 7)
-                      ]),
-                      _: 2
-                    }, 1032, ["closable", "size", "hit", "type", "onClose"]);
-                  }), 128)),
-                  _ctx.selected.length > _ctx.maxCollapseTags ? (vue.openBlock(), vue.createBlock(_component_el_tag, {
-                    key: 0,
-                    closable: false,
-                    size: _ctx.collapseTagSize,
-                    type: _ctx.tagType,
-                    "disable-transitions": ""
-                  }, {
-                    default: vue.withCtx(() => [
-                      _ctx.collapseTagsTooltip ? (vue.openBlock(), vue.createBlock(_component_el_tooltip, {
-                        key: 0,
-                        ref: "tagTooltipRef",
-                        disabled: _ctx.dropMenuVisible,
-                        "fallback-placements": ["bottom", "top", "right", "left"],
-                        effect: _ctx.effect,
-                        placement: "bottom",
-                        teleported: _ctx.teleported
+              ref: "tags",
+              tabindex: "-1",
+              class: vue.normalizeClass(_ctx.tagsKls),
+              style: vue.normalizeStyle(_ctx.selectTagsStyle),
+              onClick: _cache[15] || (_cache[15] = (...args) => _ctx.focus && _ctx.focus(...args))
+            }, [
+              _ctx.collapseTags && _ctx.selected.length ? (vue.openBlock(), vue.createBlock(vue.Transition, {
+                key: 0,
+                onAfterLeave: _ctx.resetInputHeight,
+                duration: _ctx.forEditor ? -1 : 0
+              }, {
+                default: vue.withCtx(() => [
+                  vue.createElementVNode("span", {
+                    class: vue.normalizeClass(_ctx.tagWrapperKls)
+                  }, [
+                    (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(_ctx.showTagList, (item) => {
+                      return vue.openBlock(), vue.createBlock(_component_el_tag, {
+                        key: _ctx.getValueKey(item),
+                        closable: !_ctx.selectDisabled && !_ctx.selectViewMode && !item.isDisabled,
+                        size: _ctx.collapseTagSize,
+                        hit: item.hitState,
+                        type: _ctx.tagType,
+                        "disable-transitions": "",
+                        onClose: ($event) => _ctx.deleteTag($event, item)
                       }, {
                         default: vue.withCtx(() => [
                           vue.createElementVNode("span", {
-                            class: vue.normalizeClass(_ctx.nsSelect.e("tags-text"))
-                          }, "+ " + vue.toDisplayString(_ctx.selected.length - _ctx.maxCollapseTags), 3)
+                            class: vue.normalizeClass(_ctx.nsSelect.e("tags-text")),
+                            style: vue.normalizeStyle(_ctx.tagTextStyle)
+                          }, vue.toDisplayString(item.currentLabel), 7)
                         ]),
-                        content: vue.withCtx(() => [
-                          vue.createElementVNode("div", {
-                            class: vue.normalizeClass(_ctx.nsSelect.e("collapse-tags"))
-                          }, [
-                            (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(_ctx.collapseTagList, (item) => {
-                              return vue.openBlock(), vue.createElementBlock("div", {
-                                key: _ctx.getValueKey(item),
-                                class: vue.normalizeClass(_ctx.nsSelect.e("collapse-tag"))
-                              }, [
-                                vue.createVNode(_component_el_tag, {
-                                  class: "in-tooltip",
-                                  closable: !_ctx.selectDisabled && !_ctx.selectViewMode && !item.isDisabled,
-                                  size: _ctx.collapseTagSize,
-                                  hit: item.hitState,
-                                  type: _ctx.tagType,
-                                  "disable-transitions": "",
-                                  style: { margin: "2px" },
-                                  onClose: ($event) => _ctx.handleDeleteTooltipTag($event, item)
-                                }, {
-                                  default: vue.withCtx(() => [
-                                    vue.createElementVNode("span", {
-                                      class: vue.normalizeClass(_ctx.nsSelect.e("tags-text")),
-                                      style: vue.normalizeStyle({
-                                        maxWidth: _ctx.inputWidth - 75 + "px"
-                                      })
-                                    }, vue.toDisplayString(item.currentLabel), 7)
-                                  ]),
-                                  _: 2
-                                }, 1032, ["closable", "size", "hit", "type", "onClose"])
-                              ], 2);
-                            }), 128))
-                          ], 2)
-                        ]),
-                        _: 1
-                      }, 8, ["disabled", "effect", "teleported"])) : (vue.openBlock(), vue.createElementBlock("span", {
-                        key: 1,
-                        class: vue.normalizeClass(_ctx.nsSelect.e("tags-text"))
-                      }, "+ " + vue.toDisplayString(_ctx.selected.length - _ctx.maxCollapseTags), 3))
-                    ]),
-                    _: 1
-                  }, 8, ["size", "type"])) : vue.createCommentVNode("v-if", true)
-                ], 2)
-              ]),
-              _: 1
-            }, 8, ["onAfterLeave", "duration"])) : vue.createCommentVNode("v-if", true),
-            !_ctx.collapseTags ? (vue.openBlock(), vue.createBlock(vue.Transition, {
-              key: 1,
-              duration: _ctx.forEditor ? -1 : 0,
-              onAfterLeave: _ctx.resetInputHeight
-            }, {
-              default: vue.withCtx(() => [
-                vue.createElementVNode("span", {
-                  class: vue.normalizeClass(_ctx.tagWrapperKls),
-                  style: vue.normalizeStyle(_ctx.prefixWidth && _ctx.selected.length ? { marginLeft: `${_ctx.prefixWidth}px` } : "")
-                }, [
-                  (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(_ctx.selected, (item) => {
-                    return vue.openBlock(), vue.createBlock(_component_el_tag, {
-                      key: _ctx.getValueKey(item),
-                      closable: !_ctx.selectDisabled && !_ctx.selectViewMode && !item.isDisabled,
+                        _: 2
+                      }, 1032, ["closable", "size", "hit", "type", "onClose"]);
+                    }), 128)),
+                    _ctx.selected.length > _ctx.maxCollapseTags ? (vue.openBlock(), vue.createBlock(_component_el_tag, {
+                      key: 0,
+                      closable: false,
                       size: _ctx.collapseTagSize,
-                      hit: item.hitState,
                       type: _ctx.tagType,
-                      "disable-transitions": "",
-                      onClose: ($event) => _ctx.deleteTag($event, item)
+                      "disable-transitions": ""
                     }, {
                       default: vue.withCtx(() => [
-                        vue.createElementVNode("span", {
-                          class: vue.normalizeClass(_ctx.nsSelect.e("tags-text")),
-                          style: vue.normalizeStyle({ maxWidth: _ctx.inputWidth - 75 + "px" })
-                        }, vue.toDisplayString(item.currentLabel), 7)
+                        _ctx.collapseTagsTooltip ? (vue.openBlock(), vue.createBlock(_component_el_tooltip, {
+                          key: 0,
+                          ref: "tagTooltipRef",
+                          disabled: _ctx.dropMenuVisible,
+                          "fallback-placements": ["bottom", "top", "right", "left"],
+                          effect: _ctx.effect,
+                          placement: "bottom",
+                          teleported: _ctx.teleported
+                        }, {
+                          default: vue.withCtx(() => [
+                            vue.createElementVNode("span", {
+                              class: vue.normalizeClass(_ctx.nsSelect.e("tags-text"))
+                            }, "+ " + vue.toDisplayString(_ctx.selected.length - _ctx.maxCollapseTags), 3)
+                          ]),
+                          content: vue.withCtx(() => [
+                            vue.createElementVNode("div", {
+                              class: vue.normalizeClass(_ctx.nsSelect.e("collapse-tags"))
+                            }, [
+                              (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(_ctx.collapseTagList, (item) => {
+                                return vue.openBlock(), vue.createElementBlock("div", {
+                                  key: _ctx.getValueKey(item),
+                                  class: vue.normalizeClass(_ctx.nsSelect.e("collapse-tag"))
+                                }, [
+                                  vue.createVNode(_component_el_tag, {
+                                    class: "in-tooltip",
+                                    closable: !_ctx.selectDisabled && !_ctx.selectViewMode && !item.isDisabled,
+                                    size: _ctx.collapseTagSize,
+                                    hit: item.hitState,
+                                    type: _ctx.tagType,
+                                    "disable-transitions": "",
+                                    style: { margin: "2px" },
+                                    onClose: ($event) => _ctx.handleDeleteTooltipTag($event, item)
+                                  }, {
+                                    default: vue.withCtx(() => [
+                                      vue.createElementVNode("span", {
+                                        class: vue.normalizeClass(_ctx.nsSelect.e("tags-text")),
+                                        style: vue.normalizeStyle({
+                                          maxWidth: _ctx.inputWidth - 75 + "px"
+                                        })
+                                      }, vue.toDisplayString(item.currentLabel), 7)
+                                    ]),
+                                    _: 2
+                                  }, 1032, ["closable", "size", "hit", "type", "onClose"])
+                                ], 2);
+                              }), 128))
+                            ], 2)
+                          ]),
+                          _: 1
+                        }, 8, ["disabled", "effect", "teleported"])) : (vue.openBlock(), vue.createElementBlock("span", {
+                          key: 1,
+                          class: vue.normalizeClass(_ctx.nsSelect.e("tags-text"))
+                        }, "+ " + vue.toDisplayString(_ctx.selected.length - _ctx.maxCollapseTags), 3))
                       ]),
-                      _: 2
-                    }, 1032, ["closable", "size", "hit", "type", "onClose"]);
-                  }), 128))
-                ], 6)
-              ]),
-              _: 1
-            }, 8, ["duration", "onAfterLeave"])) : vue.createCommentVNode("v-if", true),
-            _ctx.filterable && !_ctx.selectDisabled ? vue.withDirectives((vue.openBlock(), vue.createElementBlock("input", {
-              key: 2,
-              ref: "input",
-              "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => _ctx.query = $event),
-              type: "text",
-              class: vue.normalizeClass(_ctx.inputKls),
-              disabled: _ctx.selectDisabled || _ctx.selectViewMode,
-              autocomplete: _ctx.autocomplete,
-              style: vue.normalizeStyle(_ctx.inputStyle),
-              "aria-label": _ctx.ariaLabel,
-              onFocus: _cache[1] || (_cache[1] = (...args) => _ctx.handleFocus && _ctx.handleFocus(...args)),
-              onBlur: _cache[2] || (_cache[2] = (...args) => _ctx.handleBlur && _ctx.handleBlur(...args)),
-              onKeyup: _cache[3] || (_cache[3] = (...args) => _ctx.managePlaceholder && _ctx.managePlaceholder(...args)),
-              onKeydown: [
-                _cache[4] || (_cache[4] = (...args) => _ctx.resetInputState && _ctx.resetInputState(...args)),
-                _cache[5] || (_cache[5] = vue.withKeys(vue.withModifiers(($event) => _ctx.navigateOptions("next"), ["prevent"]), ["down"])),
-                _cache[6] || (_cache[6] = vue.withKeys(vue.withModifiers(($event) => _ctx.navigateOptions("prev"), ["prevent"]), ["up"])),
-                _cache[7] || (_cache[7] = vue.withKeys((...args) => _ctx.handleKeydownEscape && _ctx.handleKeydownEscape(...args), ["esc"])),
-                _cache[8] || (_cache[8] = vue.withKeys(vue.withModifiers((...args) => _ctx.selectOption && _ctx.selectOption(...args), ["stop", "prevent"]), ["enter"])),
-                _cache[9] || (_cache[9] = vue.withKeys((...args) => _ctx.deletePrevTag && _ctx.deletePrevTag(...args), ["delete"])),
-                _cache[10] || (_cache[10] = vue.withKeys(($event) => _ctx.visible = false, ["tab"]))
-              ],
-              onCompositionstart: _cache[11] || (_cache[11] = (...args) => _ctx.handleComposition && _ctx.handleComposition(...args)),
-              onCompositionupdate: _cache[12] || (_cache[12] = (...args) => _ctx.handleComposition && _ctx.handleComposition(...args)),
-              onCompositionend: _cache[13] || (_cache[13] = (...args) => _ctx.handleComposition && _ctx.handleComposition(...args)),
-              onInput: _cache[14] || (_cache[14] = (...args) => _ctx.debouncedQueryChange && _ctx.debouncedQueryChange(...args))
-            }, null, 46, _hoisted_1)), [
-              [vue.vModelText, _ctx.query]
-            ]) : vue.createCommentVNode("v-if", true)
-          ], 6)) : vue.createCommentVNode("v-if", true),
-          vue.createCommentVNode(" fix: https://github.com/element-plus/element-plus/issues/11415 "),
-          _ctx.isIOS && !_ctx.multiple && _ctx.filterable && _ctx.readonly ? (vue.openBlock(), vue.createElementBlock("input", {
-            key: 1,
-            ref: "iOSInput",
-            class: vue.normalizeClass(_ctx.iOSInputKls),
-            disabled: _ctx.selectDisabled || _ctx.selectViewMode,
-            type: "text"
-          }, null, 10, _hoisted_2)) : vue.createCommentVNode("v-if", true),
-          vue.createVNode(_component_el_input, {
-            id: _ctx.id,
-            ref: "reference",
-            modelValue: _ctx.selectedLabel,
-            "onUpdate:modelValue": _cache[16] || (_cache[16] = ($event) => _ctx.selectedLabel = $event),
-            type: "text",
-            placeholder: typeof _ctx.currentPlaceholder === "function" ? _ctx.currentPlaceholder() : _ctx.currentPlaceholder,
-            name: _ctx.name,
-            autocomplete: _ctx.autocomplete,
-            size: _ctx.selectSize,
-            disabled: _ctx.selectDisabled,
-            "view-mode": _ctx.selectViewMode,
-            "table-input": _ctx.selectTableInput,
-            readonly: _ctx.readonly,
-            "validate-event": false,
-            class: vue.normalizeClass([_ctx.nsSelect.is("focus", _ctx.visible)]),
-            tabindex: _ctx.multiple && _ctx.filterable ? -1 : void 0,
-            label: _ctx.ariaLabel,
-            onFocus: _ctx.handleFocus,
-            onBlur: _ctx.handleBlur,
-            onInput: _ctx.debouncedOnInputChange,
-            onPaste: _ctx.debouncedOnInputChange,
-            onCompositionstart: _ctx.handleComposition,
-            onCompositionupdate: _ctx.handleComposition,
-            onCompositionend: _ctx.handleComposition,
-            onKeydown: [
-              _cache[17] || (_cache[17] = vue.withKeys(vue.withModifiers(($event) => _ctx.navigateOptions("next"), ["stop", "prevent"]), ["down"])),
-              _cache[18] || (_cache[18] = vue.withKeys(vue.withModifiers(($event) => _ctx.navigateOptions("prev"), ["stop", "prevent"]), ["up"])),
-              vue.withKeys(vue.withModifiers(_ctx.selectOption, ["stop", "prevent"]), ["enter"]),
-              vue.withKeys(_ctx.handleKeydownEscape, ["esc"]),
-              _cache[19] || (_cache[19] = vue.withKeys(($event) => _ctx.visible = false, ["tab"]))
-            ]
-          }, vue.createSlots({
-            suffix: vue.withCtx(() => [
-              _ctx.iconComponent && !_ctx.showClose ? (vue.openBlock(), vue.createBlock(_component_el_icon, {
-                key: 0,
-                class: vue.normalizeClass([_ctx.nsSelect.e("caret"), _ctx.nsSelect.e("icon"), _ctx.iconReverse])
-              }, {
-                default: vue.withCtx(() => [
-                  (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(_ctx.iconComponent)))
+                      _: 1
+                    }, 8, ["size", "type"])) : vue.createCommentVNode("v-if", true)
+                  ], 2)
                 ]),
                 _: 1
-              }, 8, ["class"])) : vue.createCommentVNode("v-if", true),
-              _ctx.showClose && _ctx.clearIcon ? (vue.openBlock(), vue.createBlock(_component_el_icon, {
+              }, 8, ["onAfterLeave", "duration"])) : vue.createCommentVNode("v-if", true),
+              !_ctx.collapseTags ? (vue.openBlock(), vue.createBlock(vue.Transition, {
                 key: 1,
-                class: vue.normalizeClass([_ctx.nsSelect.e("caret"), _ctx.nsSelect.e("icon")]),
-                onClick: _ctx.handleClearClick
+                duration: _ctx.forEditor ? -1 : 0,
+                onAfterLeave: _ctx.resetInputHeight
               }, {
                 default: vue.withCtx(() => [
-                  (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(_ctx.clearIcon)))
+                  vue.createElementVNode("span", {
+                    class: vue.normalizeClass(_ctx.tagWrapperKls),
+                    style: vue.normalizeStyle(_ctx.prefixWidth && _ctx.selected.length ? { marginLeft: `${_ctx.prefixWidth}px` } : "")
+                  }, [
+                    (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(_ctx.selected, (item) => {
+                      return vue.openBlock(), vue.createBlock(_component_el_tag, {
+                        key: _ctx.getValueKey(item),
+                        closable: !_ctx.selectDisabled && !_ctx.selectViewMode && !item.isDisabled,
+                        size: _ctx.collapseTagSize,
+                        hit: item.hitState,
+                        type: _ctx.tagType,
+                        "disable-transitions": "",
+                        onClose: ($event) => _ctx.deleteTag($event, item)
+                      }, {
+                        default: vue.withCtx(() => [
+                          vue.createElementVNode("span", {
+                            class: vue.normalizeClass(_ctx.nsSelect.e("tags-text")),
+                            style: vue.normalizeStyle({ maxWidth: _ctx.inputWidth - 75 + "px" })
+                          }, vue.toDisplayString(item.currentLabel), 7)
+                        ]),
+                        _: 2
+                      }, 1032, ["closable", "size", "hit", "type", "onClose"]);
+                    }), 128))
+                  ], 6)
                 ]),
                 _: 1
-              }, 8, ["class", "onClick"])) : vue.createCommentVNode("v-if", true)
-            ]),
-            _: 2
-          }, [
-            _ctx.$slots.prefix ? {
-              name: "prefix",
-              fn: vue.withCtx(() => [
-                vue.createElementVNode("div", _hoisted_3, [
-                  vue.renderSlot(_ctx.$slots, "prefix")
+              }, 8, ["duration", "onAfterLeave"])) : vue.createCommentVNode("v-if", true),
+              _ctx.filterable && !_ctx.selectDisabled ? vue.withDirectives((vue.openBlock(), vue.createElementBlock("input", {
+                key: 2,
+                ref: "input",
+                "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => _ctx.query = $event),
+                type: "text",
+                class: vue.normalizeClass(_ctx.inputKls),
+                disabled: _ctx.selectDisabled || _ctx.selectViewMode,
+                autocomplete: _ctx.autocomplete,
+                style: vue.normalizeStyle(_ctx.inputStyle),
+                role: "combobox",
+                "aria-activedescendant": ((_a = _ctx.hoverOption) == null ? void 0 : _a.id) || "",
+                "aria-controls": _ctx.contentId,
+                "aria-expanded": _ctx.dropMenuVisible,
+                "aria-label": _ctx.ariaLabel,
+                "aria-autocomplete": "none",
+                "aria-haspopup": "listbox",
+                onFocus: _cache[1] || (_cache[1] = (...args) => _ctx.handleFocus && _ctx.handleFocus(...args)),
+                onBlur: _cache[2] || (_cache[2] = (...args) => _ctx.handleBlur && _ctx.handleBlur(...args)),
+                onKeyup: _cache[3] || (_cache[3] = (...args) => _ctx.managePlaceholder && _ctx.managePlaceholder(...args)),
+                onKeydown: [
+                  _cache[4] || (_cache[4] = (...args) => _ctx.resetInputState && _ctx.resetInputState(...args)),
+                  _cache[5] || (_cache[5] = vue.withKeys(vue.withModifiers(($event) => _ctx.navigateOptions("next"), ["prevent"]), ["down"])),
+                  _cache[6] || (_cache[6] = vue.withKeys(vue.withModifiers(($event) => _ctx.navigateOptions("prev"), ["prevent"]), ["up"])),
+                  _cache[7] || (_cache[7] = vue.withKeys((...args) => _ctx.handleKeydownEscape && _ctx.handleKeydownEscape(...args), ["esc"])),
+                  _cache[8] || (_cache[8] = vue.withKeys(vue.withModifiers((...args) => _ctx.selectOption && _ctx.selectOption(...args), ["stop", "prevent"]), ["enter"])),
+                  _cache[9] || (_cache[9] = vue.withKeys((...args) => _ctx.deletePrevTag && _ctx.deletePrevTag(...args), ["delete"])),
+                  _cache[10] || (_cache[10] = vue.withKeys(($event) => _ctx.visible = false, ["tab"]))
+                ],
+                onCompositionstart: _cache[11] || (_cache[11] = (...args) => _ctx.handleComposition && _ctx.handleComposition(...args)),
+                onCompositionupdate: _cache[12] || (_cache[12] = (...args) => _ctx.handleComposition && _ctx.handleComposition(...args)),
+                onCompositionend: _cache[13] || (_cache[13] = (...args) => _ctx.handleComposition && _ctx.handleComposition(...args)),
+                onInput: _cache[14] || (_cache[14] = (...args) => _ctx.debouncedQueryChange && _ctx.debouncedQueryChange(...args))
+              }, null, 46, _hoisted_1)), [
+                [vue.vModelText, _ctx.query]
+              ]) : vue.createCommentVNode("v-if", true)
+            ], 6)) : vue.createCommentVNode("v-if", true),
+            _ctx.isIOS && !_ctx.multiple && _ctx.filterable && _ctx.readonly ? (vue.openBlock(), vue.createElementBlock("input", {
+              key: 1,
+              ref: "iOSInput",
+              class: vue.normalizeClass(_ctx.iOSInputKls),
+              disabled: _ctx.selectDisabled || _ctx.selectViewMode,
+              type: "text"
+            }, null, 10, _hoisted_2)) : vue.createCommentVNode("v-if", true),
+            vue.createVNode(_component_el_input, {
+              id: _ctx.id,
+              ref: "reference",
+              modelValue: _ctx.selectedLabel,
+              "onUpdate:modelValue": _cache[16] || (_cache[16] = ($event) => _ctx.selectedLabel = $event),
+              type: "text",
+              placeholder: typeof _ctx.currentPlaceholder === "function" ? _ctx.currentPlaceholder() : _ctx.currentPlaceholder,
+              name: _ctx.name,
+              autocomplete: _ctx.autocomplete,
+              size: _ctx.selectSize,
+              disabled: _ctx.selectDisabled,
+              "view-mode": _ctx.selectViewMode,
+              "table-input": _ctx.selectTableInput,
+              readonly: _ctx.readonly,
+              "validate-event": false,
+              class: vue.normalizeClass([_ctx.nsSelect.is("focus", _ctx.visible)]),
+              tabindex: _ctx.multiple && _ctx.filterable ? -1 : void 0,
+              role: "combobox",
+              "aria-activedescendant": ((_b = _ctx.hoverOption) == null ? void 0 : _b.id) || "",
+              "aria-controls": _ctx.contentId,
+              "aria-expanded": _ctx.dropMenuVisible,
+              label: _ctx.ariaLabel,
+              "aria-autocomplete": "none",
+              "aria-haspopup": "listbox",
+              onFocus: _ctx.handleFocus,
+              onBlur: _ctx.handleBlur,
+              onInput: _ctx.debouncedOnInputChange,
+              onPaste: _ctx.debouncedOnInputChange,
+              onCompositionstart: _ctx.handleComposition,
+              onCompositionupdate: _ctx.handleComposition,
+              onCompositionend: _ctx.handleComposition,
+              onKeydown: [
+                _cache[17] || (_cache[17] = vue.withKeys(vue.withModifiers(($event) => _ctx.navigateOptions("next"), ["stop", "prevent"]), ["down"])),
+                _cache[18] || (_cache[18] = vue.withKeys(vue.withModifiers(($event) => _ctx.navigateOptions("prev"), ["stop", "prevent"]), ["up"])),
+                vue.withKeys(vue.withModifiers(_ctx.selectOption, ["stop", "prevent"]), ["enter"]),
+                vue.withKeys(_ctx.handleKeydownEscape, ["esc"]),
+                _cache[19] || (_cache[19] = vue.withKeys(($event) => _ctx.visible = false, ["tab"]))
+              ]
+            }, vue.createSlots({
+              suffix: vue.withCtx(() => [
+                _ctx.iconComponent && !_ctx.showClose ? (vue.openBlock(), vue.createBlock(_component_el_icon, {
+                  key: 0,
+                  class: vue.normalizeClass([_ctx.nsSelect.e("caret"), _ctx.nsSelect.e("icon"), _ctx.iconReverse])
+                }, {
+                  default: vue.withCtx(() => [
+                    (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(_ctx.iconComponent)))
+                  ]),
+                  _: 1
+                }, 8, ["class"])) : vue.createCommentVNode("v-if", true),
+                _ctx.showClose && _ctx.clearIcon ? (vue.openBlock(), vue.createBlock(_component_el_icon, {
+                  key: 1,
+                  class: vue.normalizeClass([_ctx.nsSelect.e("caret"), _ctx.nsSelect.e("icon")]),
+                  onClick: _ctx.handleClearClick
+                }, {
+                  default: vue.withCtx(() => [
+                    (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(_ctx.clearIcon)))
+                  ]),
+                  _: 1
+                }, 8, ["class", "onClick"])) : vue.createCommentVNode("v-if", true)
+              ]),
+              _: 2
+            }, [
+              _ctx.$slots.prefix ? {
+                name: "prefix",
+                fn: vue.withCtx(() => [
+                  vue.createElementVNode("div", _hoisted_3, [
+                    vue.renderSlot(_ctx.$slots, "prefix")
+                  ])
                 ])
-              ])
-            } : void 0
-          ]), 1032, ["id", "modelValue", "placeholder", "name", "autocomplete", "size", "disabled", "view-mode", "table-input", "readonly", "class", "tabindex", "label", "onFocus", "onBlur", "onInput", "onPaste", "onCompositionstart", "onCompositionupdate", "onCompositionend", "onKeydown"])
-        ], 32)
-      ]),
+              } : void 0
+            ]), 1032, ["id", "modelValue", "placeholder", "name", "autocomplete", "size", "disabled", "view-mode", "table-input", "readonly", "class", "tabindex", "aria-activedescendant", "aria-controls", "aria-expanded", "label", "onFocus", "onBlur", "onInput", "onPaste", "onCompositionstart", "onCompositionupdate", "onCompositionend", "onKeydown"])
+          ], 32)
+        ];
+      }),
       content: vue.withCtx(() => [
         vue.createVNode(_component_el_select_menu, null, {
           default: vue.withCtx(() => [
             vue.withDirectives(vue.createVNode(_component_el_scrollbar, {
+              id: _ctx.contentId,
               ref: "scrollbar",
               tag: "ul",
               "wrap-class": _ctx.nsSelect.be("dropdown", "wrap"),
               "view-class": _ctx.nsSelect.be("dropdown", "list"),
-              class: vue.normalizeClass(_ctx.scrollbarKls)
+              class: vue.normalizeClass(_ctx.scrollbarKls),
+              role: "listbox",
+              "aria-label": _ctx.ariaLabel,
+              "aria-orientation": "vertical"
             }, {
               default: vue.withCtx(() => [
                 _ctx.showNewOption ? (vue.openBlock(), vue.createBlock(_component_el_option, {
@@ -740,7 +763,7 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
                 }, 8, ["onUpdateOptions"])
               ]),
               _: 3
-            }, 8, ["wrap-class", "view-class", "class"]), [
+            }, 8, ["id", "wrap-class", "view-class", "class", "aria-label"]), [
               [vue.vShow, _ctx.options.size > 0 && !_ctx.loading]
             ]),
             _ctx.emptyText && (!_ctx.allowCreate || _ctx.loading || _ctx.allowCreate && _ctx.options.size === 0) ? (vue.openBlock(), vue.createElementBlock(vue.Fragment, { key: 0 }, [