search

patternfly / patternfly-react

A set of React components for the PatternFly project.
https://react-staging.patternfly.org/
MIT License
768 stars 350 forks source link

onChange method of TimePicker component returns the wrong minute value #5861

Closed ljmotta closed 3 years ago

ljmotta commented 3 years ago

Describe the issue. What is the expected and unexpected behavior? The onChange method of the TimePicker components is returning the wrong value on the minutes proproperty. Selecting 30 minutes returns 3 instead of 30.

Please provide the steps to reproduce. Feel free to link CodeSandbox or another tool. image

code:

...

  const [time, setTime] = React.useState();
  const [hour, setHour] = React.useState();
  const [minutes, setMinutes] = React.useState();
  const onChange = React.useCallback((time, hour, minutes) => {
    setTime(time)
    setHour(hour)
    setMinutes(minutes)
  }, [])

return (
    <div style={{ width: "300px"}}>
      <TimePicker onChange={onChange} value={time}/>
      <p>Time {time}</p>
      <p>Hour {hour}</p>
      <p>Minutes {minutes}</p>
    </div>
)

As far I could see, this bug is caused on the getMinutes implementation or in the used regex. https://github.com/patternfly/patternfly-react/blob/f7e9491a80802c54956c15e2265585f03a23c111/packages/react-core/src/components/TimePicker/TimePickerUtils.tsx#L104-L107

Is this a bug or enhancement? If this issue is a bug, is this issue blocking you or is there a work-around? Bug

What is your product and what release version are you targeting? Kogito Tooling. PatternFly version: @pattenfly/react-core: 4.121.1

ljmotta commented 3 years ago

After a deeper look into this issue, a worse behaviour occours when changing to the 24 hour layout with is24Hour props. The hour is wrong as well.

image