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

Input losing focus #66

Closed
nkostadinov opened this issue Mar 16, 2018 · 8 comments

Comments

Projects
None yet
3 participants
@nkostadinov
Copy link

commented Mar 16, 2018

I noticed some strange behavior in my application when using v-translate attributes. The inputs are losing focus (may be they are rerendered by Vue).

When I remove the v-translate from the h elements the issue is no longer happening, This bug also causes some of the labels to change their translation with another element on the page.

I managed to isolate the case down to this js fiddle, just try to input something in the input - https://jsfiddle.net/nikolakk/038L6sfe/

@kemar kemar self-assigned this Mar 18, 2018

@kemar kemar added the bug label Mar 18, 2018

@kemar

This comment has been minimized.

Copy link
Collaborator

commented Mar 18, 2018

Thank you for your report. Your fiddle helped me a lot to reproduce your issue.

It looks like it's related to the Vue’s virtual DOM algorithm. We used auto-generated keys to fix #29 and that triggers the virtual DOM algorithm which has some side effect on your <input> element depending on your HTML structure.

You can solve your problem by wrapping the code that contain your v-translate attributes in a parent element:

<div id="app">

    <div>
        <h2 v-translate>Social features</h2>
        <div>
            <label v-translate>Username</label>
            <input type="text" v-model="username">
        </div>
    </div>

    <h2 v-if="!is_beta" v-translate>Beta version</h2>
    <section v-if="!is_beta">USING BETA</section>

    <a @click="is_beta=!is_beta" v-translate>Switch to Beta</a>

</div>

This will have an effect on the virtual DOM algorithm and it will not redraw your input.

I'll think again about this issue but I'm not sure to be able to provide a better solution…

@nkostadinov

This comment has been minimized.

Copy link
Author

commented Mar 19, 2018

Just wanted to share this small snipet indicating the problem. I've already found that wraping in parent element fixes the issue.

I've spent many hours till I figured out that this was caused by v-translate, so I want to help someone who has the same problem.

@kemar

This comment has been minimized.

Copy link
Collaborator

commented Mar 19, 2018

Yes I know, I'm sorry you lost so much time.

I didn't close the issue. I'm still thinking about it.

@Hyzual

This comment has been minimized.

Copy link

commented Jul 6, 2018

Hi, just wanted to let you know we've been hit by this behaviour too. It took a while to figure out that v-translate on a child node was causing the parent node to re-render on every keyup.

After quickly browsing the code, I've found that v-translate sets a key attribute on bind(). Unfortunately, it looks like doing this will trigger a re-render of the parent, and thus going again in bind() lifecycle hook. This means that the key changes all the time...

I'm no expert on VueJS rendering. I just wanted to say that it seems to me that trying to address the v-if v-else (#29) issue is causing more problems than it solves...
From Vue's documentation, I would argue that it's up to the developper to add manually a "key" attribute for such cases. It seems out of scope for a custom directive to control "key".

I also wanted to know whether other translation libraries handle such cases, so I browsed a bit Vue i18n-s repository. There also was an issue related to v-if without "key". The maintainer declined the issue and closed it, citing the doc. I think vue-gettext should do the same.

What do you think about it ?

@kemar

This comment has been minimized.

Copy link
Collaborator

commented Jul 6, 2018

I think you're right @Hyzual, #29 is causing more problems than it solves.

I think I'll revert #29 in the coming days.

@Hyzual

This comment has been minimized.

Copy link

commented Jul 6, 2018

Cool :) thanks for the quick answer.

By the way thank you very much for this cool library ! It's really great

@kemar kemar closed this in 4104a91 Jul 8, 2018

@kemar

This comment has been minimized.

Copy link
Collaborator

commented Jul 8, 2018

I published v2.1.0 in which auto generation of key attributes is off by default.

This should fix the issues we're talking about here.

People can enable the previous behaviour by turning autoAddKeyAttributes to true.

@Hyzual

This comment has been minimized.

Copy link

commented Jul 9, 2018

Thanks very much for the quick fix and release !
We'll use it shortly.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.