Vuetify: [Bug Report] Text field inputs inside expansion panel headers should not toggle the panel's expansion

[ogulcantumdogan]

Environment

Vuetify Version: 2.1.10
Vue Version: 2.6.10
Browsers: Firefox 70.0, Google Chrome, Mozilla Firefox, Microsoft Edge
OS: Windows 10

Steps to reproduce

When using a v-text-field inside a v-expansion-panel-header, pressing spacebar inside the text field will trigger panel expansion.

Expected Behavior

Pressing spacebar inside a v-text-field should not trigger panel expansion

Actual Behavior

Pressing spacebar inside a focused v-text-field triggers panel expansion by emitting click and change events.

Reproduction Link

https://codepen.io/ogulcantumdogan/pen/LYYJjVY

Other comments

I assume this is an unwanted behavior most of the time, and the reason is that spacebar acts as a click event on some cases, and it emits a change event on the v-expansion-panel. I could not find any way around it with @keypress, @keyup and @keydown events.

[jacekkarczmarczyk]

Duplicate of https://github.com/vuetifyjs/vuetify/issues/9347 / https://github.com/vuetifyjs/vuetify/issues/9551

[AngelMD55]

@ogulcantumdogan where you able to solve your issue? I am having the same issue where I cant stop the propagation of the event when I press the space bar in a v-text-field inside the expansion-panel-header

[ogulcantumdogan]

@ogulcantumdogan where you able to solve your issue? I am having the same issue where I cant stop the propagation of the event when I press the space bar in a v-text-field inside the expansion-panel-header

@AngelMD55
Try adding @keyup.space.prevent inside the v-expansion-panel-header tag, and @click.native.stop inside the v-text-field tag. This solved my issue, even though it may not be the perfect solution. Please let me know if it also worked for your case.

[AngelMD55]

@ogulcantumdogan Thank you very much it worked as expected. I appreciate your help.

[everttrollip]

The suggestion from @ogulcantumdogan also worked for me