Add autoFocus prop to TimePicker

packages/datetime/src/timePicker.tsx

@@ -49,6 +49,12 @@ export const TimePrecision = {
 export type TimePrecision = typeof TimePrecision[keyof typeof TimePrecision];
 
 export interface ITimePickerProps extends IProps {
+    /**
+     * Whether to focus the first input when it opens initially.
+     * @default false
+     */
+    autoFocus?: boolean;
+
     /**
      * Initial time the `TimePicker` will display.
      * This should not be set if `value` is set.
@@ -126,6 +132,7 @@ export interface ITimePickerState {
 
 export class TimePicker extends React.Component<ITimePickerProps, ITimePickerState> {
     public static defaultProps: ITimePickerProps = {
+        autoFocus: false,
         disabled: false,
         maxTime: getDefaultMaxTime(),
         minTime: getDefaultMinTime(),
@@ -231,6 +238,7 @@ export class TimePicker extends React.Component<ITimePickerProps, ITimePickerSta
 
     private renderInput(className: string, unit: TimeUnit, value: string) {
         const isValid = isTimeUnitValid(unit, parseInt(value, 10));
+        const isHour = unit === TimeUnit.HOUR_12 || unit === TimeUnit.HOUR_24;
 
         return (
             <input
@@ -245,6 +253,7 @@ export class TimePicker extends React.Component<ITimePickerProps, ITimePickerSta
                 onKeyDown={this.getInputKeyDownHandler(unit)}
                 value={value}
                 disabled={this.props.disabled}
+                autoFocus={isHour && this.props.autoFocus}
             />
         );
     }

packages/docs-app/src/examples/datetime-examples/timePickerExample.tsx

@@ -24,6 +24,7 @@ import { TimePicker, TimePrecision } from "@blueprintjs/datetime";
 import { getDefaultMaxTime, getDefaultMinTime } from "@blueprintjs/datetime/lib/esm/common/timeUnit";
 
 export interface ITimePickerExampleState {
+    autoFocus: boolean;
     precision?: TimePrecision;
     selectAllOnFocus?: boolean;
     showArrowButtons?: boolean;
@@ -47,6 +48,7 @@ enum MaximumHours {
 
 export class TimePickerExample extends React.PureComponent<IExampleProps, ITimePickerExampleState> {
     public state = {
+        autoFocus: true,
         disabled: false,
         precision: TimePrecision.MINUTE,
         selectAllOnFocus: false,
@@ -80,6 +82,7 @@ export class TimePickerExample extends React.PureComponent<IExampleProps, ITimeP
                 />
                 <Switch checked={this.state.disabled} label="Disabled" onChange={this.toggleDisabled} />
                 <Switch checked={this.state.useAmPm} label="Use AM/PM" onChange={this.toggleUseAmPm} />
+                <Switch checked={this.state.autoFocus} label="Auto focus" onChange={this.toggleAutoFocus} />
                 <PrecisionSelect value={this.state.precision} onChange={this.handlePrecisionChange} />
                 <label className={Classes.LABEL}>
                     Minimum time
@@ -117,6 +120,10 @@ export class TimePickerExample extends React.PureComponent<IExampleProps, ITimeP
         this.setState({ useAmPm: !this.state.useAmPm });
     };
 
+    private toggleAutoFocus = () => {
+        this.setState({ autoFocus: !this.state.autoFocus });
+    };
+
     private changeMinHour = (hour: MinimumHours) => {
         let minTime = new Date(1995, 6, 30, hour);