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.

Sign up for GitHub

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

Jump to bottom

First character or paste is not accepted for watch when assigning placeholder to "" in <textarea> tag with IE11 #9042

Closed
steelcg opened this issue Nov 8, 2018 · 5 comments
Closed

First character or paste is not accepted for watch when assigning placeholder to "" in <textarea> tag with IE11 #9042

steelcg opened this issue Nov 8, 2018 · 5 comments
Labels
browser quirks

Comments

@steelcg
Copy link

steelcg commented Nov 8, 2018 •
edited
Loading

Version

2.5.17

Reproduction link

https://codepen.io/steelcg/pen/rQxqXN

Steps to reproduce

<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<body>
    <div id="app">
        <textarea rows="10" v-model="projectName" placeholder=""></textarea>
        <!-- <input type="text" v-model="projectName" placeholder=""> -->
        <button @click="search">click</button>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        var vm = new Vue({
            el: "#app",
            data: {
                projectName: ""
            },
            methods: {
                search: function () {
                    alert(this.projectName == "");
                }
            }
        });
    </script>
</body>

</html>

key in one character such as "a" or paste a word and click search button in IE11, then you will get alert(true). But if you remove the placeholder attr, you will get false.

What is expected?

alert "false"

What is actually happening?

alert "true"

Because code.io is not supported in IE11, please manually type the code to reproduct the issue.
@Justineo
Copy link
Member

Justineo commented Nov 8, 2018

Seem to be related to this:

vue/src/platforms/web/runtime/modules/attrs.js

Lines 94 to 111 in d483a49

// #7138: IE10 & 11 fires input event when setting placeholder on
// <textarea>... block the first input event and remove the blocker
// immediately.
/* istanbul ignore if */
if (
isIE && !isIE9 &&
(el.tagName === 'TEXTAREA' || el.tagName === 'INPUT') &&
key === 'placeholder' && !el.__ieph
) {
const blocker = e => {
e.stopImmediatePropagation()
el.removeEventListener('input', blocker)
}
el.addEventListener('input', blocker)
// $flow-disable-line
el.__ieph = true /* IE placeholder patched */
}
el.setAttribute(key, value)

@steelcg
Copy link
Author

steelcg commented Nov 8, 2018

@Justineo Thanks! So the new release will fix the bug?

@Justineo
Copy link
Member

Justineo commented Nov 8, 2018

We haven't got time to look into this in IE11 yet so I can't guarantee anything right now.

@posva
Copy link
Member

posva commented Nov 8, 2018

related to #7138

@nciont nciont mentioned this issue Jan 9, 2019
Merged
13 tasks
@nciont
Copy link
Contributor

nciont commented Jan 9, 2019

PR with a fix submitted.
As a temp workaround, use :placeholder="placeholder || null"

@snyk-bot snyk-bot mentioned this issue Aug 13, 2019
Open
This was referenced Aug 29, 2019
Open
Open
Open
Open
Closed
@snyk-bot snyk-bot mentioned this issue Sep 12, 2019
Open
@tt9133github tt9133github mentioned this issue Sep 18, 2019
Open
This was referenced Sep 22, 2019
Open
Open
Open
Open
@snyk-bot snyk-bot mentioned this issue Oct 26, 2019
Open
@snyk-bot snyk-bot mentioned this issue Dec 5, 2019
Open
Lostlover pushed a commit to Lostlover/vue that referenced this issue Dec 10, 2019
@nciont @Lostlover
fix: avoid blocking first input event in IE when it shouldn't (vuejs#…
133d792 
…9297)

- the original bug in vuejs#7138 only happens for `<textarea>`
- the bug doesn't happen if placeholder has empty value

fix vuejs#9042, fix vuejs#9383
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
browser quirks
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
4 participants
@posva @Justineo @nciont @steelcg