The problem of getting the focus of input time tags in vue

1. The code is as follows: when entering the page, enter the name of the shift, and then select to clock in once a day. When entering the working time, it is entered directly into the name of the shift without any errors

.
<form id="formID" class="form-horizontal" style="width:900px; margin: 0 auto;">
            <div class="form-group">
                <div class="col-sm-2 control-label"></div>
                <div class="col-sm-10">
                    <input type="text" id="sname" name="sname" class="form-control" v-model="kqSchedule.name" placeholder=""
                           required/>
                    <label for="sname" class="error"></label>
                </div>
            </div>

            
            <div class="form-group">
                <div class="col-sm-2 control-label"></div>
                <label class="radio-inline">
                    <input type="radio" name="type" value="1" v-model="kqSchedule.type"/> 
                </label>
                <label class="radio-inline">
                    <input type="radio" name="type" value="2" v-model="kqSchedule.type"/> 
                </label>
            </div>
            <div v-if="kqSchedule.type > 0" style="border: 1px solid -sharp007fff; border-radius: 5px; margin-bottom: 15px;">
                <div class="form-group">
                    <div class="col-sm-2 control-label"></div>
                </div>
                <div class="form-group">
                    <div class="col-sm-2 control-label"></div>
                    <div class="col-sm-3">
                        <input type="time" class="form-control"
                               v-model="firstScheduleWorktime.startTime" placeholder=""/>
                    </div>
                    <div class="col-sm-2 control-label"></div>
                    <div class="col-sm-3">
                        <input type="time" class="form-control"
                               v-model="firstScheduleWorktime.preStartTime" placeholder=""/>
                    </div>
                </div>
                <div class="form-group">
                    <div class="col-sm-2 control-label"></div>
                    <div class="col-sm-3">
                        <input type="time" class="form-control"
                               v-model="firstScheduleWorktime.endTime" placeholder=""/>
                    </div>
                    <div class="col-sm-2 control-label"></div>
                    <div class="col-sm-3">
                        <input type="time" class="form-control"
                               v-model="firstScheduleWorktime.lateEndTime" placeholder=""/>
                    </div>
                </div>
            </div>
            <div v-if="kqSchedule.type >= 2"
                 style="border: 1px solid -sharp007fff; border-radius: 5px;margin-top: 2px; margin-bottom: 15px;">
                <div class="form-group">
                    <div class="col-sm-2 control-label"></div>
                </div>
                <div class="form-group">
                    <div class="col-sm-2 control-label"></div>
                    <div class="col-sm-3">
                        <input type="time" class="form-control"
                               v-model="secondScheduleWorktime.startTime" placeholder=""/>
                    </div>
                    <div class="col-sm-2 control-label"></div>
                    <div class="col-sm-3">
                        <input type="time" class="form-control"
                               v-model="secondScheduleWorktime.preStartTime" placeholder=""/>
                    </div>
                </div>
                <div class="form-group">
                    <div class="col-sm-2 control-label"></div>
                    <div class="col-sm-3">
                        <input type="time" class="form-control"
                               v-model="secondScheduleWorktime.endTime" placeholder=""/>
                    </div>
                    <div class="col-sm-2 control-label"></div>
                    <div class="col-sm-3">
                        <input type="time" class="form-control"
                               v-model="secondScheduleWorktime.lateEndTime" placeholder=""/>
                    </div>
                </div>
            </div>
            
            <div class="form-group">
                <div class="col-sm-2 control-label"></div>
                <div class="col-sm-3">
                    <input type="time" class="form-control" style="cursor: pointer;"
                           v-model="kqSchedule.noonrestStartTime" placeholder=""/>
                </div>
                <div class="col-sm-2 control-label"></div>
                <div class="col-sm-3">
                    <input type="time" class="form-control" style="cursor: pointer;"
                           v-model="kqSchedule.noonrestEndTime" placeholder=""/>
                </div>
            </div>
          
            <div class="form-group">
                <div class="col-sm-2 control-label"></div>
                <div class="col-sm-10">
                    <label class="radio-inline">
                        <input type="radio" name="isused" value="Y" v-model="kqSchedule.isused"/> 
                    </label>
                    <label class="radio-inline">
                        <input type="radio" name="isused" value="N" v-model="kqSchedule.isused"/> 
                    </label>
                </div>
            </div>
            <div class="form-group">
                <div class="col-sm-2 control-label"></div>
                <input type="button" class="btn btn-primary" @click="saveOrUpdate" value=""/>
                <input type="button" class="btn btn-warning" @click="reload" value=""/>
            </div>
        </form>

has anyone encountered this situation and how to deal with it? it uses the latest version of Google browser 67.xxxxx. There is no error. It feels like the focus has not been switched.

Mar.19,2021

according to the question you gave me, I don't see any problem.
Let's go straight to the screenshot code and error message. Pull out the html structure of the page rendering if it is convenient to have a look at

clipboard.png
test results have no effect.
Test environment win10 chrome 62.0.3202.62
initially determine whether bootstrap or something else is affecting the focus.
suggest that the subject throw the whole .vue up and have a look.

<style lang="less" scoped>
.test {
  width: 90%;
  min-height: 600px;
  background-color: -sharpfff;
  position: absolute;
  top: 200px;
  left: 5%;
  padding: 50px;
  input {
    width:200px;
    height:30px;
    border:1px solid -sharpc6c6c6;
  }
  .form-group {
    width: 90%;
    height:50px;
    .col-sm-3,
    .col-sm-10,
    .col-sm-2 {
      display: inline-block;
    }
    .control-label {
      display: inline-block;
    }
  }
}
</style>
<template>
  <div class="test">
    <form id="formID" class="form-horizontal" style="width:900px; margin: 0 auto;">
      <div class="form-group">
        <div class="col-sm-2 control-label"></div>
        <div class="col-sm-10">
          <input type="text" id="sname" name="sname" class="form-control" v-model="kqSchedule.name" placeholder="" required/>
          <label for="sname" class="error"></label>
        </div>
      </div>

      <div class="form-group">
        <div class="col-sm-2 control-label"></div>
        <label class="radio-inline">
          <input type="radio" name="type" value="1" v-model="kqSchedule.type" /> 
        </label>
        <label class="radio-inline">
          <input type="radio" name="type" value="2" v-model="kqSchedule.type" /> 
        </label>
      </div>
      <div v-if="kqSchedule.type > 0" style="border: 1px solid -sharp007fff; border-radius: 5px; margin-bottom: 15px;">
        <div class="form-group">
          <div class="col-sm-2 control-label"></div>
        </div>
        <div class="form-group">
          <div class="col-sm-2 control-label"></div>
          <div class="col-sm-3">
            <input type="time" class="form-control" v-model="firstScheduleWorktime.startTime" placeholder="" />
          </div>
          <div class="col-sm-2 control-label"></div>
          <div class="col-sm-3">
            <input type="time" class="form-control" v-model="firstScheduleWorktime.preStartTime" placeholder="" />
          </div>
        </div>
        <div class="form-group">
          <div class="col-sm-2 control-label"></div>
          <div class="col-sm-3">
            <input type="time" class="form-control" v-model="firstScheduleWorktime.endTime" placeholder="" />
          </div>
          <div class="col-sm-2 control-label"></div>
          <div class="col-sm-3">
            <input type="time" class="form-control" v-model="firstScheduleWorktime.lateEndTime" placeholder="" />
          </div>
        </div>
      </div>
      <div v-if="kqSchedule.type >= 2" style="border: 1px solid -sharp007fff; border-radius: 5px;margin-top: 2px; margin-bottom: 15px;">
        <div class="form-group">
          <div class="col-sm-2 control-label"></div>
        </div>
        <div class="form-group">
          <div class="col-sm-2 control-label"></div>
          <div class="col-sm-3">
            <input type="time" class="form-control" v-model="secondScheduleWorktime.startTime" placeholder="" />
          </div>
          <div class="col-sm-2 control-label"></div>
          <div class="col-sm-3">
            <input type="time" class="form-control" v-model="secondScheduleWorktime.preStartTime" placeholder="" />
          </div>
        </div>
        <div class="form-group">
          <div class="col-sm-2 control-label"></div>
          <div class="col-sm-3">
            <input type="time" class="form-control" v-model="secondScheduleWorktime.endTime" placeholder="" />
          </div>
          <div class="col-sm-2 control-label"></div>
          <div class="col-sm-3">
            <input type="time" class="form-control" v-model="secondScheduleWorktime.lateEndTime" placeholder="" />
          </div>
        </div>
      </div>

      <div class="form-group">
        <div class="col-sm-2 control-label"></div>
        <div class="col-sm-3">
          <input type="time" class="form-control" style="cursor: pointer;" v-model="kqSchedule.noonrestStartTime" placeholder="" />
        </div>
        <div class="col-sm-2 control-label"></div>
        <div class="col-sm-3">
          <input type="time" class="form-control" style="cursor: pointer;" v-model="kqSchedule.noonrestEndTime" placeholder="" />
        </div>
      </div>

      <div class="form-group">
        <div class="col-sm-2 control-label"></div>
        <div class="col-sm-10">
          <label class="radio-inline">
            <input type="radio" name="isused" value="Y" v-model="kqSchedule.isused" /> 
          </label>
          <label class="radio-inline">
            <input type="radio" name="isused" value="N" v-model="kqSchedule.isused" /> 
          </label>
        </div>
      </div>
      <div class="form-group">
        <div class="col-sm-2 control-label"></div>
        <input type="button" class="btn btn-primary" @click="saveOrUpdate" value="" /> 
        <input type="button" class="btn btn-warning" @click="reload" value="" />
      </div>
    </form>
  </div>
</template>
<script>
export default {
  //props:{
  //props:{
  //type:String,
  //default:String,
  //},
  //},
  data() {
    return {
      kqSchedule: {
        name: "",
        type: "",
        isused: "",
        noonrestStartTime: "",
        noonrestEndTime: ""
      },
      firstScheduleWorktime: {
        startTime: "",
        preStartTime: "",
        endTime: "",
        lateEndTime: ""
      },
      secondScheduleWorktime: {
        startTime: "",
        preStartTime: "",
        endTime: "",
        lateEndTime: ""
      }
    };
  },
  methods: {
    saveOrUpdate() {
      //dosth
    },
    reload() {
      //dosth
    }
  }
  //computed:{
  //computedA(){
  //return xxx
  //},
  //},
  //watch:{
  //watchA(val,oldval){//data||propskey,
  ////dosth
  //},
  //watchB:{//data||propskey,obj
  //deep:true,
  //handler(val,oldval){
  ////dosth
  //}
  //},
  //},
  //created () {
  //},
  //mounted () {
  //},
  //beforeDestroy () {
  //},
  //beforeRouteEnter(to, from, next) {
  //next(vm => {
  ////  `vm` 
  //});
  //},
  //beforeRouteLeave(to, from, next){
  //// dosth this
  //next();
  //},
};
</script>
Menu