iamstevendao / vue-tel-input

International Telephone Input with Vue

Home Page:https://iamstevendao.com/vue-tel-input/

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Telphone's dropdown does not open when changing arrow-icon slot

cuongle-hdwebsoft opened this issue · comments

Hi,
Seem like changing the arrow icon can lead to this issue. Here is my example code:

<vue-tel-input v-model="phoneModel" v-bind="options" @onInput="onInput">
          <template v-slot:arrow-icon="{ open }">
              <div v-if="open">open</div>
               <div v-else>close</div>
          </template>
</vue-tel-input>

Then when you click the new arrow icon, it will not open the country dropdown.

  • I found the related issue and the solution to fix it. Because the element is removed before it finishes running clickOutsideEvent. So, el.contains(event.target) always returns false
if (!(el === event.target || el.contains(event.target))) {

}

Solution: JedWatson/react-select#4560 (comment)

I am really happy to contribute MR #414