<template>
  <input v-model="valueLocal" @keydown.backspace="handleBackspace" type="text">
</template>

<script>
export default {
  props: {
    validKeys: { type: Array, required: true },
    value: { type: String, required: true }
  },
  computed: {
    valueLocal: {
      get() {
        return this.value;
      },
      set(val) {
        if (val && (val.length > 1 || !this.validKeys.includes(val))) {
          this.$forceUpdate();
          return;
        }
        this.$emit('input', val);
        if (val) this.$emit('next');
      }
    }
  },
  methods: {
    handleBackspace() {
      if (!this.valueLocal) this.$emit('previous');
    }
  }
};
</script>
