close AM/PM element

nexxtway · Jun 28, 2020 · 566e998 · 566e998
1 parent 7b9d144
commit 566e998
Show file tree

Hide file tree

Showing 3 changed files with 24 additions and 1 deletion.
diff --git a/src/components/TimePicker/__test__/ampmSelect.spec.js b/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 />);

diff --git a/src/components/TimePicker/ampmSelect.js b/src/components/TimePicker/ampmSelect.js
@@ -17,6 +17,7 @@ export default class AmPmSelect extends PureComponent {
         this.inputAmId = uniqueId('am');
         this.inputPmId = uniqueId('pm');
         this.handleFocus = this.handleFocus.bind(this);
+        this.handleOnClick = this.handleOnClick.bind(this);
         this.handleOnChange = this.handleOnChange.bind(this);
     }
 
@@ -39,6 +40,11 @@ export default class AmPmSelect extends PureComponent {
         onChange(value);
     }
 
+    handleOnClick() {
+        const { onClick } = this.props;
+        onClick();
+    }
+
     isInputChecked(inputValue) {
         const { value, defaultValue } = this.props;
         return isChecked({ inputValue, value, defaultValue });
@@ -71,6 +77,7 @@ export default class AmPmSelect extends PureComponent {
                         value="AM"
                         checked={this.isInputChecked('AM')}
                         onChange={this.handleOnChange}
+                        onClick={this.handleOnClick}
                         onBlur={handleAmPmBlur}
                     />
 
@@ -83,6 +90,7 @@ export default class AmPmSelect extends PureComponent {
                         value="PM"
                         checked={this.isInputChecked('PM')}
                         onChange={this.handleOnChange}
+                        onClick={this.handleOnClick}
                         onBlur={handleAmPmBlur}
                     />
 
@@ -107,6 +115,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 +124,7 @@ AmPmSelect.propTypes = {
 AmPmSelect.defaultProps = {
     value: undefined,
     defaultValue: undefined,
+    onClick: () => {},
     onChange: () => {},
     onFocus: () => {},
     tabIndex: undefined,

diff --git a/src/components/TimePicker/timeSelect.js b/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}