b-form-timepicker: decrement does not follow minutes-step

[naletups]

Describe the bug

Decrement (click or btnDown) does not respect "minutes-step" when current val is empty or "00"

Steps to reproduce the bug

<template>
  <div>
    <label for="timepicker-placeholder">Time picker</label>
    <b-form-timepicker id="timepicker-placeholder" minutes-step="15"></b-form-timepicker>
  </div>
</template>

Expected behavior

Also respect minutes-step on decrement from empty or "00".

Versions

Libraries:

• BootstrapVue: 2.6.0
• Bootstrap: 4.4.1
• Vue: 2.6

Environment:

• Device: PC
• OS: Win
• Browser: Firefox
• Version: 73

[naletups]

Minor thing related to docs of b-form-timepicker: the prop should be no-close-button instead of the documented close-button (inverted meaning)

[tmorehouse]

The wrapping on decrement will be fixed in the next release via PR #4885

the prop should be no-close-button instead of the documented close-button (inverted meaning)

Which part of the docs? I couldn't find the mistake you mentioned in the b-form-timepicker docs.

[naletups]

Great, thanks for the fix. Regarding docs: strange.. maybe I was on a cached page or problem is sitting in front of PC. I cannot find it anymore.

[tmorehouse]

b-form-datepicker uses close-button, as that one is opt-in vs opt-out for b-form-timepicker

[naletups]

Maybe.

One more minor question: I have b-form-timepicker encapsulated in an own component, and emit an own input signal with a truncated time string, if the timepicker has a valid value. However, it seems that the timepicker itself is also catching this emitted input signal and reraises it. Is that normal for the component to pick up events emitted by itself?

[tmorehouse]

Are you extending the timepicker or just using it as a child component in a wrapper component?

[tmorehouse]

the component listens for the inner b-time component's input, and updates the model by emitting it's own input.

If you are altering the time string (say from 01:02:00 to 01:02, and set the value to that, then the timepicker will re-emit the value as 01:02:00 (as it always includes the seconds in the v-model value)

[naletups]

I define it as an own SFC as follows (sorry cannot manage to replicate it in the playground, but in my codebase as soon as the emitted signal is renamed I do not see a triple input event with selectedValue>truncatedValue>selectedValue)

<template>
    <b-form-timepicker :id="id" ref="time"
      :value="value" @input="updateVal($event)" @keydown.native.enter="close">
  </b-form-timepicker>
</template>
<script>
export default {
  methods: {
    updateVal(v) {
      console.log(v)
      this.$emit('input', v.substr(0,5));
    },
    close() {
      this.$refs[`time`].onCloseButton(); // does not seem to work
    }
  },
  props: {
    state: {},
    id: {
      type: String
    },
    value: {}
  }
}
</script>

On the parent I listen for the event via @input="...".

I am not changing the value, but just return a truncated string to the parent component.

[tmorehouse]

But if the parent component is tied to your component's v-model, then the child picker will see the truncated value as a new value (different than the original which included seconds) and update its internals and then re-emit the value because it is different.

Also onCloseButton() is an internal handler method that reacts to the built in close button. You cant use it externally.

[naletups]

Ah, ok! Got it. Thanks for clarification!

[tmorehouse]

BootstrapVue v2.6.1 has just been released with a fix for this issue.