feat #218 - TimeInput don't highlight when focused

src/components/TimeInput/index.tsx

@@ -9,7 +9,7 @@ import noop from 'lodash/noop'
 import range from 'lodash/range'
 import { formatTime, parseTime, useStyles } from './utils'
 import { getDataTestAttributeProp, getPopupContainerProps } from '../utils'
-import React, { FC } from 'react'
+import React, { FC, FocusEvent } from 'react'
 
 export type TimeFormat = 'unix' | 'hours'
 
@@ -21,8 +21,8 @@ export interface TimeInputProps
 	 * */
 	displayFormat?: string
 	focused?: boolean
-	onChange?: (value: number | null) => void
-	onFocus?: () => void
+	onChange?: (value: number) => void
+	onFocus?: (event: FocusEvent<HTMLInputElement>) => void
 	/**
 	 * format of time input value. Either a unix timestamp in seconds or hour integer (0 - 24)
 	 * @default 'unix'
@@ -38,7 +38,7 @@ export interface TimeInputProps
 	 * Selector of HTML element inside which to render the dropdown
 	 */
 	popupContainerSelector?: string
-	value?: number | null
+	value?: number
 }
 
 export const TimeInput: FC<TimeInputProps> = (props: TimeInputProps) => {
@@ -51,7 +51,7 @@ export const TimeInput: FC<TimeInputProps> = (props: TimeInputProps) => {
 		focused = false,
 		onBlur = noop,
 		onChange,
-		onFocus = noop,
+		onFocus,
 		minuteStep = 1,
 		placeholder = '',
 		popupContainerSelector,
@@ -85,22 +85,42 @@ export const TimeInput: FC<TimeInputProps> = (props: TimeInputProps) => {
 		}
 	}
 
+	let onFocusProps = {}
+
+	// This prevents the input from being highlighted when it receives focus
+	const onTimeInputFocus = (e: FocusEvent<HTMLInputElement>) =>
+		e.target.setSelectionRange(0, 0)
+
+	if (onFocus) {
+		onFocusProps = {
+			onFocus: (e: FocusEvent<HTMLInputElement>) => {
+				onTimeInputFocus(e)
+				onFocus(e)
+			}
+		}
+	} else {
+		onFocusProps = {
+			onFocus: onTimeInputFocus
+		}
+	}
+
 	return loading ? (
 		<InputSkeleton width={120} />
 	) : (
 		<AntDTimeInput
+			allowClear={false}
 			autoFocus={focused}
 			className={cn({ [componentClasses.error]: error }, classes)}
 			defaultValue={formatTime(format, defaultValue)}
 			disabled={disabled}
 			format={displayFormat}
 			minuteStep={minuteStep}
 			onBlur={onBlur}
-			onFocus={onFocus}
 			placeholder={placeholder}
 			popupClassName={componentClasses.dropdown}
 			showNow={false}
 			{...controlledCmpProps}
+			{...onFocusProps}
 			{...optionalProps}
 			{...getDataTestAttributeProp('time-input', dataTag)}
 			{...getPopupContainerProps(popupContainerSelector)}

src/components/TimeInput/utils.ts

@@ -1,6 +1,5 @@
 import { createUseStyles } from 'react-jss'
 import { generateButtonStyles } from 'components/Button/utils'
-import isNull from 'lodash/isNull'
 import isUndefined from 'lodash/isUndefined'
 import {
 	dropdownStyles,
@@ -26,7 +25,7 @@ interface FormatTime {
 }
 
 export const formatTime: FormatTime = (format, value) => {
-	if (isUndefined(value) || isNull(value)) return
+	if (isUndefined(value)) return value
 
 	if (format === 'unix') {
 		return moment.unix(value)
@@ -38,19 +37,16 @@ export const formatTime: FormatTime = (format, value) => {
 // ----------------------------------------
 
 interface ParseTime {
-	(momentObj: MomentInputObject, format: TimeFormat): number | null
+	(momentObj: MomentInputObject, format: TimeFormat): number
 }
 
 export const parseTime: ParseTime = (
 	momentObj: MomentInputObject,
 	format: TimeFormat
-) => {
-	if (!momentObj) return null
-
-	return format === 'unix'
+) =>
+	format === 'unix'
 		? moment(momentObj).unix()
 		: parseInt(moment(momentObj).format(hourIntegerFormat))
-}
 
 // -x-x-x-x-x-x-x-x- Styles Related -x-x-x-x-x-x-x-x-