fix(VSelects): focus / activation of chips and clearable w/ kb

[tmasrat]

Description

If an icon is clickable, keyboard navigation to the icon should be allowed. If onClick is defined, I am setting the tabindex to 0
fixes #18482

Markup:

<template>
  <v-app>
    <v-container>
      <v-select
          clearable
          label="Select"
          :items="['California', 'Colorado', 'Florida', 'Georgia', 'Texas', 'Wyoming']"
      ></v-select>
    </v-container>
  </v-app>
</template>

[tmasrat]

@johnleider this is ready to be reviewed again

[johnleider]

I don't have a good idea atm but I think running that function on every icon render is going to get expensive. @KaelWD, what are your thoughts?

[tmasrat]

@johnleider @KaelWD any update on this one? This change is a prerequisite to #18493

[johnleider]

I wouldn't expect too much movement on PRs until after Christmas.

[ibmalo95]

@johnleider @KaelWD any more thoughts or suggestions on this one? We would really appreciate any help you can give so we can get this issue fixed. Thanks!

[ibmalo95]

@tmasrat would it work if we just add these properties directly to where vicon is added in the autocomplete component? We know we need them for autocompletes and might be better than trying to make it work for all icons. I'm not at all familiar with how the code is setup so not sure if that would work or not, but just a thought.

[johnleider]

@johnleider @KaelWD any more thoughts or suggestions on this one? We would really appreciate any help you can give so we can get this issue fixed. Thanks!

I'm drawing a blank. I'll add it as a task item for next week and spend some more thought time on it.

[tmasrat]

@johnleider is there a way to pass down properties to the VIcon component from the Vselect/Vautocomplete? That would limit the fix to those two components only until we figure out a way to fix all icons

[tmasrat]

@johnleider I just pushed a new solution. It should fix all components that has VField as a child (VTextArea, VCombobox, VAutocomplete, VSelect...). There are conflicts on the PR but it's not related to the changes I made
Please let me know what you think about the new solution

[johnleider]

Did you merge a branch into this?

[tmasrat]

Yes, I merged the upstream master into it

[johnleider]

My suggestion would be to run git reflog and go back to the commit before your merge, then force push that up. It appears that you did something equivalent to git merge --ff-only instead of having an actual merge commit.

[tmasrat]

@johnleider this is ready to be reviewed. Thanks!

[tmasrat]

@KaelWD @johnleider any updates on this?

[johnleider]

@vuetifyjs/core-team I'd like everyone to chime in on this please.

[blalan05]

I agree provide/inject seems like a lot. Also this only solves clearable, I think there maybe a different solution that can also cover append/prepend icons, but as an option, not mandatory if hasClick is true.

[yuwu9145]

• Should be just as simple as tabindex={ listener ? 0 : -1 } in InputIcon, then tabindex will fall through to VIcon
• Need to do more work around blur, currently tab blur input will blur whole field, it's unable to focus icon via tab

[johnleider]

Partial fix here 9cbcea9. However, it isn't enough for the keyboard to actually trigger the clear. Pushing those changes to this P.R.

[johnleider]

@tmasrat can you confirm that this still resolves your issue? I made some changes.

[tmasrat]

@johnleider thanks for the update! It works for a case where you tab into the close button on a dropdown menu but it doesn't work for the chips. It tabs into the close icon but it opens the dropdown instead of closing the selected option

<template>
  <v-app>
    <v-container>
      <v-select
        :items="['California', 'Colorado', 'Florida', 'Georgia', 'Texas', 'Wyoming']"
        label="Select"
        chips
        closable-chips
        multiple
      ></v-select>
    </v-container>
  </v-app>
</template>

[johnleider]

Can you check now?

[tmasrat]

@johnleider the clearable chips are working but the other issue came back. The clear button is not clearing the selected value. It's opening the dropdown

<template>
  <v-app>
    <v-container>
      <v-select
        :items="['California', 'Colorado', 'Florida', 'Georgia', 'Texas', 'Wyoming']"
        label="Select"
        clearable
      ></v-select>
    </v-container>
  </v-app>
</template>

[johnleider]

3rd times the charm.

[tmasrat]

Everything works now 🥳 . Thank you @johnleider