Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Labels
Status: Fixed / Implemented

Comments

@naletups
Copy link
Contributor

@naletups naletups commented Mar 5, 2020

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 naletups changed the title b-form-timepicker b-form-timepicker: decrement does not follow minutes-step Mar 5, 2020
@naletups
Copy link
Contributor Author

@naletups naletups commented Mar 5, 2020

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
Copy link
Member

@tmorehouse tmorehouse commented Mar 5, 2020

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
Copy link
Contributor Author

@naletups naletups commented Mar 5, 2020

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
Copy link
Member

@tmorehouse tmorehouse commented Mar 5, 2020

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

@naletups
Copy link
Contributor Author

@naletups naletups commented Mar 5, 2020

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
Copy link
Member

@tmorehouse tmorehouse commented Mar 5, 2020

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

@tmorehouse
Copy link
Member

@tmorehouse tmorehouse commented Mar 5, 2020

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
Copy link
Contributor Author

@naletups naletups commented Mar 5, 2020

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
Copy link
Member

@tmorehouse tmorehouse commented Mar 5, 2020

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
Copy link
Contributor Author

@naletups naletups commented Mar 5, 2020

Ah, ok! Got it. Thanks for clarification!

jacobmllr95 added a commit that referenced this issue Mar 5, 2020
… `wrap` enabled (closes #4884) (#4885)

* fix(b-form-spinbutton): respect step value when decrementing (closes #4884)

* Update form-spinbutton.js

Co-authored-by: Jacob Müller <jacob.mueller.elz@gmail.com>
@tmorehouse
Copy link
Member

@tmorehouse tmorehouse commented Mar 6, 2020

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment