<a-select
showSearch
placeholder="Select a person"
optionFilterProp="children"
style="width: 200px"
:open="isOpen"
@mouseenter="handleOpenSelect"
@mouseleave="handleCloseSelect"
>
<a-select-option value="jack">Jack</a-select-option>
<a-select-option value="lucy">Lucy</a-select-option>
<a-select-option value="tom">Tom</a-select-option>
</a-select>
</template>
data() {
isOpen: false,
}
methods: {
handleOpenSelect() {
this.isOpen = true;
}
handleCloseSelect() {
this.isOpen = false;
}
}
How can I ensure an ant-design-vue select option closes when the user is no longer interacting with it? I've attempted to use onBlur and onMouseLeave, as well as creating functions onFocus() {this.isOpen = true} and onBlur() {this.isOpen=false}, but without success.
The mouseleave event triggers after the pointer leaves the field, however the option remains selectable.