Skip to content
New issue

Have a question about this project? # for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “#”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? # to your account

fix(VMenu): allow enter keypress to work in textareas #19768

Merged
merged 7 commits into from
May 13, 2024

Conversation

curtgrimes
Copy link
Contributor

@curtgrimes curtgrimes commented May 7, 2024

Description

Previously, when a <v-menu /> with :close-on-content-click="false" contained a textarea, an enter press inside the textarea would do nothing and not produce a new line. Now, it will allow a new line to be typed into the textarea when pressing enter.

This last worked in Vuetify v3.5.14 and was broken starting in v3.5.15. The fix for #19519 in 85ba4a8 caused this issue.

fixes #19767

Markup:

<template>
  <v-app>
    <v-container>
      <v-menu v-model="show" :close-on-content-click="false">
        <template #activator="{ props }">
          <v-btn color="primary" dark v-bind="props"> Open menu </v-btn>
        </template>

        <v-card class="pa-4">
          <v-textarea v-model="foo" />
        </v-card>
      </v-menu>
    </v-container>
  </v-app>
</template>

<script setup>
  import { ref } from 'vue'
  const foo = ref('Type and press enter here')
  const show = ref(true)
</script>

Before this fix, and in Vuetify v3.5.15 and after, enter cannot be typed in:

Screenshot-Vuetify Dev Playground-2024-05-07-11-26-57

After this fix, the behavior matches the Vuetify <= v3.5.14 behavior and enter can be typed into the textarea:

Screenshot-Vuetify Dev Playground-2024-05-07-11-26-29

curtgrimes and others added 3 commits May 7, 2024 11:27
Previously, when a `<v-menu />` with `:close-on-content-click="false"`
contained a textarea, an enter press inside the textarea would do
nothing and not produce a new line. Now, it will allow a new line to be
typed into the textarea when pressing enter.

This last worked in Vuetify v3.5.14 and was broken starting in v3.5.15.
The fix for vuetifyjs#19519 in 85ba4a8 caused this issue.

fixes vuetifyjs#19767
@curtgrimes curtgrimes marked this pull request as ready for review May 7, 2024 16:49
@MajesticPotatoe MajesticPotatoe added T: bug Functionality that does not work as intended/expected C: VMenu VMenu labels May 8, 2024
# for free to join this conversation on GitHub. Already have an account? # to comment
Labels
C: VMenu VMenu T: bug Functionality that does not work as intended/expected
Projects
None yet
Development

Successfully merging this pull request may close these issues.

[Bug Report][3.6.3] VMenu dismisses on enter keypress when inner textarea is focused
3 participants