title: Vuetify Text Field : Changes To Values Don't Persist (Lost on Blur or Focus)
body: <p>Here is my code. See the <code>&lt;v-text-field&gt;</code> tag. On <code>keypress</code> event, it intercepts and transforms the input value into something else if the textbox is full (insert the keypress character at the cursor and push the rest of the characters into the subsequent input boxes).</p>
  
  <p>The input updates with the correct values at first BUT when I blur it (focus out), it goes back to the value that it had before the <code>keypress</code> event. Also, the spillover character gets correctly prepended in the subsequent input box, but its value doesn't stay -- it changes on focus.</p>
  
  <p>I have not written any event handlers that would do these. I have tried removing <code>&lt;v-form&gt;</code> and the <code>:rules</code> attribute.</p>
  
  <p>I've also tried tying each <code>&lt;v-text-field&gt;</code> to a <code>v-model</code> and assigning the new input value to the model (2-level array) and when I inspect it in Vue Devtools, I notice that it doesn't update the value until I do the blur/focus. The updated values also seem to be wonky.</p>
  
  <p>I've tried triggering <code>change</code>, even <code>keyup</code>, after setting the input value, but to no avail.</p>
  
  <p>I've tried the non-JQuery way of setting the input value, no difference.</p>
  
  <p>Tried with or without <code>event.preventDefault()</code> within the <code>keypress</code> handler, no difference.</p>
  
  <p>Tried <code>keyup</code> instead of <code>keypress</code> just to see the behavior (I need <code>keyup</code>) but, same problem.</p>
  
  <p>**UPDATE : also tried removing all <code>v-model</code>s, no difference.</p>
  
  <p>Vuetify version : 1.5.17.</p>
  
  <p>What could be causing this? Please help! I promise I'll pay it forward and help others here when I have answering rights! Every little hint will help a lot!</p>
  
  <pre><code>            &lt;v-stepper
                      v-model="stepperStep"
              &gt;
                  &lt;v-stepper-items&gt;
                      &lt;v-form autocomplete="off"
                              ref="form"
                              v-model="valid"
                              lazy-validation &gt;
                          &lt;v-stepper-content
                                  v-for="n in numLines"
                                  :key="`${n}-content`"
                                  :step="n"
                          &gt;
                              &lt;div v-show="false" :id="`wordLine_`+(n-1)" :data-numWords="wordLines[n-1].length" class="wordLine" style="display:flex; justify-content:center; margin:0 0 25px;"&gt;
                                  &lt;div v-for="(wordSize, key2) in wordLines[n-1]"&gt;
                                      &lt;div class="wordBox" style="display:flex; color:#f00;"&gt;
                                          &lt;v-text-field required class="wordInput" data-isWordInput="1" :stepperStep="n" :rel="key2" :rules="requiredRule" outline single-line dense height="36" @click:clear="wordInputCleared(n-1, key2)" :size="wordSize" :maxlength="wordSize"&gt;&lt;/v-text-field&gt;
                                      &lt;/div&gt;
                                  &lt;/div&gt;
                              &lt;/div&gt;
                          &lt;/v-stepper-content&gt;
                      &lt;/v-form&gt;
                  &lt;/v-stepper-items&gt;
                  &lt;v-stepper-header v-show="numLines &gt; 1"&gt;
                      &lt;template v-for="n in numLines"&gt;
                          &lt;v-stepper-step
                                  :key="`${n}-step`"
                                  :complete="stepperStep == n"
                                  :step="n"
                                  :editable="true"
                          &gt;
                          &lt;/v-stepper-step&gt;
                      &lt;/template&gt;
                  &lt;/v-stepper-header&gt;
              &lt;/v-stepper&gt;
  </code></pre>
  
  <p>Under <code>mounted()</code> :</p>
  
  <pre><code>        $(document).on('keypress', '.wordInput input[type="text"]', function(event) {
              if (event.keyCode == 32) { event.preventDefault(); return; }
              if (event.keyCode == 37 || event.keyCode == 39 || event.keyCode == 9 || event.keyCode == 16) return; // arrow keys, tab, shift
  
              let sizeRemaining = $(this).attr('maxlength') - $(this).val().length;
  
              let selectedText = $(this)[0].value.slice($(this)[0].selectionStart, $(this)[0].selectionEnd);
              if (selectedText.length &gt; 0) return;    // if text is selected, we want this triggered keystroke to replace the selection (default behavior), not auto-advance
  
              let cursorAtLastPosition = ($(this)[0].selectionEnd == $(this).attr('maxlength'));
  
              if (event.keyCode != 8 &amp;&amp; event.keyCode != 46) {
                  if (sizeRemaining == 0) {
                      event.preventDefault();
  
                      let keyVal = event.key;
                      let lastCharBeforeDisplaced = $(this).val().charAt($(this).val().length-1);
  
                      if (cursorAtLastPosition) {
                          if (parseInt($(this).attr('rel'))+1 == $(this).closest('.wordLine').attr('data-numWords')) {    // last wordbox
                              if (_this.stepperStep == _this.numLines) {  // last/only line
                                  $('#btnFinished').focus(); return;
                              }
                          } else {
                              let $nextWord = $(this).closest('.wordLine').find('.wordInput').find('input[type="text"][rel="'+(parseInt($(this).attr('rel'))+1)+'"]');
                              lastCharBeforeDisplaced = keyVal;
                          }
                      } else {    // insert keyVal at cursor
                          let lastCharRemoved = $(this).val().slice(0, -1);
  
                          $(this).val(lastCharRemoved.slice(0, $(this)[0].selectionEnd) + keyVal + lastCharRemoved.slice($(this)[0].selectionEnd));
                      }
  
                      _this.cascadeInsertNextWordbox($(this), lastCharBeforeDisplaced);
                  }
              }
          });
  </code></pre>
  
  <p>Under <code>methods</code> :</p>
  
  <pre><code>        cascadeInsertNextWordbox($currentWordbox, displacedChar) {
              let $nextWordbox = this.getNextWordbox($currentWordbox);
              if ($nextWordbox.length) {  // exists
                  if ($nextWordbox.val().length == $nextWordbox.attr('maxlength')) {      // is full
                      let lastCharBeforeDisplaced = $nextWordbox.val().charAt($nextWordbox.val().length-1);
                      $nextWordbox.val($currentWordbox.val().slice(0, -1));   // remove last char
                      this.cascadeInsertNextWordbox($nextWordbox, lastCharBeforeDisplaced);
                  }
              }
              $nextWordbox.val(displacedChar + $nextWordbox.val());
          },
  </code></pre>