Skip to content
New issue

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

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

Already on GitHub? Sign in to your account

fix(VMenu): Vmenu does not restore focus on enter #19519

Conversation

elkofy
Copy link
Contributor

@elkofy elkofy commented Mar 31, 2024

VMenu didn't restore the activators focus on Enter

Description

i added a new condition if the key pressed is Enter and the closeOnContentClick props is disabled.
This change enhanced the use case for vmenu to be used inside forms.
Describe your changes in detail. Why is this change required? What problem does it solve?
If it fixes an open issue, please link to the issue here.
fixes #19206

Markup:

packages/vuetify/dev/Playground.vue

<template>
  <v-app>
    <v-container>
      <v-text-field label="Previous Field" />
      <v-menu v-model="open" :close-on-content-click="false">
        <template #activator="{ props }">
          <v-btn v-bind="props" class="mb-5">Menu</v-btn>
        </template>
        <v-card width="400px">
          <v-text-field v-model="msg" label="Menu Field 1" />
          <v-text-field
            v-model="msg"
            label="Menu Field 2"
            @keydown.enter="open = false"
          />
        </v-card>
      </v-menu>
      <v-text-field label="Next Field" />

      <ol class="ml-4 mt-10">
        <li>Click the menu</li>
        <li>Type into Menu Field 2</li>
        <li>Press Enter</li>
        <li>
          Expected: Menu button is re-focused like it is when pressing Escape
        </li>
        <li>
          Actual: Nothing is re-focused, resetting tab flow to the start of the
          document
        </li>
      </ol>
    </v-container>
  </v-app>
</template>

<script setup>
  import { ref } from 'vue'

  const msg = ref('Hello World!')
  const open = ref(false)
</script>

@elkofy elkofy changed the title Fix(VMenu) : Vmenu does not restore focus on enter Fix(VMenu): Vmenu does not restore focus on enter Mar 31, 2024
@elkofy elkofy changed the title Fix(VMenu): Vmenu does not restore focus on enter fix(VMenu): Vmenu does not restore focus on enter Apr 1, 2024
@johnleider
Copy link
Member

This has weird behavior when you tab into the first input and hit enter.

@MajesticPotatoe MajesticPotatoe added T: bug Functionality that does not work as intended/expected C: VMenu VMenu labels Apr 2, 2024
@johnleider johnleider added this to the v3.5.x milestone Apr 8, 2024
@johnleider johnleider merged commit 85ba4a8 into vuetifyjs:master Apr 8, 2024
5 checks passed
curtgrimes added a commit to curtgrimes/vuetify that referenced this pull request May 7, 2024
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
Sign up for free to join this conversation on GitHub. Already have an account? Sign in 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.5.3] v-menu does not restore focus to activator when programmatically closed
3 participants