0

I have a single input in my Vue app. It's a part of a component, which is set up like the documentation on the usage of “v-model with components”:

Vue.component('custom-input', {
  props: ['value'],
  template: `
    <input
      v-bind:value="value"
      v-on:input="$emit('input', $event.target.value)"
    >
  `
})

This input is clearly is filled with a value (from Chrome autofill) when the page loads, but in my code I have the following statement:

setInterval(() => { console.log(document.querySelector('input').value); }, 50);

This consistently logs an empty string even while I can plainly see that that input is filled with a value. However, as soon as I inspect or reference the element in Chrome devtools, the setInterval suddenly begins logging the correct value (luke@deentaylor.com):

Since the problem disappears as soon as one attempts to debug it, this has been extremely difficult to diagnose. What could cause this?

EDIT: never mind, this behavior has nothing to do with the inspection of the element itself, a console.log('hi') in the console produces the same result. The prerequisite for filling the correct form value is just for the user to interact with the page. Unlike the solutions here, I do need the full autofilled value; my login form needs to make a request to the server with the contents of the field before enabling the "submit" button.

tony19
  • 125,647
  • 18
  • 229
  • 307
Luke Taylor
  • 8,631
  • 8
  • 54
  • 92
  • where are your putting `setIntervale...`? – Boussadjra Brahim Dec 24 '18 at 17:55
  • [This article](https://medium.com/@brunn/detecting-autofilled-fields-in-javascript-aed598d25da7) may be useful. – Roy J Dec 24 '18 at 19:10
  • @BoussadjraBrahim It's irrelevant where the setInterval is, it's referencing global variables to find the input and the `setInterval` is working correctly. It's being called in the `mounted` hook of one of my components, though. – Luke Taylor Dec 24 '18 at 21:28
  • @RoyJ thanks. Having a method to detect autofill on the inputs is useful, but still doesn't let me see the field's value. – Luke Taylor Dec 24 '18 at 21:29
  • 1
    Possibly generating a `click` event in the page will make fields aware of their autofilled values. – Roy J Dec 24 '18 at 22:42

1 Answers1

2

I believe this is just expected behavior for Chrome's autofill. See this question.

MPawlak
  • 715
  • 5
  • 18
  • 1
    That's disappointing; my app needs to make a server request with the contents of the input before enabling a "submit" button, and if there's no way to get the contents of autofilled credentials before the user interacts, I may need to simply disable autofill :/ – Luke Taylor Dec 24 '18 at 17:38
  • 1
    I'll wait a little while to accept your answer just in case anybody else comes up with a solution – Luke Taylor Dec 24 '18 at 17:39
  • 1
    I don't blame you, I hope someone does. – MPawlak Dec 24 '18 at 17:45
  • 2
    The supposition in the linked question's answer is correct. It is a security measure to block malicious pages from using hidden inputs to steal auto-filled information – Stephen Thomas Dec 24 '18 at 19:11