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

V4 Trouble with registered identifiers (Firefox) with Quasar and v-slot on q-input #3583

Closed
2 of 5 tasks
r-laferte opened this issue Nov 13, 2021 · 5 comments
Closed
2 of 5 tasks
Labels
🤔 needs reproduction This issue requires a demo

Comments

@r-laferte
Copy link

r-laferte commented Nov 13, 2021

What happened?

Hello,

I think i found a weird bug when you have your email and password saved in Firefox for a login form.
The problem is only happening when you have at least one slot used with your q-input.

This is my code (with Quasar and with slot prepend):

          <Field
            v-model="emailInput"
            :rules="{required : true, email: true, uniqueEmail : mode ==='register' ? {context: 'login'} : false}"
            v-slot="{ errorMessage,value,  field  }"  name="email">
            <q-input square outlined type="email"
                     :label="$t('forms.email')"
                     name="email"
                     :hint="descrRegisterEmail"
                     :error-message="errorMessage"
                     :model-value="value"
                     :error="!!errorMessage"
                     v-bind="field"
                     class="q-my-md"
            >
              <template #prepend>
                <q-icon name="alternate_email" color="accent"/>
              </template>
            </q-input>
          </Field>

It's hard to show in a Sandebox, but when you focus on the email field, Firefox gives you the ability to autocomplete the form with your email and password.
If you have a slot (like prepend or error), the email appears for one second and then disappears (q-input is blank). If you remove the slot, everything works fine. Also if i remove the Field component, everything is fine.

Thanks a lot for your help.

Reproduction steps

  1. Go to the sandebox below
  2. Open in a new tab, and save some email and password for this url
    3.Refresh the page and try to insert your email

Version

Vue.js 3.x and vee-validate 4.x

What browsers are you seeing the problem on?

  • Firefox
  • Chrome
  • Safari
  • Microsoft Edge

Relevant log output

No response

Demo link

https://codesandbox.io/s/vee-validate-v4-with-quasar-framework-forked-53hpf?file=/src/App.vue

Code of Conduct

@logaretm
Copy link
Owner

The example doesn't seem to load correctly, can you check?

CleanShot 2021-11-17 at 02 15 01

@logaretm logaretm added the 🤔 needs reproduction This issue requires a demo label Nov 17, 2021
@logaretm
Copy link
Owner

Okay, I downloaded the example instead and ran it on Firefox dev, and nothing out of the ordinary jumped at me. It could be helpful to record a video to show me what exactly is going on.

CleanShot.2021-11-17.at.02.31.36.mp4

@r-laferte
Copy link
Author

Hello,

First of all, thanks for your time and for the video. Sorry for the first codesandbox, i just made a new one and i think i found the source of problem, it's very tricky!!

https://codesandbox.io/s/lucid-breeze-q8iwq?file=/src/pages/Index.vue

I started from the Quasar template. Actually the problem is linked to the configure method in the boot file "veeValidate":

if validateOnModelUpdate is set to false + slot in q-input => there is the problem
If you remove the slot it's working fine. Also if you set to true "validateOnModelUpdate" it's working fine.

I made a video of the codesandbox below:

VID_20211118_145130.mp4

You can try to switch between false/true and remove/add the slot prepend in q-input to see what's going on.
I hope it will help you.

Thanks a lot for your help.

@logaretm
Copy link
Owner

Sorry for taking a while to check this again. Thanks for updating the reproduction info, I think I found the issue and there should be patched in the next release.

@r-laferte
Copy link
Author

thanks a lot!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
🤔 needs reproduction This issue requires a demo
Projects
None yet
Development

No branches or pull requests

2 participants