Merge pull request #22 from misteinb/bugfix/date-picker-should-not-open-on-focus

remove on focus behavior.  turn calendar icon into a button

Author: misteinb

CHANGELOG.md

@@ -1,5 +1,8 @@
 # CHANGELOG
 
+## v2.0.5
+### Fixed
+- date picker should not open when input receives focus
 
 ## v2.0.4
 ### Fixed
@@ -8,7 +11,7 @@
 
 ## v2.0.3
 ### Fixed
-- add outline for primary  button
+- add outline for primary button
 - upgrade fluent css version
 
 ## v2.0.2

lib/components/DateTime/DatePicker.scss

@@ -96,17 +96,17 @@ $calc-margin: 5px;
     }
 
     .date-picker-calendar-icon {
-        @include md-box(absolute, float-right);
+        @include md-box(absolute);
         font-size: $font-size-small;
         line-height: $line-height-icon;
-        padding: $grid-size;
-        top: $grid-size;
-        right: 2*$grid-size;
+        top: 0;
+        right: 0;
         border: none;
         background-color: transparent;
-        outline: none;
-        pointer-events: none;
-        cursor: pointer;
+
+        &:focus:not(:disabled) {
+            outline-offset: -2px;
+        }
     }
 
     .date-picker-dropdown:not(.above) {

lib/components/DateTime/DatePicker.tsx

@@ -1,11 +1,12 @@
 import * as React from 'react';
 import * as classNames from 'classnames/bind';
-import {DivProps, SpanProps, InputProps, Elements as Attr, mergeAttributeObjects} from '../../Attributes';
+import {DivProps, InputProps, Elements as Attr, mergeAttributeObjects} from '../../Attributes';
 import {Calendar, CalendarAttributes} from './Calendar';
-import {Icon, IconSize, IconAttributes} from '../Icon';
+import {IconAttributes} from '../Icon';
 import {Dropdown, DropdownAttributes} from '../Dropdown';
-import {replaceAt, formatDate, placeholders} from './helpers';
+import {formatDate, placeholders} from './helpers';
 import {keyCode, MethodDate, dateIsValid, DateFormat} from '../../Common';
+import { ActionTriggerButton } from '../ActionTrigger';
 const css = classNames.bind(require('./DatePicker.scss'));
 
 export interface DatePickerType {}
@@ -338,7 +339,7 @@ export class DatePicker extends React.Component<DatePickerProps, Partial<DatePic
         }
     }
 
-    onFocus = () => {
+    onIconClick = () => {
         this.setState({visible: true});
     }
 
@@ -354,24 +355,24 @@ export class DatePicker extends React.Component<DatePickerProps, Partial<DatePic
         }
     }
 
-    onPaste = (event) => {
+    onPaste = () => {
         this.paste = true;
     }
 
     calendarRef = (element: Calendar) => {
         this.calendar = element;
     }
 
+    onOuterEvent = () => this.setState({visible: false});
+
     render() {
         const containerClassName = css('date-picker-container', this.props.className);
-        const dropdownClassName = css('date-picker-dropdown', {
-            'date-picker-above': this.props.showAbove
-        });
 
-        const icon = <Icon
+        const icon = <ActionTriggerButton
             icon='calendar'
-            size={IconSize.xsmall}
             className={css('date-picker-calendar-icon')}
+            onClick={this.onIconClick}
+            disabled={this.props.disabled}
             attr={this.props.attr.inputIcon}
         />;
 
@@ -426,7 +427,7 @@ export class DatePicker extends React.Component<DatePickerProps, Partial<DatePic
                  */
                 onMouseEnter={() => {}}
                 outerEvents={['click', 'focusin']}
-                onOuterEvent={(event) => this.setState({visible: false})}
+                onOuterEvent={this.onOuterEvent}
                 attr={mergeAttributeObjects(
                     this.props.attr,
                     {
@@ -447,7 +448,6 @@ export class DatePicker extends React.Component<DatePickerProps, Partial<DatePic
                         value={this.state.value}
                         className={inputClassName}
                         placeholder={placeholder}
-                        onFocus={this.onFocus}
                         onChange={this.onChange}
                         onPaste={this.onPaste}
                         onKeyUp={this.onKeyUp}

lib/components/DateTime/DateTimeField.tsx

@@ -3,9 +3,8 @@ import * as classNames from 'classnames/bind';
 import { MethodNode, dateIsValid, DateFormat } from '../../Common';
 import { FormField, FormFieldAttributes } from '../Field/FormField';
 /** This import solves an error with exports of FormFieldAttributes defaults */
-import { FormErrorAttributes } from '../Field/FormError';
 import { TimeInput, TimeInputAttributes } from './TimeInput';
-import { DatePicker, DatePickerProps, DatePickerAttributes } from './DatePicker';
+import { DatePicker, DatePickerAttributes } from './DatePicker';
 import { DivProps, SpanProps, Elements as Attr } from '../../Attributes';
 const css = classNames.bind(require('./DateTimeField.scss'));
 
@@ -132,7 +131,6 @@ export class DateTimeField extends React.Component<DateTimeFieldProps, Partial<D
     }
 
     getInitialState(props: DateTimeFieldProps): DateTimeFieldState {
-        let datetime = null, timeValue = null, dateValue = null;
         const local = props.localTimezone;
         let invalid = false;
         let initialValue = null;

package.json

@@ -1,6 +1,6 @@
 {
     "name": "@azure-iot/ux-fluent-controls",
-    "version": "2.0.4",
+    "version": "2.0.5",
     "description": "Azure IoT Fluent React Controls",
     "main": "./lib/index.js",
     "types": "./lib/index.d.ts",