Vuetify: [Bug Report] Cannot save timepicker contents when clicking outside of menu

[douglasg14b]

Versions and Environment

Vuetify: 1.5.12
Vue: 2.6.10
Browsers: Firefox 66.0
OS: Ubuntu undefined

Steps to reproduce

1. Open Timepicker menu
2. Select hours & minute (it closes now and saves)
3. Open and change the hour and click outside of menu. Change is lost
4. Open and change AM to PM, click outside of menu. Change is lost.

Expected Behavior

Clicking outside the menu would retain and selected values of the timepicker

Actual Behavior

Any changes made are lost

Reproduction Link

https://codepen.io/douglasg14b/pen/xejeLP

Other comments

This is the default example in the docs

[jacekkarczmarczyk]

Just don't use :return-value
https://codepen.io/anon/pen/gydPwo

[douglasg14b]

@jacekkarczmarczyk Can you explain what the :return-value is, what it does, and what it is used for? The docs don't seem to describe this well, despite it being used in examples....

The docs say:

return-value
Components.Menus.

Could this this not be an opportunity for docs improvement as it does a very poor job of defining the property, and what it's used for?

[douglasg14b]

Thanks for the solution by the way, I appreciate it.

Do you know why the time-picker in-menu docs examples use :return-value? It doesn't seem necessary from what little I understand.

[jacekkarczmarczyk]

The initial value from return-value is stored internally when the menu (or dialog) opens and then, when the menu is closed (and if the menu's save method was not called) it is reverted to the initial value.

Without this you should declare a new value in you data section, store the original value when the menu is opened and set the original value when then menu is closed without clicking "save", or alternatively use a separate data for text-field and for time picker. Of course I'm talking about situation when you are interested in having this save/cancel functionality, otherwise (like in this issue) you don't need return-value

Regardings docs - the lack of description and this "Component.Menus." part is definitely something that could be improved, however I had a problem with creating a short and comprehensive description of this prop, maybe additional example without return-value would help more

[douglasg14b]

Ah! That makes sense. So the :return-value can be utilized as a handy/shorthand way to implement a cancelable edit in Vuetify?

I think some simple examples of ways it's used would do all the explaining it needs, without trying to word-smith the correct definition.

I'm a bit passionate about documentation, is there a brief intro on how the Vuetify examples integrate with the docs if I wanted to expand on the time-picker example to describe it's behavior and/or add an example without utilizing return-value? If not, that's okay, I can probably sort it out from other commits or from the codebase.

[MajesticPotatoe]

@douglasg14b examples are essentially flat .vue files that reside in the example folder. Their descriptions go in the applicable json in lang folder, and are mapped via applicable json in data folder. If you need assistance please reach out to me in discord.