search

phoenixwong / vue3-timepicker

A dropdown time picker (hour|minute|second) for Vue 3.x, with flexible time format support
MIT License
6 stars 12 forks source link

Dropdown defaults shown regardless of given props #1

Open jan-temmerman opened 3 years ago

jan-temmerman commented 3 years ago

<TimePicker v-model="form.time" :closeOnComplete="true" :hideDropDown="true" minuteInterval="10" :fixedDropdownButton="true" :manualInput="true" :lazy="true" />

Using the component with above props the dropdown is shown on page refresh. Once you close it and open it again, then the props start working. The same thing happens with the "closeOnComplete" prop, only works after closing it a first time.

skymount-ru commented 3 years ago

Hello! At first, thank you for the Vue3 version. Very useful.

That's how I solved the issue with the "opened by default" dropdown. There is a conflict between :style and v-show.

This works:

<div class="dropdown" tabindex="-1" :class="[dropdownDirClass]" :style="{...inputWidthStyle, display: showDropdown ? '' : 'none'}" @mouseup="keepFocusing" @click.stop="">

Directive v-show="showDropdown" is removed. @line=1985-1986

DanielDebreczeniDesktop commented 3 years ago

Thanks for this great, simple timepicker with customizable style.. However there is a nice improvement possibility:

Dropdown state control

Since dropdown always opened at start, and blurring doens't works if movin out from dropdown div < ul , and hide-dropdown prop doesnt affects the state of picker, it would be very nice if state could be opened and closed by a prop even hide-dropdown would be great.

SeyamMs commented 3 years ago

@skymount-ru thank you so much <3, this was driving me crazy!

Glairly commented 3 years ago

Hello! At first, thank you for the Vue3 version. Very useful.

That's how I solved the issue with the "opened by default" dropdown. There is a conflict between :style and v-show.

This works:

<div class="dropdown" tabindex="-1" :class="[dropdownDirClass]" :style="{...inputWidthStyle, display: showDropdown ? '' : 'none'}" @mouseup="keepFocusing" @click.stop="">

Directive v-show="showDropdown" is removed. @line=1985-1986

Can we just replace v-show with v-if ??? Are there any pros and cons to this action?

robert-jf-close commented 3 years ago

Is there a fix going in for this? I just copied the file and changed v-show to v-if on line 1985.

mahns1201 commented 3 years ago

Hello! At first, thank you for the Vue3 version. Very useful.

That's how I solved the issue with the "opened by default" dropdown. There is a conflict between :style and v-show.

This works:

<div class="dropdown" tabindex="-1" :class="[dropdownDirClass]" :style="{...inputWidthStyle, display: showDropdown ? '' : 'none'}" @mouseup="keepFocusing" @click.stop="">

Directive v-show="showDropdown" is removed. @line=1985-1986

HI ! Thank you for your service.

I haven't solved this problem yet. Is there any directive or something i should to do?

Thank you.