Hours/Minutes fields using NumericTextBoxes

1 Answer 55 Views
NumericTextBox
Micah
Top achievements
Rank 2
Iron
Iron
Iron
Micah asked on 23 Apr 2022, 01:05 AM | edited on 23 Apr 2022, 01:06 AM

I'm trying to track duration in hours/minutes with separate NumericTextbox fields, where the Hours are increased by 1 if Minutes becomes 60, and Minutes is reset back to 0.

Demo: https://stackblitz.com/edit/react-cdbhuu?file=app/main.jsx 
(Click the up spinner for Minutes, as it increases from 0 -> 15 -> 30 -> 45 -> 60)

Updating the Hours is working fine, however the Minutes field remains at 60 until clicking outside of the field. I've tried calling focus/click on the label and other elements, but still can't get those Minutes to reset back to 0.

 

1 Answer, 1 is accepted

Sort by
1
Accepted
Konstantin Dikov
Telerik team
answered on 25 Apr 2022, 08:10 AM

Hi Micah,

Thank you for providing an example demonstrating the issue.

In order to pass different value within the change event when it is triggered from the buttons you will have to use setTimeout and force the blur and focus events, which will trigger new change event with the new value:

  const ChangeMinutes = (e) => {
    if (e.value === 60) {
      setTimeout(() => {
        setMinutes(0);
        e.target.element.blur();
        e.target.element.focus();
      });
      setHours(hours + 1);
    } else {
      setMinutes(e.value);
    }
  };

Hope this helps.

 

Regards,
Konstantin Dikov
Progress Telerik

Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.

Tags
NumericTextBox
Asked by
Micah
Top achievements
Rank 2
Iron
Iron
Iron
Answers by
Konstantin Dikov
Telerik team
Share this question
or