When the file name input box gets the focus, the characters before the file suffix are automatically selected. Why is the set length invalid and automatically selected all?

I found that he had a time lag.

<template>
  <div class="rename-edit">
    <el-input size="small"
              spellcheck="false"
              v-model.trim="value"
              placeholder=""
              :style="{width:(type==="List"?"350px":"90px")}"
              @focus="selection($event)">
    </el-input>
  </div>
</template>
<script>
  export default {
    methods: {
      selection(event) {
        const dotIndex = this.value.lastIndexOf(".")
        setTimeout(function() {
          event.target.selectionStart = 0
          event.target.selectionEnd = dotIndex
        }, 80)
      }
    },
    mounted() {
      this.value = this.selectedData[0].fname
      document.querySelector(".rename-edit input").focus()
    }
  }
</script>

after setting this time difference, it is solved, but I don"t know where the time difference is spent.

Jun.02,2021
Menu