how to close the ant-design-vue select option on mouse leave?

Question

<a-select
    showSearch
    placeholder="Select a person"
    optionFilterProp="children"
    style="width: 200px"
    :open="open"
    @mouseenter="openSelect"
    @mouseleave="closeSelect"
  >
    <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() {
  open: false,
}

methods: {
  openSelect() {
    this.open = true;
  }
  closeSelect() {
    this.open = false;
  }
}

how to close a ant-design-vue select option when the user is no longer using it? i've tried by using onBlur and onMouseLeave. and also i have tried with create a function onFocus() {this.open = true} and function for onBlur(){ this.open=false } but still not work

the mouseleaveevent will be triggered after pointer is not in the field but the option still not be able to choose

Answer 1

http://vue.ant-design.cn/components/select/#events

according to the doc of select component, there is a mouseleave event supported. try using @mouseleave="foo" to set options invisible