Merge pull request patw0929#308 from DPOrganizer/feature/on-phone-number-focus

Add optional onPhoneNumberFocus function

Author: patw0929

.storybook/stories/3.Playground/Playground.stories.js

@@ -35,6 +35,7 @@ storiesOf('Documentation', module)
       preferredCountries={array('preferredCountries', defaultProps.preferredCountries)}
       onPhoneNumberChange={action('onPhoneNumberChange')}
       onPhoneNumberBlur={action('onPhoneNumberBlur')}
+      onPhoneNumberFocus={action('onPhoneNumberFocus')}
       onSelectFlag={action('onSelectFlag')}
       disabled={boolean('disabled', defaultProps.disabled)}
       placeholder={text('placeholder', defaultProps.placeholder)}

src/components/IntlTelInput.js

@@ -840,6 +840,23 @@ class IntlTelInput extends Component {
     }
   };
 
+  handleOnFocus = e => {
+    if (typeof this.props.onPhoneNumberFocus === 'function') {
+      const value = this.state.value;
+      const fullNumber = this.formatFullNumber(value);
+      const isValid = this.isValidNumber(fullNumber);
+
+      this.props.onPhoneNumberFocus(
+        isValid,
+        value,
+        this.selectedCountryData,
+        fullNumber,
+        this.getExtension(value),
+        e
+      );
+    }
+  };
+
   bindDocumentClick = () => {
     this.isOpening = true;
     document
@@ -1293,6 +1310,7 @@ class IntlTelInput extends Component {
           refCallback={this.setTelRef}
           handleInputChange={this.handleInputChange}
           handleOnBlur={this.handleOnBlur}
+          handleOnFocus={this.handleOnFocus}
           className={inputClass}
           disabled={this.state.disabled}
           readonly={this.state.readonly}
@@ -1367,6 +1385,8 @@ IntlTelInput.propTypes = {
   onPhoneNumberChange: PropTypes.func,
   /** Optional validation callback function. It returns validation status, input box value and selected country data. */
   onPhoneNumberBlur: PropTypes.func,
+  /** Optional validation callback function. It returns validation status, input box value and selected country data. */
+  onPhoneNumberFocus: PropTypes.func,
   /** Allow main app to do things when a country is selected. */
   onSelectFlag: PropTypes.func,
   /** Disable this component. */
@@ -1430,6 +1450,7 @@ IntlTelInput.defaultProps = {
   preferredCountries: ['us', 'gb'],
   onPhoneNumberChange: null,
   onPhoneNumberBlur: null,
+  onPhoneNumberFocus: null,
   onSelectFlag: null,
   disabled: false,
   autoFocus: false,

src/components/TelInput.js

@@ -12,6 +12,7 @@ export default class TelInput extends Component {
     placeholder: PropTypes.string,
     handleInputChange: PropTypes.func,
     handleOnBlur: PropTypes.func,
+    handleOnFocus: PropTypes.func,
     autoFocus: PropTypes.bool,
     autoComplete: PropTypes.string,
     inputProps: PropTypes.object, // eslint-disable-line react/forbid-prop-types
@@ -45,8 +46,12 @@ export default class TelInput extends Component {
     }
   };
 
-  handleFocus = () => {
+  handleFocus = e => {
     this.setState({ hasFocus: true });
+
+    if (typeof this.props.handleOnFocus === 'function') {
+      this.props.handleOnFocus(e);
+    }
   };
 
   render() {

src/components/__tests__/TelInput.test.js

@@ -242,31 +242,39 @@ describe('TelInput', function() {
     expect(subject.state().value).toBe('');
   });
 
-  it('onPhoneNumberBlur', () => {
-    let expected = '';
-    const onPhoneNumberBlur = (
-      isValid,
-      newNumber,
-      countryData,
-      fullNumber,
-      ext,
-      event
-    ) => {
-      const { type } = event;
-
-      expected = `${isValid},${newNumber},${
-        countryData.iso2
-      },${fullNumber},${ext},${type}`;
-    };
+  const testOnPhoneNumberEvent = ({ property, eventType }) =>
+    it(`${property}`, () => {
+      let expected = '';
+      const onPhoneNumberEvent = (
+        isValid,
+        newNumber,
+        countryData,
+        fullNumber,
+        ext,
+        event
+      ) => {
+        const { type } = event;
+
+        expected = `${isValid},${newNumber},${
+          countryData.iso2
+        },${fullNumber},${ext},${type}`;
+      };
+
+      this.params[property] = onPhoneNumberEvent;
+      const subject = this.makeSubject();
+      const inputComponent = subject.find(TelInput);
 
-    this.params.onPhoneNumberBlur = onPhoneNumberBlur;
-    const subject = this.makeSubject();
-    const inputComponent = subject.find(TelInput);
+      inputComponent.simulate('change', { target: { value: '+886911222333' } });
+      inputComponent.simulate(eventType);
+      expect(expected).toBe(
+        `true,+886911222333,tw,+886 911 222 333,null,${eventType}`
+      );
+    });
 
-    inputComponent.simulate('change', { target: { value: '+886911222333' } });
-    inputComponent.simulate('blur');
-    expect(expected).toBe('true,+886911222333,tw,+886 911 222 333,null,blur');
-  });
+  [
+    { property: 'onPhoneNumberBlur', eventType: 'blur' },
+    { property: 'onPhoneNumberFocus', eventType: 'focus' },
+  ].forEach(testOnPhoneNumberEvent);
 
   it('should has empty value with false nationalMode, false autoHideDialCode and false separateDialCode', () => {
     this.params = {