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

[Bug Report][3.7.1] password type v-combobox shows the password when it's not focused #20479

Closed
canbax opened this issue Sep 16, 2024 · 4 comments

Comments

@canbax
Copy link

canbax commented Sep 16, 2024

Environment

Vuetify Version: 3.7.1
Last working version: 2.6.12
Vue Version: 3.5.6
Browsers: Chrome 128.0.0.0
OS: Mac OS 10.15.7

Steps to reproduce

Way 1

  1. Type something on the input field. It won't be shown since it's a password.
  2. Click outside of the input field. The password is revealed unexpectedly.

Way 2

  1. Select some value from the combo box list
  2. Click outside to move focus to elsewhere. The password is revealed unexpectedly.

Expected Behavior

The password is NOT revealed

Actual Behavior

The password is revealed

Reproduction Link

https://play.vuetifyjs.com/#...

@canbax
Copy link
Author

canbax commented Sep 17, 2024

I showed input element always and hide the select div. It seems OK for now

@yogender-kulshrestha
Copy link

yogender-kulshrestha commented Sep 17, 2024

Use this code to mask the password in your v-combobox:

    <v-combobox
      label="A Combobox with password select"
      :items="['password', '44g5$UrB', 'H7zbkKn+A;cJ_f>?rw3yM9', 'Georgia123', 'TexXas', 'Wy1oming']"
      variant="solo"
    >
      <template v-slot:selection="{item}"
        >{{'*'.repeat(String(item.value).length)}}</template
      >
    </v-combobox>

This code will display asterisks in place of the actual password value, keeping it hidden.

Working Code Link:
https://play.vuetifyjs.com/#eNplUe1KwzAUfZVLEbrp3JibiLVOpj8URRCmKGxDsvZuC6ZJSNNus/TdTfqxFvwT7j05536cO8+cWAWDqZT9NEHHc3yNkWRE42TBAfz0nEhZhEUSCK4J5agqqAKjlViJfQ0BpOeRCJHdLpwYGQYawzcSxzuhwoXTsBhZFZwpPFQVYEf1FmTFhVLclnjUjBcbzdytWW4P3PF4c3nyoe5t/HT1u/p54WfTm+D5ez25U7vR4fXa/jyiUBtKhhcjm73j/ovENvo8DEVE+cZdtlulRFHCtd1BMNH8HDc3u9demYVjJrRXDkwFN6rMjpq3Kxptlrmnbl+hRKI7M61M147l9VPCEuz2GfKN3nbz3B/UtRt94/mgMd2ARzik6WRWGQ614x5kWeVkcwawHSy9umxRsH1ai5SXbyYpWvlxoKjUBQn3UigNIa5JwjRkZbGQaNLp1hmAQp0o3uTwbxoPeMJYrybkZZAXgEn8wbGnk/cKqn2Wf6Bd3ec=

@KaelWD
Copy link
Member

KaelWD commented Sep 17, 2024

None of our components have special handling for type, it's just passed through to the <input>.

@KaelWD KaelWD closed this as not planned Won't fix, can't repro, duplicate, stale Sep 17, 2024
@canbax
Copy link
Author

canbax commented Sep 17, 2024

@yogender-kulshrestha Thank you for the suggestion but if you try to type sth into the input field when sth is already selected, it messes up, it shows both the selection <div and also the <input. Always showing only the <input element solved my issue.

Screenshot 2024-09-17 at 17 51 38

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

3 participants