fix(VTextField): inc/dec type number in list with arrow keys

[gitemad]

Description

VTextField type number is not incremented or decremented with arrow keys while in list.

To solve this, I added onKeydown function which stopImmediatePropagation when the type is number and the pressed key is ArrowUp or ArrowDown.

fixes #17083

Markup:

<template>
  <v-app>
    <v-main>
      <p>
        Text field outside of list (type number), value can be inc/decremented with arrow keys
      </p>
      <v-text-field v-model.number="value" type="number" />
      <v-list>
        <v-list-item title="Text field in list, arrow keys don't work here">
      		<v-text-field v-model.number="value" type="number" />
        </v-list-item>
        <v-list-item title="Text field in list, arrow keys don't work here">
      		<v-text-field v-model.number="value" type="number" />
        </v-list-item>
      </v-list>
      <v-list>
        <v-list-item title="Text field in list, arrow keys work here">
      		<v-text-field v-model.number="value" />
        </v-list-item>
        <v-list-item title="Text field in list, arrow keys work here">
      		<v-text-field v-model.number="value" />
        </v-list-item>
      </v-list>
    </v-main>
  </v-app>
</template>

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

const value = ref(0)
</script>

[yuwu9145]

Can you also add a cy test?

[gitemad]

Can you also add a cy test?

Sure.

[yuwu9145]

Thanks, if having if (props.type.toLowerCase() === 'number'), for 'text' type, it will lose this effect shown in the video - press up/down key will switch between start and end. This is the behaviour in v2

I still think any keydown event happened on input (regardless of type) should be stopped bubbling up

[gitemad]

Thanks, if having if (props.type.toLowerCase() === 'number'), for 'text' type, it will lose this effect shown in the video - press up/down key will switch between start and end. This is the behaviour in v2

I still think any keydown event happened on input (regardless of type) should be stopped bubbling up

Sorry, I misunderstood. I removed the condition and now any input regardless of type stopped bubbling up.

[johnleider]

I don't think that this is the correct fix. Looking through the code, this is because v-list is focusing the input when using arrow down. I'm waiting on feedback from kael as to why we are focusing inputs, selects, and textareas.

[KaelWD]

I'm thinking that if someone wants to override this behaviour they should just add @keydown.stop to the fields themselves.

[johnleider]

This Pull Request is being closed due to inactivity.

If you have any additional questions, please reach out to us in our Discord community.