fix: close AM / PM element by selecting

src/components/TimePicker/__test__/ampmSelect.spec.js

@@ -37,6 +37,12 @@ describe('<AmPmSelect/>', () => {
         const fieldsetDataId = component.find('input').prop('aria-label');
         expect(focusedElementAriaLabel).toBe(fieldsetDataId);
     });
+    it('should call onClick when input option "AM" or "PM" is clicked', () => {
+        const onClickMockFn = jest.fn();
+        const component = mount(<AmPmSelect isFocused onClick={onClickMockFn} />);
+        component.find('input[value="AM"]').simulate('click');
+        expect(onClickMockFn).toHaveBeenCalledTimes(1);
+    });
     it('should call event.stopPropagation when component is focused and the input with value "AM" is blurred', () => {
         const stopPropagationMockFn = jest.fn();
         const component = mount(<AmPmSelect isFocused />);

src/components/TimePicker/ampmSelect.js

@@ -49,8 +49,7 @@ export default class AmPmSelect extends PureComponent {
     }
 
     render() {
-        const { isFocused } = this.props;
-        const { tabIndex, onFocus, value } = this.props;
+        const { isFocused, tabIndex, onFocus, value, onClick } = this.props;
 
         if (isFocused) {
             return (
@@ -71,6 +70,7 @@ export default class AmPmSelect extends PureComponent {
                         value="AM"
                         checked={this.isInputChecked('AM')}
                         onChange={this.handleOnChange}
+                        onClick={onClick}
                         onBlur={handleAmPmBlur}
                     />
 
@@ -83,6 +83,7 @@ export default class AmPmSelect extends PureComponent {
                         value="PM"
                         checked={this.isInputChecked('PM')}
                         onChange={this.handleOnChange}
+                        onClick={onClick}
                         onBlur={handleAmPmBlur}
                     />
 
@@ -107,6 +108,7 @@ AmPmSelect.propTypes = {
     value: PropTypes.string,
     defaultValue: PropTypes.string,
     onChange: PropTypes.func,
+    onClick: PropTypes.func,
     onFocus: PropTypes.func,
     tabIndex: PropTypes.string,
     isFocused: PropTypes.bool,
@@ -115,6 +117,7 @@ AmPmSelect.propTypes = {
 AmPmSelect.defaultProps = {
     value: undefined,
     defaultValue: undefined,
+    onClick: () => {},
     onChange: () => {},
     onFocus: () => {},
     tabIndex: undefined,

src/components/TimePicker/timeSelect.js

@@ -56,6 +56,7 @@ export default class TimeSelect extends Component {
         this.handleBlurHour = this.handleBlurHour.bind(this);
         this.handleChangeMinutes = this.handleChangeMinutes.bind(this);
         this.handleFocusMinutes = this.handleFocusMinutes.bind(this);
+        this.handleClickAmPm = this.handleClickAmPm.bind(this);
         this.handleAmPmChange = this.handleAmPmChange.bind(this);
         this.hanldeFocusAmPm = this.hanldeFocusAmPm.bind(this);
         this.handleKeyDown = this.handleKeyDown.bind(this);
@@ -205,11 +206,16 @@ export default class TimeSelect extends Component {
 
     handleAmPmChange(value) {
         this.setState({
-            inputFocusedIndex: -1,
             ampm: value,
         });
     }
 
+    handleClickAmPm() {
+        this.setState({
+            inputFocusedIndex: -1,
+        });
+    }
+
     hanldeFocusAmPm() {
         this.setState({ inputFocusedIndex: 2 });
     }
@@ -438,6 +444,7 @@ export default class TimeSelect extends Component {
                             value={ampm}
                             defaultValue={this.defaultAmPM}
                             onFocus={this.hanldeFocusAmPm}
+                            onClick={this.handleClickAmPm}
                             onChange={this.handleAmPmChange}
                             isFocused={inputFocusedIndex === 2}
                             ref={this.amPmInputRef}