Getting two keyup events with weirdness happening

console-output.md

A single keyup event handled twice in the parent component.

once with the new value at event.detail

then again with an integer 0

keyup Lorem ipsum dolor set Lorem ipsum dolor setd

wipContainer.js:4 keyup Lorem ipsum dolor set 0

myParentComponent.html

<template>
  <lightning-card title="Text Area">
    <div class="slds-p-horizontal_medium">
      <c-textarea
        label="Description"
        value={description}
        onchange={onChange}
        onkeyup={onKeyup} ></c-textarea>
    </div>
  </lightning-card>
</template>

myParentComponent.js

import { LightningElement, track } from 'lwc'

export default class MyParentComponent extends LightningElement {
  @track description = 'Lorem ipsum dolor set'

  onChange (event) {
    console.log('change', event.target.value, event.detail, event.target.textContent)
  }

  onKeyup (event) {
    console.log('keyup', event.target.value, event.detail, event.target.textContent)
  }
}

textarea.css

.fill-width {
  width: 100%;
}

textarea.html

<template>
  <div class="slds-form-element">
    <label
      class="slds-form_element__label slds-text-color_weak"
      for="textArea">{label}</label>
    <div class="slds-form-element__control">
      <textarea
        class={classList}
        name="textarea"
        id="textArea"
        cols={cols}
        rows={rows}
        onchange={onChange}
        onkeyup={onKeyup} >{value}</textarea>
    </div>
  </div>
</template>

textarea.js

import { LightningElement, api, track } from 'lwc'

export default class Textarea extends LightningElement {
  @api label
  @api cols
  @api rows = 10

  @api value

  get classList () {
    const classes = []
    classes.push('slds-textarea')
    if (this.cols) {
      classes.push('fill-width')
    }
    return classes.join(' ')
  }

  onChange (event) {
    event.preventDefault()
    const change = new CustomEvent('change', {
      detail: event.target.value
    })
    this.dispatchEvent(change)
  }

  onKeyup (event) {
    event.preventDefault()
    const keyup = new CustomEvent('keyup', {
      detail: event.target.value
    })
    this.dispatchEvent(keyup)
  }
}