onBlur and focusOnRender props were added

packages/components/time-picker/README.md

@@ -20,9 +20,11 @@ import TimePicker from "@docspace/components/time-picker";
 #### Properties
 
 | Props           |   Type   | Required | Values | Default | Description                                      |
-| -------------- | :------------: | :------: | :-----------: | :-----------------------: | ------------------------------------------------------------ |
+| --------------- | :------: | :------: | :----: | :-----: | ------------------------------------------------ |
 | `className`     | `string` |    -     |   -    |   ''    | Allows to set classname                          |
 | `date`          | `object` |    -     |   -    |    -    | Inital date                                      |
 | `setDate`       |  `func`  |    -     |   -    |    -    | State setter function                            |
 | `onChange`      |  `func`  |    -     |   -    |    -    | Allow you to handle changing events of component |
 | `hasError`      |  `bool`  |    -     |   -    |  false  | Indicates error                                  |
+| `onBlur`        |  `func`  |    -     |   -    |    -    | Triggers function on blur                        |
+| `focusOnRender` |  `bool`  |    -     |   -    |  false  | Focus input on render                            |

packages/components/time-picker/index.js

@@ -1,4 +1,4 @@
-import React, { useRef, useState } from "react";
+import React, { useRef, useState, useEffect } from "react";
 import PropTypes from "prop-types";
 import moment from "moment";
 import styled, { css } from "styled-components";
@@ -51,10 +51,11 @@ const TimePicker = ({
   className,
   hasError,
   tabIndex,
+  onBlur,
+  focusOnRender,
 }) => {
   const hoursInputRef = useRef(null);
   const minutesInputRef = useRef(null);
-  const timeInputRef = useRef(null);
 
   const [isInputFocused, setIsInputFocused] = useState(false);
 
@@ -62,6 +63,17 @@ const TimePicker = ({
 
   const [minutes, setMinutes] = useState(moment(date, "HH:mm").format("mm"));
 
+  const mountRef = useRef(false);
+
+  useEffect(() => {
+    onBlur && mountRef.current && !isInputFocused && onBlur();
+  }, [isInputFocused]);
+
+  useEffect(() => {
+    focusOnRender && hoursInputRef.current.select();
+    mountRef.current = true;
+  }, []);
+
   const changeHours = (time) => {
     setHours(time);
     setDate(
@@ -155,7 +167,6 @@ const TimePicker = ({
 
   return (
     <TimeInput
-      ref={timeInputRef}
       onClick={focusHoursInput}
       className={className}
       hasError={hasError}
@@ -183,7 +194,6 @@ const TimePicker = ({
     </TimeInput>
   );
 };
-
 TimePicker.propTypes = {
   /** Inital date */
   date: PropTypes.object,
@@ -197,12 +207,17 @@ TimePicker.propTypes = {
   hasError: PropTypes.bool,
   /** Tab index allows to make element focusable */
   hasError: PropTypes.bool,
+  /** Triggers function on blur */
+  onBlur: PropTypes.func,
+  /** Focus input on render */
+  focusOnRender: PropTypes.bool,
 };
 
 TimePicker.defaultProps = {
   onChange: () => {},
   className: "",
   hasError: false,
+  focusOnRender: false,
 };
 
 export default TimePicker;