Add focus handler

package.json

@@ -1,7 +1,7 @@
 {
   "name": "timeinput",
   "widgetName": "TimeInput",
-  "version": "1.0.0",
+  "version": "1.1.0",
   "description": "Input field/dropdown for time",
   "copyright": "Jelte Lagendijk 2020",
   "author": "Jelte Lagendijk",

src/components/TimeSelector.tsx

@@ -8,7 +8,22 @@ export interface TimeSelectorProps extends TimePickerProps {
     containerClassName?: string;
 }
 
-export class TimeSelector extends Component<TimeSelectorProps> {
+interface TimeSelectorState {
+    focus: boolean;
+}
+
+export class TimeSelector extends Component<TimeSelectorProps, TimeSelectorState> {
+    onOpen = this.openHandler.bind(this);
+    onClose = this.closeHandler.bind(this);
+
+    constructor(props: TimeSelectorProps) {
+        super(props);
+
+        this.state = {
+            focus: false
+        };
+    }
+
     render(): ReactNode {
         return (
             <FormGroup
@@ -23,12 +38,13 @@ export class TimeSelector extends Component<TimeSelectorProps> {
                     )}
                 >
                     <TimePicker
+                        className={this.state.focus ? "focus" : ""}
                         value={this.props.value}
                         placement="bottomLeft"
                         prefixCls="time-input-widget"
                         onChange={this.props.onChange}
-                        onOpen={this.props.onOpen}
-                        onClose={this.props.onClose}
+                        onOpen={this.onOpen}
+                        onClose={this.onClose}
                         allowEmpty={false}
                         use12Hours={this.props.use12Hours}
                         showHour={this.props.showHour}
@@ -54,4 +70,18 @@ export class TimeSelector extends Component<TimeSelectorProps> {
         const { label } = this.props;
         return label === null ? null : <label className={classnames("control-label", "col-sm-3")}>{label}</label>;
     }
+
+    openHandler(): void {
+        this.setState({ focus: true });
+        if (this.props.onOpen) {
+            this.props.onOpen({ open: true });
+        }
+    }
+
+    closeHandler(): void {
+        this.setState({ focus: false });
+        if (this.props.onClose) {
+            this.props.onClose({ open: false });
+        }
+    }
 }

src/package.xml

@@ -1,6 +1,6 @@
 <?xml version="1.0" encoding="utf-8" ?>
 <package xmlns="http://www.mendix.com/package/1.0/">
-    <clientModule name="TimeInput" version="1.0.0" xmlns="http://www.mendix.com/clientModule/1.0/">
+    <clientModule name="TimeInput" version="1.1.0" xmlns="http://www.mendix.com/clientModule/1.0/">
         <widgetFiles>
             <widgetFile path="TimeInput.xml"/>
         </widgetFiles>