PrimeReact Calendar mask bug with timeOnly

Question

I am trying to create calendar component. I need to use PrimeReact with mask and timeOnly.

The problem is that it has bug: when I enter for example 1212 (it should display 12:12), it displays 12:01. If I remove the mask (comment setMask('99:99');) and type in 12:12 (with :) it works as it should - but it is not so user friendly, doesn't use mask.

Is there a solution for this?

const MyCalendar = ({ ...otherProps }) => {
  const [value, setValue] = useState(null);
  const [placeholder, setPlaceholder] = useState('');
  const [mask, setMask] = useState('');

  useEffect(() => {
    setPlaceholder('__:__');
    setMask('99:99'); // fix this
  }, []);

  const handleOnChange = (e) => {
    console.log(e.value);
    setValue(e.value);
  };

  return (<PrimeReactCalendar {...otherProps} placeholder={placeholder} mask={mask} onChange={handleOnChange} value={value} icon={<CalendarBlank />}/>);
};

Answer 1

Isn't that this already open bug ticket?

See: https://github.com/primefaces/primereact/issues/4928